From e0eb10148a11bb349cb3965dced0440bb38f289c Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Fri, 3 Nov 2023 11:28:58 -0400
Subject: [PATCH] fix: icon opacity and some zustand deprecated warnings

---
 package.json                                |  2 +-
 src/components/Layers.jsx                   |  5 ++-
 src/components/QueryData.jsx                | 15 +++++----
 src/components/layout/auth/Login.jsx        | 34 ++++++++-------------
 src/components/markers/usePokestopMarker.js |  3 +-
 src/components/tiles/Gym.jsx                |  2 +-
 src/hooks/useOpacity.js                     | 28 +++++++++--------
 src/hooks/useStore.js                       |  4 +--
 yarn.lock                                   |  8 ++---
 9 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index d699aeee8..65c5c2530 100644
--- a/package.json
+++ b/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": "*",
diff --git a/src/components/Layers.jsx b/src/components/Layers.jsx
index d60eb0285..c4f5185cb 100644
--- a/src/components/Layers.jsx
+++ b/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])
 
diff --git a/src/components/QueryData.jsx b/src/components/QueryData.jsx
index 3c9baf696..073824809 100644
--- a/src/components/QueryData.jsx
+++ b/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(
     () => ({
diff --git a/src/components/layout/auth/Login.jsx b/src/components/layout/auth/Login.jsx
index 884d7a59f..e51113791 100644
--- a/src/components/layout/auth/Login.jsx
+++ b/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()
diff --git a/src/components/markers/usePokestopMarker.js b/src/components/markers/usePokestopMarker.js
index 3721a4295..c68213369 100644
--- a/src/components/markers/usePokestopMarker.js
+++ b/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 {
diff --git a/src/components/tiles/Gym.jsx b/src/components/tiles/Gym.jsx
index 02ed2fafb..861bbd42d 100644
--- a/src/components/tiles/Gym.jsx
+++ b/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
diff --git a/src/hooks/useOpacity.js b/src/hooks/useOpacity.js
index d694020d0..c1269e139 100644
--- a/src/hooks/useOpacity.js
+++ b/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(
diff --git a/src/hooks/useStore.js b/src/hooks/useStore.js
index e7599e6be..daf2a0ab9 100644
--- a/src/hooks/useStore.js
+++ b/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),
     },
   ),
 )
diff --git a/yarn.lock b/yarn.lock
index 7edb9e6b9..b08b6d791 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6306,9 +6306,9 @@ zen-observable@0.8.15:
   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==
+zustand@4.4.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"