2 files changed, 34 insertions, 25 deletions

diff --git a/modern/src/common/components/AddressValue.js b/modern/src/common/components/AddressValue.js
new file mode 100644
index 00000000..767f516b
--- /dev/null
+++ b/modern/src/common/components/AddressValue.js
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from '@mui/material';
+import { useTranslation } from './LocalizationProvider';
+import { useCatch } from '../../reactHelper';
+
+const AddressValue = ({ latitude, longitude, originalAddress }) => {
+  const t = useTranslation();
+
+  const [address, setAddress] = useState();
+
+  useEffect(() => {
+    setAddress(originalAddress);
+  }, [originalAddress]);
+
+  const showAddress = useCatch(async () => {
+    const query = new URLSearchParams({ latitude, longitude });
+    const response = await fetch(`/api/server/geocode?${query.toString()}`);
+    if (response.ok) {
+      setAddress(await response.text());
+    } else {
+      throw Error(await response.text());
+    }
+  });
+
+  if (address) {
+    return address;
+  }
+  return (<Link href="#" onClick={showAddress}>{t('sharedShowAddress')}</Link>);
+};
+
+export default AddressValue;
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 76de2862..5810ae5e 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import {
@@ -7,7 +7,7 @@ import {
 import { useAttributePreference, usePreference } from '../util/preferences';
 import { useTranslation } from './LocalizationProvider';
 import { useAdministrator } from '../util/permissions';
-import { useCatch } from '../../reactHelper';
+import AddressValue from './AddressValue';
 
 const PositionValue = ({ position, property, attribute }) => {
   const t = useTranslation();
@@ -21,25 +21,6 @@ const PositionValue = ({ position, property, attribute }) => {
   const speedUnit = useAttributePreference('speedUnit');
   const coordinateFormat = usePreference('coordinateFormat');
 
-  const [address, setAddress] = useState();
-
-  useEffect(() => {
-    setAddress(position.address);
-  }, [position]);
-
-  const showAddress = useCatch(async () => {
-    const query = new URLSearchParams({
-      latitude: position.latitude,
-      longitude: position.longitude,
-    });
-    const response = await fetch(`/api/server/geocode?${query.toString()}`);
-    if (response.ok) {
-      setAddress(await response.text());
-    } else {
-      throw Error(await response.text());
-    }
-  });
-
   const formatValue = () => {
     switch (key) {
       case 'fixTime':
@@ -83,10 +64,7 @@ const PositionValue = ({ position, property, attribute }) => {
         </>
       );
     case 'address':
-      if (address) {
-        return address;
-      }
-      return (<Link href="#" onClick={showAddress}>{t('sharedShowAddress')}</Link>);
+      return (<AddressValue latitude={position.latitude} longitude={position.longitude} originalAddress={value} />);
     case 'network':
       if (value) {
         return (<Link component={RouterLink} to={`/network/${position.id}`}>{t('sharedInfoTitle')}</Link>);