Use in-memory store for home featured section data

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<GlobalConfig | null>(null)
+  const [globalConfig, setGlobalConfig] =
+    usePersistentState<GlobalConfig | null>(null, {
+      store: inMemoryStore(),
+      key: 'globalConfig',
+    })
 
   useEffect(() => {
     return listenForGlobalConfig(setGlobalConfig)
-  }, [])
+  }, [setGlobalConfig])
   return globalConfig
 }

web/hooks/use-persistent-state.ts

@@ -89,6 +89,17 @@ export const historyStore = <T>(prefix = '__manifold'): PersistentStore<T> => ({
   },
 })
 
+const store: Record<string, any> = {}
+
+export const inMemoryStore = <T>(): PersistentStore<T> => ({
+  get: (k: string) => {
+    return store[k]
+  },
+  set: (k: string, v: T | undefined) => {
+    store[k] = v
+  },
+})
+
 export const usePersistentState = <T>(
   initial: T,
   persist?: PersistenceOptions<T>

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<JSX.Element[] | null>(null)
+  const [pinned, setPinned] = usePersistentState<JSX.Element[] | null>(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 ||