feat: simplify server marker

Jujulego · Feb 16, 2025 · fe2736c · fe2736c
1 parent 2f74d74
commit fe2736c
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 61 deletions.
diff --git a/app/(with-map)/server/[ip]/big-data-cloud/page.tsx b/app/(with-map)/server/[ip]/big-data-cloud/page.tsx
@@ -1,5 +1,4 @@
 import { decodeIp, type WithMapServerIpParams } from '@/app/(with-map)/server/[ip]/params';
-import MapFlyTo from '@/components/map/MapFlyTo';
 import MapSpin from '@/components/map/MapSpin';
 import AutonomousSystemItem from '@/components/server/AutonomousSystemItem';
 import PayloadItem from '@/components/server/PayloadItem';
@@ -55,19 +54,13 @@ export default async function WMServerIpBDCPage({ params }: WMServerIpBDCPagePro
       <PayloadItem payload={data} />
 
       { coordinates ? (
-        <>
-          <ServerMarker
-            latitude={coordinates.latitude}
-            longitude={coordinates.longitude}
-            tooltip="Big Data Cloud"
-            selected
-            sx={{ color: 'bigDataCloud.main' }}
-          />
-          <MapFlyTo latitude={coordinates.latitude} longitude={coordinates.longitude} zoom={5} />
-        </>
-      ) : (
-        <MapSpin />
-      ) }
+        <ServerMarker
+          coordinates={coordinates}
+          tooltip="Big Data Cloud"
+          selected
+          sx={{ color: 'bigDataCloud.main' }}
+        />
+      ) : <MapSpin /> }
     </List>
   );
 }
diff --git a/app/(with-map)/server/[ip]/ip-data/page.tsx b/app/(with-map)/server/[ip]/ip-data/page.tsx
@@ -1,5 +1,4 @@
 import { decodeIp, type WithMapServerIpParams } from '@/app/(with-map)/server/[ip]/params';
-import MapFlyTo from '@/components/map/MapFlyTo';
 import MapSpin from '@/components/map/MapSpin';
 import AutonomousSystemItem from '@/components/server/AutonomousSystemItem';
 import PayloadItem from '@/components/server/PayloadItem';
@@ -54,19 +53,13 @@ export default async function WMServerIpDataPage({ params }: WMServerIpDataPageP
       <PayloadItem payload={data} />
 
       { coordinates ? (
-        <>
-          <ServerMarker
-            latitude={coordinates.latitude}
-            longitude={coordinates.longitude}
-            tooltip="ipdata"
-            selected
-            sx={{ color: 'ipdata.main' }}
-          />
-          <MapFlyTo latitude={coordinates.latitude} longitude={coordinates.longitude} zoom={5} />
-        </>
-      ) : (
-        <MapSpin />
-      ) }
+        <ServerMarker
+          coordinates={coordinates}
+          tooltip="ipdata"
+          selected
+          sx={{ color: 'ipdata.main' }}
+        />
+      ) : <MapSpin /> }
     </List>
   );
 }
diff --git a/app/(with-map)/server/[ip]/ip-geolocation/page.tsx b/app/(with-map)/server/[ip]/ip-geolocation/page.tsx
@@ -1,5 +1,4 @@
 import { decodeIp, type WithMapServerIpParams } from '@/app/(with-map)/server/[ip]/params';
-import MapFlyTo from '@/components/map/MapFlyTo';
 import MapSpin from '@/components/map/MapSpin';
 import AutonomousSystemItem from '@/components/server/AutonomousSystemItem';
 import PayloadItem from '@/components/server/PayloadItem';
@@ -54,13 +53,11 @@ export default async function WMServerIpGeolocationPage({ params }: WMServerIpGe
       <PayloadItem payload={data} />
 
       <ServerMarker
-        latitude={coordinates.latitude}
-        longitude={coordinates.longitude}
+        coordinates={coordinates}
         tooltip="ipgeolocation"
         selected
         sx={{ color: 'ipGeolocation.main' }}
       />
-      <MapFlyTo latitude={coordinates.latitude} longitude={coordinates.longitude} zoom={5} />
     </List>
   );
 }
