🐛 Fix flickering of tutorial and migrationbanner (#507)
This commit is contained in:
parent
cfd7fb3073
commit
d11cf0ec03
@ -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`}
|
||||||
|
@ -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'
|
||||||
|
@ -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') {
|
||||||
|
@ -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,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
2
src/types/interfaces/store/common.d.ts
vendored
2
src/types/interfaces/store/common.d.ts
vendored
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user