fix: icon opacity and some zustand deprecated warnings

package.json

@@ -118,7 +118,7 @@
     "source-map": "^0.7.4",
     "suncalc": "^1.9.0",
     "supercluster": "^8.0.1",
-    "zustand": "^4.4.1"
+    "zustand": "4.4.6"
   },
   "devDependencies": {
     "@rm/types": "*",

src/components/Layers.jsx

@@ -1,3 +1,4 @@
+// @ts-check
 import * as React from 'react'
 import { TileLayer, ZoomControl, useMap } from 'react-leaflet'
 import { control } from 'leaflet'
@@ -33,7 +34,9 @@ export function ControlledLocate() {
           setView: 'untilPan',
         })
         .addTo(map)
-      return () => lc.remove()
+      return () => {
+        lc.remove()
+      }
     }
   }, [navSetting])
 

src/components/QueryData.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useQuery } from '@apollo/client'
 import { useMap } from 'react-leaflet'
 
-import { basicEqualFn, useStatic, useStore } from '@hooks/useStore'
+import { useStatic, useStore } from '@hooks/useStore'
 import { usePermCheck } from '@hooks/usePermCheck'
 import Query from '@services/Query'
 import { getQueryArgs } from '@services/functions/getQueryArgs'
@@ -96,13 +96,12 @@ function QueryData({ category, timeout }) {
     (s) => s.userSettings[userSettingsCategory(category)],
   )
   const filters = useStore((s) => s.filters[category])