diff --git a/app/(with-map)/server/[ip]/ip-info/page.tsx b/app/(with-map)/server/[ip]/ip-info/page.tsx
@@ -44,16 +44,12 @@ export default async function WMServerIpInfoPage({ params }: WMServerIpInfoPageP
       <PayloadItem payload={data} />
 
       { coordinates ? (
-        <>
-          <ServerMarker
-            latitude={coordinates.latitude}
-            longitude={coordinates.longitude}
-            tooltip="IPinfo"
-            selected
-            sx={{ color: 'ipInfo.main' }}
-          />
-          <MapFlyTo latitude={coordinates.latitude} longitude={coordinates.longitude} zoom={5} />
-        </>
+        <ServerMarker
+          coordinates={coordinates}
+          tooltip="IPinfo"
+          selected
+          sx={{ color: 'ipInfo.main' }}
+        />
       ) : <MapSpin /> }
     </List>
   );

diff --git a/app/(with-map)/server/[ip]/ip-quality-score/page.tsx b/app/(with-map)/server/[ip]/ip-quality-score/page.tsx
@@ -1,5 +1,4 @@
 import { decodeIp, type WithMapServerIpParams } from '@/app/(with-map)/server/[ip]/params';
-import MapFlyTo from '@/components/map/MapFlyTo';
 import MapSpin from '@/components/map/MapSpin';
 import AutonomousSystemItem from '@/components/server/AutonomousSystemItem';
 import PayloadItem from '@/components/server/PayloadItem';
@@ -55,19 +54,13 @@ export default async function WMServerIpIPQSPage({ params }: WMServerIpIPQSPageP
       <PayloadItem payload={data} />
 
       { coordinates ? (
-        <>
-          <ServerMarker
-            latitude={coordinates.latitude}
-            longitude={coordinates.longitude}
-            tooltip="IPQS"
-            selected
-            sx={{ color: 'ipQualityScore.main' }}
-          />
-          <MapFlyTo latitude={coordinates.latitude} longitude={coordinates.longitude} zoom={5} />
-        </>
-      ) : (
-        <MapSpin />
-      ) }
+        <ServerMarker
+          coordinates={coordinates}
+          tooltip="IPQS"
+          selected
+          sx={{ color: 'ipQualityScore.main' }}
+        />
+      ) : <MapSpin /> }
     </List>
   );
 }
diff --git a/components/animal/AnimalMarker.tsx b/components/animal/AnimalMarker.tsx
@@ -21,6 +21,7 @@ export default function AnimalMarker({ coordinates }: AnimalMarkerProps) {
     }
   }, [coordinates, flyTo, isReady]);
 
+  // Render
   return (
     <MapMarker latitude={coordinates.latitude} longitude={coordinates.longitude}>
       <m.div

diff --git a/components/server/ServerMarker.tsx b/components/server/ServerMarker.tsx
@@ -1,25 +1,35 @@
 'use client';
 
 import MapMarker from '@/components/map/MapMarker';
+import { useMapFlyTo } from '@/lib/map/useMapFlyTo';
+import type { Coordinates } from '@/lib/utils/coordinates';
 import { mergeSx } from '@/lib/utils/mui';
 import PlaceIcon from '@mui/icons-material/Place';
 import { type SxProps, type Theme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import { m } from 'motion/react';
-import { type ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
 
 // Component
 export interface ServerMarkerProps {
-  readonly latitude: number;
-  readonly longitude: number;
+  readonly coordinates: Coordinates;
   readonly tooltip?: ReactNode;
   readonly selected?: boolean;
   readonly sx?: SxProps<Theme>;
 }
 
-export default function ServerMarker({ latitude, longitude, tooltip, selected, sx }: ServerMarkerProps) {
+export default function ServerMarker({ coordinates, tooltip, selected, sx }: ServerMarkerProps) {
+  const { flyTo, isReady } = useMapFlyTo();
+
+  useEffect(() => {
+    if (isReady) {
+      flyTo({ latitude: coordinates.latitude, longitude: coordinates.longitude, zoom: 5 });
+    }
+  }, [coordinates, flyTo, isReady]);
+
+  // Render
   return (
-    <MapMarker latitude={latitude} longitude={longitude}>
+    <MapMarker latitude={coordinates.latitude} longitude={coordinates.longitude}>
       <m.div
         initial={{ scale: 0, translateY: '8.33%' }}
         style={{