fix: weather update consistency

Author: Mygod

src/features/weather/ActiveWeather.jsx

@@ -10,7 +10,6 @@ import { useTranslation } from 'react-i18next'
 
 import { useMemory } from '@store/useMemory'
 import { useStorage } from '@store/useStorage'
-import { apolloClient } from '@services/apollo'
 import { Header } from '@components/dialogs/Header'
 import { Footer } from '@components/dialogs/Footer'
 import { Img } from '@components/Img'
@@ -89,42 +88,27 @@ function Weather({ gameplay_condition, ...props }) {
   )
 }
 
-const WeatherMemo = React.memo(
-  Weather,
-  (prev, next) => prev.gameplay_condition === next.gameplay_condition,
-)
-
-export function ActiveWeather() {
+/**
+ * @param {{ weatherData: import('@rm/types').Weather[] }} props
+ */
+export function ActiveWeather({ weatherData }) {
   const weatherEnabled = useStorage((s) => s.filters?.weather?.enabled ?? false)
   const location = useStorage((s) => s.location)
   const zoom = useStorage((s) => s.zoom)
   const allowedZoom = useMemory((s) => s.config.general.activeWeatherZoom)
 
-  const [active, setActive] = React.useState(
-    /** @type {import('@rm/types').Weather | null} */ (null),
+  const active = React.useMemo(
+    () =>
+      zoom > allowedZoom
+        ? weatherData.find(
+            (cell) =>
+              Array.isArray(cell?.polygon) &&
+              booleanPointInPolygon(point(location), polygon([cell.polygon])),
+          ) || null
+        : null,
+    [allowedZoom, location, weatherData, zoom],
   )
 
-  React.useEffect(() => {
-    if (zoom > allowedZoom) {
-      const weatherCache = Object.values(apolloClient.cache.extract()).find(
-        (x) =>
-          x.__typename === 'Weather' &&
-          // @ts-ignore
-          booleanPointInPolygon(point(location), polygon([x.polygon])),
-      )
-      if (
-        weatherCache &&
-        'gameplay_condition' in weatherCache &&
-        weatherCache?.gameplay_condition !== active?.gameplay_condition
-      ) {
-        // @ts-ignore
-        setActive(weatherCache)
-      }
-    } else {
-      setActive(null)
-    }
-  }, [location, zoom, allowedZoom])
-
   if (!weatherEnabled || !active) return null
-  return <WeatherMemo {...active} />
+  return <Weather {...active} />
 }

src/features/weather/WeatherPopup.jsx

@@ -89,11 +89,12 @@ const Timer = ({ updated, ts = Date.now() / 1000 }) => {
       : 'error.main'
 
   React.useEffect(() => {
-    const timer2 = setTimeout(() => {
+    setTimer(getTimeUntil(updated * 1000))
+    const timerId = setInterval(() => {
       setTimer(getTimeUntil(updated * 1000))
     }, 1000)
-    return () => clearTimeout(timer2)
-  })
+    return () => clearInterval(timerId)
+  }, [updated])
 
   return (
     <>

src/pages/map/components/Container.jsx

@@ -7,7 +7,6 @@ import { useStorage } from '@store/useStorage'
 import { useMapStore } from '@store/useMapStore'
 import { ScanOnDemand } from '@features/scanner'
 import { WebhookMarker, WebhookAreaSelection } from '@features/webhooks'
-import { ActiveWeather } from '@features/weather'
 import { timeCheck } from '@utils/timeCheck'
 
 import { Effects } from './Effects'
@@ -66,7 +65,6 @@ export function Container() {
       <WebhookMarker />
       <WebhookAreaSelection />
       <Nav />
-      <ActiveWeather />
     </MapContainer>
   )
 }

src/pages/map/components/QueryData.jsx

@@ -12,6 +12,7 @@ import { FILTER_SKIP_LIST } from '@assets/constants'
 import { Notification } from '@components/Notification'
 import { GenerateCells } from '@features/s2cell'
 import { RouteLayer } from '@features/route'
+import { ActiveWeather } from '@features/weather'
 import { useAnalytics } from '@hooks/useAnalytics'
 import { useProcessError } from '@hooks/useProcessError'
 import { normalizeCategory } from '@utils/normalizeCategory'
@@ -230,10 +231,13 @@ function QueryData({ category, timeout }) {
   }
 
   return (
-    <Clustering category={category}>
-      {filteredData.map((each) => (
-        <Component key={each.id || category} {...each} />
-      ))}
-    </Clustering>
+    <>
+      <Clustering category={category}>
+        {filteredData.map((each) => (
+          <Component key={each.id || category} {...each} />
+        ))}
+      </Clustering>
+      {category === 'weather' && <ActiveWeather weatherData={filteredData} />}
+    </>
   )
 }