Listen for date doc changes

web/hooks/use-post.ts

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

web/lib/firebase/posts.ts

@@ -7,7 +7,13 @@ import {
   where,
 } from 'firebase/firestore'
 import { DateDoc, Post } from 'common/post'
-import { coll, getValue, getValues, listenForValue } from './utils'
+import {
+  coll,
+  getValue,
+  getValues,
+  listenForValue,
+  listenForValues,
+} from './utils'
 import { getUserByUsername } from './users'
 
 export const posts = coll<Post>('posts')
@@ -51,6 +57,11 @@ export async function getDateDocs() {
   return getValues<DateDoc>(q)
 }
 
+export function listenForDateDocs(setDateDocs: (dateDocs: DateDoc[]) => void) {
+  const q = query(posts, where('type', '==', 'date-doc'))
+  return listenForValues<DateDoc>(q, setDateDocs)
+}
+
 export async function getDateDoc(username: string) {
   const user = await getUserByUsername(username)
   if (!user) return null

web/pages/date-docs/index.tsx

@@ -13,6 +13,7 @@ import { SiteLink } from 'web/components/site-link'
 import { getUser, User } from 'web/lib/firebase/users'
 import { DateDocPost } from './[username]'
 import { NoSEO } from 'web/components/NoSEO'
+import { useDateDocs } from 'web/hooks/use-post'
 
 export async function getStaticProps() {
   const dateDocs = await getDateDocs()
@@ -34,9 +35,10 @@ export default function DatePage(props: {
   dateDocs: DateDoc[]
   docCreators: User[]
 }) {
-  const { dateDocs, docCreators } = props
+  const { docCreators } = props
   const user = useUser()
 
+  const dateDocs = useDateDocs() ?? props.dateDocs
   const hasDoc = dateDocs.some((d) => d.creatorId === user?.id)
 
   return (