fix: active weather

src/components/layout/general/ActiveWeather.jsx

@@ -6,14 +6,12 @@ import DialogContent from '@mui/material/DialogContent'
 import Box from '@mui/material/Box'
 import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
 import { point, polygon } from '@turf/helpers'
-import { useQuery } from '@apollo/client'
 import { useTranslation } from 'react-i18next'
 
 import WeatherPopup from '@components/popups/Weather'
 import { useMemory } from '@hooks/useMemory'
 import { useStorage } from '@hooks/useStorage'
-import getAllWeather from '@services/queries/weather'
-import { getQueryArgs } from '@services/functions/getQueryArgs'
+import { apolloClient } from '@services/apollo'
 
 import Header from './Header'
 import Footer from './Footer'
@@ -48,30 +46,27 @@ export default function ActiveWeather() {
   const allowedZoom = useMemory((s) => s.config.general.activeWeatherZoom)
   const { t } = useTranslation()
 
-  const { data, previousData } = useQuery(getAllWeather, {
-    fetchPolicy: 'cache-only',
-    skip: !weatherEnabled,
-    variables: {
-      ...getQueryArgs(),
-      filters: {
-        onlyAreas: useStorage.getState().filters.scanAreas?.filter?.areas || [],
-      },
-    },
-  })
-
+  const [active, setActive] = React.useState(
+    /** @type {import('@rm/types').Weather | null} */ (null),
+  )
   const [open, setOpen] = React.useState(false)
 
-  if (!weatherEnabled || !Icons) return null
-
-  /** @type {import('@rm/types').Weather | undefined} */
-  const active = (data || previousData)?.weather?.find(
-    (cell) =>
-      cell && booleanPointInPolygon(point(location), polygon([cell.polygon])),
-  )
+  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])),
+      )
+      // @ts-ignore
+      if (weatherCache) setActive(weatherCache)
+    }
+  }, [location, zoom, allowedZoom])
 
+  if (!weatherEnabled || !Icons || !active) return null
   const [{ disableColorShift = false }] = Icons.getModifiers('weather')
-
-  return active?.gameplay_condition && zoom > allowedZoom ? (
+  return (
     <React.Fragment key={active?.gameplay_condition}>
       <StyledBox
         className="weather-icon flex-center"
@@ -109,5 +104,5 @@ export default function ActiveWeather() {
         />
       </Dialog>
     </React.Fragment>
-  ) : null
+  )
 }