diff --git a/web/hooks/use-global-config.ts b/web/hooks/use-global-config.ts index 32200b8d..db8dd9cb 100644 --- a/web/hooks/use-global-config.ts +++ b/web/hooks/use-global-config.ts @@ -1,12 +1,17 @@ import { GlobalConfig } from 'common/globalConfig' -import { useEffect, useState } from 'react' +import { useEffect } from 'react' import { listenForGlobalConfig } from 'web/lib/firebase/globalConfig' +import { inMemoryStore, usePersistentState } from './use-persistent-state' export const useGlobalConfig = () => { - const [globalConfig, setGlobalConfig] = useState(null) + const [globalConfig, setGlobalConfig] = + usePersistentState(null, { + store: inMemoryStore(), + key: 'globalConfig', + }) useEffect(() => { return listenForGlobalConfig(setGlobalConfig) - }, []) + }, [setGlobalConfig]) return globalConfig } diff --git a/web/hooks/use-persistent-state.ts b/web/hooks/use-persistent-state.ts index 4448bb77..ab1cd4a2 100644 --- a/web/hooks/use-persistent-state.ts +++ b/web/hooks/use-persistent-state.ts @@ -89,6 +89,17 @@ export const historyStore = (prefix = '__manifold'): PersistentStore => ({ }, }) +const store: Record = {} + +export const inMemoryStore = (): PersistentStore => ({ + get: (k: string) => { + return store[k] + }, + set: (k: string, v: T | undefined) => { + store[k] = v + }, +}) + export const usePersistentState = ( initial: T, persist?: PersistenceOptions diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx index 1fb0c9ae..4d46b12e 100644 --- a/web/pages/home/index.tsx +++ b/web/pages/home/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useEffect, useState } from 'react' +import React, { ReactNode, useEffect } from 'react' import Router from 'next/router' import { AdjustmentsIcon, @@ -63,6 +63,10 @@ import { useAllPosts } from 'web/hooks/use-post' import { useGlobalConfig } from 'web/hooks/use-global-config' import { useAdmin } from 'web/hooks/use-admin' import { GlobalConfig } from 'common/globalConfig' +import { + inMemoryStore, + usePersistentState, +} from 'web/hooks/use-persistent-state' export default function Home() { const user = useUser() @@ -105,7 +109,10 @@ export default function Home() { groups?.map((g) => g.slug) ) - const [pinned, setPinned] = useState(null) + const [pinned, setPinned] = usePersistentState(null, { + store: inMemoryStore(), + key: 'home-pinned', + }) useEffect(() => { const pinnedItems = globalConfig?.pinnedItems @@ -139,7 +146,7 @@ export default function Home() { } } getPinned() - }, [globalConfig]) + }, [globalConfig, setPinned]) const isLoading = !user ||