Fixed James nits

web/components/groups/group-about-post.tsx

@@ -11,15 +11,16 @@ import { DocumentRemoveIcon } from '@heroicons/react/solid'
 import { createPost } from 'web/lib/firebase/api'
 import { Post } from 'common/post'
 import { deletePost, updatePost } from 'web/lib/firebase/posts'
-import { useRouter } from 'next/router'
 import { useState } from 'react'
+import { usePost } from 'web/hooks/use-post'
 
 export function GroupAboutPost(props: {
   group: Group
   isCreator: boolean
   post: Post
 }) {
-  const { group, isCreator, post } = props
+  const { group, isCreator } = props
+  const post = usePost(group.aboutPostId) ?? props.post
   const isAdmin = useAdmin()
 
   if (group.aboutPostId == null && !isCreator) {
@@ -41,7 +42,6 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post }) {
   const { group, post } = props
   const [editing, setEditing] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const router = useRouter()
 
   const { editor, upload } = useTextEditor({
     defaultValue: post.content,
@@ -68,13 +68,11 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post }) {
         content: newPost.content,
       })
     }
-    await router.replace(router.asPath)
   }
 
   async function deleteGroupAboutPost() {
     await deletePost(post)
     await deleteFieldFromGroup(group, 'aboutPostId')
-    await router.replace(router.asPath)
   }
 
   return editing ? (

web/hooks/use-post.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import { Post } from 'common/post'
+import { listenForPost } from 'web/lib/firebase/posts'
+
+export const usePost = (postId: string | undefined) => {
+  const [post, setPost] = useState<Post | null | undefined>()
+
+  useEffect(() => {
+    if (postId) return listenForPost(postId, setPost)
+  }, [postId])
+
+  return post
+}

web/lib/firebase/posts.ts

@@ -7,7 +7,7 @@ import {
   where,
 } from 'firebase/firestore'
 import { Post } from 'common/post'
-import { coll, getValue } from './utils'
+import { coll, getValue, listenForValue } from './utils'
 
 export const posts = coll<Post>('posts')
 
@@ -32,3 +32,10 @@ export async function getPostBySlug(slug: string) {
   const docs = (await getDocs(q)).docs
   return docs.length === 0 ? null : docs[0].data()
 }
+
+export function listenForPost(
+  postId: string,
+  setPost: (post: Post | null) => void
+) {
+  return listenForValue(doc(posts, postId), setPost)
+}

web/pages/group/[...slugs]/index.tsx

@@ -49,6 +49,7 @@ import { GroupAboutPost } from 'web/components/groups/group-about-post'
 import { getPost } from 'web/lib/firebase/posts'
 import { Post } from 'common/post'
 import { Spacer } from 'web/components/layout/spacer'
+import { usePost } from 'web/hooks/use-post'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -147,7 +148,6 @@ export default function GroupPage(props: {
     topTraders,
     creatorScores,
     topCreators,
-    aboutPost,
   } = props
 
   const router = useRouter()
@@ -155,6 +155,7 @@ export default function GroupPage(props: {
   const page = slugs?.[1] as typeof groupSubpages[number]
 
   const group = useGroup(props.group?.id) ?? props.group
+  const aboutPost = usePost(props.aboutPost?.id) ?? props.aboutPost
 
   const user = useUser()