Refactor PlaceAddress.tsx

Author: opyh

package-lock.json

@@ -152,7 +152,7 @@
     "ts-node": "^10.9.1",
     "ts-node-dev": "^2.0.0",
     "ttag-cli": "^1.10.11",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.3"
   },
   "scripts": {
     "dev": "npx ts-node-dev --watch 'src/server/*.ts,src/lib/env.ts,src/app/router.ts' --ignore-watch 'src/.next/*' -P src/server/tsconfig.json --respawn --icu-data-dir=node_modules/full-icu src/server/server.ts",

package.json

@@ -9,21 +9,10 @@ import getAddressString from "../../../lib/getAddressString";
 import getAddressStringFromA11yJSONFeature from "../../../lib/getAddressStringFromA11yJSONFeature";
 import openButtonCaption from "../../../lib/openButtonCaption";
 import { UAResult } from "../../../lib/userAgent";
-import { fetchJSON, generateGetPlaceInfoURL } from "../../helper";
+import fetchJSON from "../../fetchJSON";
 import PlaceIcon from "../../icons/actions/Place";
 import RouteIcon from "../../icons/actions/Route";
 
-function useParentPlaceInfo(parentPlaceInfoId: string) {
-  const appContext = React.useContext(AppContext);
-  const baseUrl = generateGetPlaceInfoURL({
-    baseUrl: appContext.baseUrl,
-    placeInfoId: parentPlaceInfoId,
-    appToken: appContext.app.tokenString,
-  });
-  const { data, error } = useSWR<any>(baseUrl, fetchJSON);
-  return { data, error };
-}
-
 function getAddressForACProperties(properties: AccessibilityCloudProperties): string | null {
   if (typeof properties.address === "string") return properties.address;
   if (typeof properties.address === "object") {
@@ -41,14 +30,7 @@ function getAddressForACProperties(properties: AccessibilityCloudProperties): st
   return null;
 }
 
-function useAddressForProperties(properties: NodeProperties): string | null {
-  if ((properties as any)?.parentPlaceInfo) {
-    const parentPlaceInfo = useParentPlaceInfo((properties as any)?.parentPlaceInfo);
-    // Use parentPlaceInfo to get the address, if necessary
-    console.log("data: " + parentPlaceInfo.data);
-    console.log("error: " + parentPlaceInfo.error);
-    // return getAddressForACProperties(properties);
-  }
+function getAddressForProperties(properties: NodeProperties): string | null {
   if (!isWheelmapProperties(properties)) {
     return getAddressForACProperties(properties);
   }
@@ -61,11 +43,21 @@ type Props = {
   userAgent: UAResult;
 };
 
-const PlaceAddress: React.FC<Props> = ({ feature, category, userAgent }) => {
+function PlaceAddress({ feature, category, userAgent }: Props) {
   const placeName = placeNameFor(feature.properties, category);
   const openInMaps = generateMapsUrl(userAgent, feature, placeName);
   const showOnOsmUrl = generateShowOnOsmUrl(feature);
-  const address = useAddressForProperties(feature.properties);
+
+  const appContext = React.useContext(AppContext);
+  const baseUrl = appContext?.baseUrl;
+  const appToken = appContext.app.tokenString;
+
+  const { properties } = feature;
+  const parentPlaceInfoId = isWheelmapProperties(properties) ? undefined : properties.parentPlaceInfoId;
+  const url = parentPlaceInfoId && `${baseUrl}/place-infos/${parentPlaceInfoId}.json?appToken=${appToken}`;
+  const { data: parentPlaceInfo } = useSWR<any>(url, fetchJSON);
+  const propertiesToUseForAddress = parentPlaceInfo?.properties ?? feature.properties;
+  const address = getAddressForProperties(propertiesToUseForAddress);
 
   if (!feature || !feature.properties) return null;
   const addressString = address && address.replace(/,$/, "").replace(/^,/, "");
@@ -86,6 +78,6 @@ const PlaceAddress: React.FC<Props> = ({ feature, category, userAgent }) => {
       )}
     </React.Fragment>
   );
-};
+}
 
 export default PlaceAddress;

src/components/NodeToolbar/IconButtonList/PlaceAddress.tsx

@@ -0,0 +1,8 @@
+export default async function fetchJSON(url: RequestInfo | URL) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Network response was not OK (${response.status}).`);
+  }
+  const json = await response.json();
+  return json;
+}

src/components/fetchJSON.tsx

@@ -8,7 +8,7 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,
@@ -17,7 +17,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
   },
   "include": [
     "next-env.d.ts",
@@ -27,4 +29,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}