🐛 Fix flickering of tutorial and migrationbanner (#507)

This commit is contained in:
Bob van der Helm 2023-09-26 14:07:04 +02:00 committed by GitHub
parent cfd7fb3073
commit d11cf0ec03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 11 deletions

View File

@ -4,9 +4,7 @@ import Card from 'components/Card'
import { GridGlobe, GridHole, GridLandscape, GridTire } from 'components/Icons' import { GridGlobe, GridHole, GridLandscape, GridTire } from 'components/Icons'
import Text from 'components/Text' import Text from 'components/Text'
import { Tooltip } from 'components/Tooltip' import { Tooltip } from 'components/Tooltip'
import { DEFAULT_SETTINGS } from 'constants/defaultSettings' import useStore from 'store'
import { TUTORIAL_KEY } from 'constants/localStore'
import useLocalStorage from 'hooks/useLocalStorage'
interface Props { interface Props {
text: string | ReactNode text: string | ReactNode
@ -28,9 +26,8 @@ function IntroBackground(props: { bg: Props['bg'] }) {
} }
export default function Intro(props: Props) { export default function Intro(props: Props) {
const [tutorial] = useLocalStorage<boolean>(TUTORIAL_KEY, DEFAULT_SETTINGS.tutorial) const showTutorial = useStore((s) => s.tutorial)
if (!showTutorial) return null
if (!tutorial) return null
return ( return (
<Card <Card
className={`relative w-full p-8 bg-intro bg-cover h-55`} className={`relative w-full p-8 bg-intro bg-cover h-55`}

View File

@ -5,14 +5,17 @@ import { TextLink } from 'components/TextLink'
import { DEFAULT_SETTINGS } from 'constants/defaultSettings' import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
import { MIGRATION_BANNER_KEY } from 'constants/localStore' import { MIGRATION_BANNER_KEY } from 'constants/localStore'
import useLocalStorage from 'hooks/useLocalStorage' import useLocalStorage from 'hooks/useLocalStorage'
import useStore from 'store'
export default function MigrationBanner() { export default function MigrationBanner() {
const [migrationBanner, setMigrationBanner] = useLocalStorage<boolean>( const [_, setMigrationBanner] = useLocalStorage<boolean>(
MIGRATION_BANNER_KEY, MIGRATION_BANNER_KEY,
DEFAULT_SETTINGS.migrationBanner, DEFAULT_SETTINGS.migrationBanner,
) )
if (!migrationBanner) return null const showMigrationBanner = useStore((s) => s.migrationBanner)
if (!showMigrationBanner) return null
return ( return (
<Card <Card
className='relative w-full bg-info-bg/20 text-info' className='relative w-full bg-info-bg/20 text-info'

View File

@ -1,10 +1,17 @@
import { useCallback, useEffect, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import useStore from 'store'
export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] { export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
const keyRef = useRef(key) const keyRef = useRef(key)
const defaultValueRef = useRef(defaultValue) const defaultValueRef = useRef(defaultValue)
const [value, _setValue] = useState(defaultValueRef.current) const [value, _setValue] = useState(defaultValueRef.current)
const updateValue = useCallback((value: T) => {
useStore.setState({ [keyRef.current]: value })
_setValue(value)
}, [])
useEffect(() => { useEffect(() => {
const savedItem = localStorage.getItem(keyRef.current) 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)) 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) { function handler(e: StorageEvent) {
if (e.key !== keyRef.current) return if (e.key !== keyRef.current) return
const item = localStorage.getItem(keyRef.current) 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) window.addEventListener('storage', handler)
@ -30,7 +37,7 @@ export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (v
const setValue = useCallback((value: T) => { const setValue = useCallback((value: T) => {
try { try {
_setValue(value) updateValue(value)
localStorage.setItem(keyRef.current, JSON.stringify(value)) localStorage.setItem(keyRef.current, JSON.stringify(value))
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {

View File

@ -9,5 +9,7 @@ export default function createCommonSlice(set: SetState<CommonSlice>, get: GetSt
selectedAccount: null, selectedAccount: null,
focusComponent: null, focusComponent: null,
accountDetailsExpanded: false, accountDetailsExpanded: false,
migrationBanner: true,
tutorial: true,
} }
} }

View File

@ -8,6 +8,8 @@ interface CommonSlice {
updatedAccount?: Account updatedAccount?: Account
focusComponent: FocusComponent | null focusComponent: FocusComponent | null
accountDetailsExpanded: boolean accountDetailsExpanded: boolean
migrationBanner: boolean
tutorial: boolean
} }
interface FocusComponent { interface FocusComponent {