-  const onlyAreas = useStore(
-    (s) =>
-      (s.filters?.scanAreas?.filterByAreas &&
-        s.filters?.scanAreas?.filter?.areas) ||
-      [],
-    basicEqualFn,
-  )
+  const onlyAreas =
+    useStore(
+      (s) =>
+        s.filters?.scanAreas?.filterByAreas &&
+        s.filters?.scanAreas?.filter?.areas,
+    ) || []
 
   const initial = React.useMemo(
     () => ({

src/components/layout/auth/Login.jsx

@@ -10,7 +10,7 @@ import { useQuery } from '@apollo/client'
 
 import { CUSTOM_COMPONENT } from '@services/queries/config'
 
-import { basicEqualFn, useStatic } from '@hooks/useStore'
+import { useStatic } from '@hooks/useStore'
 import LocalLogin from './Local'
 import LocaleSelection from '../general/LocaleSelection'
 import DiscordLogin from './Discord'
@@ -20,28 +20,18 @@ import ThemeToggle from '../general/ThemeToggle'
 import { Loading } from '../general/Loading'
 
 export default function Login() {
-  const [
-    loggedIn,
-    loginPage,
-    headerTitle,
-    discordInvite,
-    discordAuthUrl,
-    telegramBotName,
-    telegramAuthUrl,
-    localAuthUrl,
-  ] = useStatic(
-    (s) => [
-      s.auth.loggedIn,
-      !!s.config.loginPage,
-      s.config.general.headerTitle,
-      s.config.links.discordInvite,
-      s.config.customRoutes.discordAuthUrl,
-      s.config.customRoutes.telegramBotName,
-      s.config.customRoutes.telegramAuthUrl,
-      s.config.customRoutes.localAuthUrl,
-    ],
-    basicEqualFn,
+  const loggedIn = useStatic((s) => s.auth.loggedIn)
+  const loginPage = useStatic((s) => !!s.config.loginPage)
+  const headerTitle = useStatic((s) => s.config.general.headerTitle)
+  const discordInvite = useStatic((s) => s.config.links.discordInvite)
+  const discordAuthUrl = useStatic((s) => s.config.customRoutes.discordAuthUrl)
+  const telegramBotName = useStatic(
+    (s) => s.config.customRoutes.telegramBotName,
   )
+  const telegramAuthUrl = useStatic(
+    (s) => s.config.customRoutes.telegramAuthUrl,
+  )
+  const localAuthUrl = useStatic((s) => s.config.customRoutes.localAuthUrl)
   const authMethods = useStatic((s) => s.auth.methods)
 
   const { t, i18n } = useTranslation()

src/components/markers/usePokestopMarker.js

@@ -31,7 +31,7 @@ export default function usePokestopMarker({
     (a, b) => Object.entries(a[0]).every(([k, v]) => b[0][k] === v),
   )
 
-  const getOpacity = useOpacity('pokestops', 'invasions')
+  const getOpacity = useOpacity('pokestops', 'invasion')
   const [showArBadge, baseIcon, baseSize] = useStore((s) => {
     const { filters, userSettings } = s
     return [
@@ -86,6 +86,7 @@ export default function usePokestopMarker({
       }
     })
   }
+
   if (hasQuest && !(hasInvasion && invasionMod?.removeQuest)) {
     quests.forEach((quest) => {
       const {

src/components/tiles/Gym.jsx

@@ -131,7 +131,7 @@ const GymTile = (gym) => {
     ]
   }, basicEqualFn)
 
-  const opacity = useOpacity('gyms', 'raids')(gym.raid_end_timestamp)
+  const opacity = useOpacity('gyms', 'raid')(gym.raid_end_timestamp)
 
   const timerToDisplay =
     gym.raid_pokemon_id || hasHatched

src/hooks/useOpacity.js

@@ -1,25 +1,27 @@
 // @ts-check
 import { useCallback } from 'react'
-import { basicEqualFn, useStore } from './useStore'
+import { useStore } from './useStore'
 
 /**
  * Returns dynamic opacity based on timestamp
  * @param {'pokemon' | 'gyms' | 'pokestops'} category
- * @param {'raids' | 'invasions'} [subCategory]
+ * @param {'raid' | 'invasion'} [subCategory]
  * @returns
  */
 export default function useOpacity(category, subCategory) {
-  const [enabled, opacityOneMinute, opacityFiveMinutes, opacityTenMinutes] =
-    useStore(
-      (s) => [
-        s.userSettings[category]?.[`${subCategory || category}Opacity`] ??
-          false,
-        s.userSettings[category]?.opacityOneMinute || 0.25,
-        s.userSettings[category]?.opacityFiveMinutes || 0.5,
-        s.userSettings[category]?.opacityTenMinutes || 0.75,
-      ],
-      basicEqualFn,
-    )
+  const enabled = useStore(
+    (s) =>
+      s.userSettings[category]?.[`${subCategory || category}Opacity`] ?? false,
+  )
+  const opacityOneMinute = useStore(
+    (s) => s.userSettings[category]?.opacityOneMinute || 0.25,
+  )
+  const opacityFiveMinutes = useStore(
+    (s) => s.userSettings[category]?.opacityFiveMinutes || 0.5,
+  )
+  const opacityTenMinutes = useStore(
+    (s) => s.userSettings[category]?.opacityTenMinutes || 0.75,
+  )
 
   /** @type {(time: number) => number} */
   const getOpacity = useCallback(

src/hooks/useStore.js

@@ -1,6 +1,6 @@
 import Utility from '@services/Utility'
 import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
+import { persist, createJSONStorage } from 'zustand/middleware'
 
 /**
  * TODO: Finish this
@@ -106,7 +106,7 @@ export const useStore = create(
     }),
     {
       name: 'local-state',
-      getStorage: () => localStorage,
+      storage: createJSONStorage(() => localStorage),
     },
   ),
 )

yarn.lock

@@ -6306,9 +6306,9 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
 
-zustand@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.1.tgz#0cd3a3e4756f21811bd956418fdc686877e8b3b0"
-  integrity sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==
+[email protected].6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.6.tgz#03c78e3e2686c47095c93714c0c600b72a6512bd"
+  integrity sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==
   dependencies:
     use-sync-external-store "1.2.0"