Fix nits

common/globalConfig.ts

@@ -1,3 +1,3 @@
-export type HomeConfig = {
+export type GlobalConfig = {
   pinnedItems: { itemId: string; type: 'post' | 'contract' }[]
 }

firestore.rules

@@ -23,7 +23,7 @@ service cloud.firestore {
       allow read;
     }
 
-    match /homeConfig/homeConfig {
+    match /globalConfig/globalConfig {
       allow read;
       allow update: if isAdmin()
       allow create: if isAdmin()

web/hooks/use-global-config.ts

@@ -0,0 +1,12 @@
+import { GlobalConfig } from 'common/globalConfig'
+import { useEffect, useState } from 'react'
+import { listenForGlobalConfig } from 'web/lib/firebase/globalConfig'
+
+export const useGlobalConfig = () => {
+  const [globalConfig, setGlobalConfig] = useState<GlobalConfig | null>(null)
+
+  useEffect(() => {
+    listenForGlobalConfig(setGlobalConfig)
+  }, [globalConfig])
+  return globalConfig
+}

web/hooks/use-post.ts

@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react'
 import { DateDoc, Post } from 'common/post'
-import { listenForDateDocs, listenForPost } from 'web/lib/firebase/posts'
+import {
+  getAllPosts,
+  listenForDateDocs,
+  listenForPost,
+} from 'web/lib/firebase/posts'
 
 export const usePost = (postId: string | undefined) => {
   const [post, setPost] = useState<Post | null | undefined>()
@@ -38,6 +42,14 @@ export const usePosts = (postIds: string[]) => {
     .sort((a, b) => b.createdTime - a.createdTime)
 }
 
+export const useAllPosts = () => {
+  const [posts, setPosts] = useState<Post[]>([])
+  useEffect(() => {
+    getAllPosts().then(setPosts)
+  }, [])
+  return posts
+}
+
 export const useDateDocs = () => {
   const [dateDocs, setDateDocs] = useState<DateDoc[]>()
 

web/lib/firebase/globalConfig.ts

@@ -0,0 +1,33 @@
+import {
+  CollectionReference,
+  doc,
+  collection,
+  getDoc,
+  updateDoc,
+} from 'firebase/firestore'
+import { db } from 'web/lib/firebase/init'
+import { GlobalConfig } from 'common/globalConfig'
+import { listenForValue } from './utils'
+
+const globalConfigCollection = collection(
+  db,
+  'globalConfig'
+) as CollectionReference<GlobalConfig>
+const globalConfigDoc = doc(globalConfigCollection, 'globalConfig')
+
+export const getGlobalConfig = async () => {
+  return (await getDoc(globalConfigDoc)).data()
+}
+
+export function updateGlobalConfig(
+  globalConfig: GlobalConfig,
+  updates: Partial<GlobalConfig>
+) {
+  return updateDoc(globalConfigDoc, updates)
+}
+
+export function listenForGlobalConfig(
+  setGlobalConfig: (globalConfig: GlobalConfig | null) => void
+) {
+  return listenForValue(globalConfigDoc, setGlobalConfig)
+}

web/lib/firebase/homeConfig.ts

@@ -1,26 +0,0 @@
-import {
-  CollectionReference,
-  doc,
-  collection,
-  getDoc,
-  updateDoc,
-} from 'firebase/firestore'
-import { db } from 'web/lib/firebase/init'
-import { HomeConfig } from 'common/homeConfig'
-
-const homeConfigCollection = collection(
-  db,
-  'homeConfig'
-) as CollectionReference<HomeConfig>
-const homeConfigDoc = doc(homeConfigCollection, 'homeConfig')
-
-export const getHomeConfig = async () => {
-  return (await getDoc(homeConfigDoc)).data()
-}
-
-export function updateHomeConfig(
-  homeConfig: HomeConfig,
-  updates: Partial<HomeConfig>
-) {
-  return updateDoc(homeConfigDoc, updates)
-}

web/pages/home/index.tsx

@@ -53,14 +53,15 @@ import { ProfitBadge } from 'web/components/profit-badge'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { Input } from 'web/components/input'
 import { PinnedItems } from 'web/components/groups/group-overview'
-import { getHomeConfig, updateHomeConfig } from 'web/lib/firebase/homeConfig'
+import { updateGlobalConfig } from 'web/lib/firebase/globalConfig'
-import { HomeConfig } from 'common/homeConfig'
+import { getPost } from 'web/lib/firebase/posts'
-import { getAllPosts, getPost } from 'web/lib/firebase/posts'
 import { PostCard } from 'web/components/post-card'
 import { getContractFromId } from 'web/lib/firebase/contracts'
 import { ContractCard } from 'web/components/contract/contract-card'
 import { Post } from 'common/post'
 import { isAdmin } from 'common/envs/constants'
+import { useAllPosts } from 'web/hooks/use-post'
+import { useGlobalConfig } from 'web/hooks/use-global-config'
 
 export default function Home() {
   const user = useUser()
@@ -174,7 +175,7 @@ const HOME_SECTIONS = [
   { label: 'Daily movers', id: 'daily-movers' },
   { label: 'Trending', id: 'score' },
   { label: 'New', id: 'newest' },
-]
+] as const
 
 export const getHomeItems = (sections: string[]) => {
   // Accommodate old home sections.
@@ -210,12 +211,7 @@ function renderSections(
     score: CPMMBinaryContract[]
   }
 ) {
-  type sectionTypes =
+  type sectionTypes = typeof HOME_SECTIONS[number]['id']
-    | 'daily-movers'
-    | 'daily-trending'
-    | 'newest'
-    | 'score'
-    | 'featured'
 
   return (
     <>
@@ -349,22 +345,16 @@ function SearchSection(props: {
 
 function FeaturedSection() {
   const [pinned, setPinned] = useState<JSX.Element[]>([])
-  const [posts, setPosts] = useState<Post[]>([])
+  const posts = useAllPosts()
-  const [homeConfig, setHomeConfig] = useState<HomeConfig | undefined>(
+  const globalConfig = useGlobalConfig()
-    undefined
-  )
-  useEffect(() => {
-    getHomeConfig().then(setHomeConfig)
-    getAllPosts().then(setPosts)
-  }, [])
 
   useEffect(() => {
-    const pinnedItems = homeConfig?.pinnedItems
+    const pinnedItems = globalConfig?.pinnedItems
 
     async function getPinned() {
       if (pinnedItems == null) {
-        if (homeConfig != null) {
+        if (globalConfig != null) {
-          updateHomeConfig(homeConfig, { pinnedItems: [] })
+          updateGlobalConfig(globalConfig, { pinnedItems: [] })
         }
       } else {
         const itemComponents = await Promise.all(
@@ -390,26 +380,24 @@ function FeaturedSection() {
       }
     }
     getPinned()
-  }, [homeConfig])
+  }, [globalConfig])
 
   async function onSubmit(selectedItems: { itemId: string; type: string }[]) {
-    if (homeConfig == null) return
+    if (globalConfig == null) return
-    await updateHomeConfig(homeConfig, {
+    await updateGlobalConfig(globalConfig, {
       pinnedItems: [
-        ...(homeConfig?.pinnedItems ?? []),
+        ...(globalConfig?.pinnedItems ?? []),
         ...(selectedItems as { itemId: string; type: 'contract' | 'post' }[]),
       ],
     })
-    getHomeConfig().then(setHomeConfig)
   }
 
   function onDeleteClicked(index: number) {
-    if (homeConfig == null) return
+    if (globalConfig == null) return
-    const newPinned = homeConfig.pinnedItems.filter((item) => {
+    const newPinned = globalConfig.pinnedItems.filter((item) => {
-      return item.itemId !== homeConfig.pinnedItems[index].itemId
+      return item.itemId !== globalConfig.pinnedItems[index].itemId
     })
-    updateHomeConfig(homeConfig, { pinnedItems: newPinned })
+    updateGlobalConfig(globalConfig, { pinnedItems: newPinned })
-    getHomeConfig().then(setHomeConfig)
   }
 
   return (