From d11cf0ec03c255da77034a2d0700460684c30ffc Mon Sep 17 00:00:00 2001
From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
Date: Tue, 26 Sep 2023 14:07:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20flickering=20of=20tutorial?=
 =?UTF-8?q?=20and=20migrationbanner=20(#507)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Intro.tsx               |  9 +++------
 src/components/MigrationBanner.tsx     |  7 +++++--
 src/hooks/useLocalStorage.ts           | 13 ++++++++++---
 src/store/slices/common.ts             |  2 ++
 src/types/interfaces/store/common.d.ts |  2 ++
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index 40a804bb..74ebb91c 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -4,9 +4,7 @@ import Card from 'components/Card'
 import { GridGlobe, GridHole, GridLandscape, GridTire } from 'components/Icons'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
-import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { TUTORIAL_KEY } from 'constants/localStore'
-import useLocalStorage from 'hooks/useLocalStorage'
+import useStore from 'store'
 
 interface Props {
   text: string | ReactNode
@@ -28,9 +26,8 @@ function IntroBackground(props: { bg: Props['bg'] }) {
 }
 
 export default function Intro(props: Props) {
-  const [tutorial] = useLocalStorage<boolean>(TUTORIAL_KEY, DEFAULT_SETTINGS.tutorial)
-
-  if (!tutorial) return null
+  const showTutorial = useStore((s) => s.tutorial)
+  if (!showTutorial) return null
   return (
     <Card
       className={`relative w-full p-8 bg-intro bg-cover h-55`}
diff --git a/src/components/MigrationBanner.tsx b/src/components/MigrationBanner.tsx
index a284f184..c27aa713 100644
--- a/src/components/MigrationBanner.tsx
+++ b/src/components/MigrationBanner.tsx
@@ -5,14 +5,17 @@ import { TextLink } from 'components/TextLink'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { MIGRATION_BANNER_KEY } from 'constants/localStore'
 import useLocalStorage from 'hooks/useLocalStorage'
+import useStore from 'store'
 
 export default function MigrationBanner() {
-  const [migrationBanner, setMigrationBanner] = useLocalStorage<boolean>(
+  const [_, setMigrationBanner] = useLocalStorage<boolean>(
     MIGRATION_BANNER_KEY,
     DEFAULT_SETTINGS.migrationBanner,
   )
 
-  if (!migrationBanner) return null
+  const showMigrationBanner = useStore((s) => s.migrationBanner)
+
+  if (!showMigrationBanner) return null
   return (
     <Card
       className='relative w-full bg-info-bg/20 text-info'
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 19ec23b5..41f81b9d 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,10 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import useStore from 'store'
+
 export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
   const keyRef = useRef(key)
   const defaultValueRef = useRef(defaultValue)
   const [value, _setValue] = useState(defaultValueRef.current)
 
+  const updateValue = useCallback((value: T) => {
+    useStore.setState({ [keyRef.current]: value })
+    _setValue(value)
+  }, [])
+
   useEffect(() => {
     const savedItem = localStorage.getItem(keyRef.current)
 
@@ -12,13 +19,13 @@ export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (v
       localStorage.setItem(keyRef.current, JSON.stringify(defaultValueRef.current))
     }
 
-    _setValue(savedItem ? JSON.parse(savedItem) : defaultValueRef.current)
+    updateValue(savedItem ? JSON.parse(savedItem) : defaultValueRef.current)
 
     function handler(e: StorageEvent) {
       if (e.key !== keyRef.current) return
 
       const item = localStorage.getItem(keyRef.current)
-      _setValue(JSON.parse(item ?? JSON.stringify(defaultValueRef.current)))
+      updateValue(JSON.parse(item ?? JSON.stringify(defaultValueRef.current)))
     }
 
     window.addEventListener('storage', handler)
@@ -30,7 +37,7 @@ export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (v
 
   const setValue = useCallback((value: T) => {
     try {
-      _setValue(value)
+      updateValue(value)
 
       localStorage.setItem(keyRef.current, JSON.stringify(value))
       if (typeof window !== 'undefined') {
diff --git a/src/store/slices/common.ts b/src/store/slices/common.ts
index 0dc51106..5591df32 100644
--- a/src/store/slices/common.ts
+++ b/src/store/slices/common.ts
@@ -9,5 +9,7 @@ export default function createCommonSlice(set: SetState<CommonSlice>, get: GetSt
     selectedAccount: null,
     focusComponent: null,
     accountDetailsExpanded: false,
+    migrationBanner: true,
+    tutorial: true,
   }
 }
diff --git a/src/types/interfaces/store/common.d.ts b/src/types/interfaces/store/common.d.ts
index 69f96d68..116772bb 100644
--- a/src/types/interfaces/store/common.d.ts
+++ b/src/types/interfaces/store/common.d.ts
@@ -8,6 +8,8 @@ interface CommonSlice {
   updatedAccount?: Account
   focusComponent: FocusComponent | null
   accountDetailsExpanded: boolean
+  migrationBanner: boolean
+  tutorial: boolean
 }
 
 interface FocusComponent {