most stuff works

api/resolvers/item.js

@@ -26,50 +26,9 @@ const createItem = async (parent, { title, text, url, parentId }, { me, models }
 
   const item = await models.item.create({ data })
   item.comments = []
-  console.log(item)
   return item
 }
 
-// function nestComments (flat, parentId) {
-//   const result = []
-//   for (let i = 0; i < flat.length; i++) {
-//     if (Number(flat[i].parentId) === Number(parentId)) {
-//       result.push(flat[i])
-//     } else if (result.length > 0) {
-//       // this comment is a child of the last one pushed
-//       const last = result[result.length - 1]
-//       last.comments = nestComments(flat.slice(i), last.id)
-
-//       // we consumed this many comments
-//       i += last.comments.length
-//     }
-//   }
-
-//   return result
-// }
-
-// function nestComments (flat, parentId) {
-//   const result = []
-//   let last
-//   for (let i = 0; i < flat.length; i++) {
-//     // initialize all comments
-//     if (!flat[i].comments) flat[i].comments = []
-
-//     if (Number(flat[i].parentId) === Number(parentId)) {
-//       result.push(flat[i])
-//       last = flat[i]
-//     } else if (last && Number(last.id) === flat[i].parentId) {
-//       const nested = nestComments(flat.slice(i), last.id)
-//       if (nested.length > 0) {
-//         last.comments.push(...nested)
-//         i += nested.length - 1
-//       }
-//     }
-//   }
-
-//   return result
-// }
-
 function nestComments (flat, parentId) {
   const result = []
   let added = 0

components/comment.js

@@ -6,26 +6,7 @@ import Link from 'next/link'
 import Reply from './reply'
 import { useState } from 'react'
 import { gql, useQuery } from '@apollo/client'
-
-function timeSince (timeStamp) {
-  const now = new Date()
-  const secondsPast = (now.getTime() - timeStamp) / 1000
-  if (secondsPast < 60) {
-    return parseInt(secondsPast) + 's'
-  }
-  if (secondsPast < 3600) {
-    return parseInt(secondsPast / 60) + 'm'
-  }
-  if (secondsPast <= 86400) {
-    return parseInt(secondsPast / 3600) + 'h'
-  }
-  if (secondsPast > 86400) {
-    const day = timeStamp.getDate()
-    const month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(' ', '')
-    const year = timeStamp.getFullYear() === now.getFullYear() ? '' : ' ' + timeStamp.getFullYear()
-    return day + ' ' + month + year
-  }
-}
+import { timeSince } from '../lib/time'
 
 function Parent ({ item }) {
   const { data } = useQuery(
@@ -61,7 +42,7 @@ function Parent ({ item }) {
   )
 }
 
-export default function Comment ({ item, children, replyOpen, includeParent }) {
+export default function Comment ({ item, children, replyOpen, includeParent, cacheId }) {
   const [reply, setReply] = useState(replyOpen)
 
   return (
@@ -95,7 +76,7 @@ export default function Comment ({ item, children, replyOpen, includeParent }) {
         >
           {reply ? 'cancel' : 'reply'}
         </div>
-        {reply && <Reply item={item} />}
+        {reply && <Reply parentId={item.id} onSuccess={() => setReply(replyOpen || false)} cacheId={cacheId} />}
         {children}
         <div className={styles.comments}>
           {item.comments

components/item.js

@@ -1,26 +1,7 @@
 import Link from 'next/link'
 import UpVote from '../svgs/lightning-arrow.svg'
 import styles from './item.module.css'
-
-function timeSince (timeStamp) {
-  const now = new Date()
-  const secondsPast = (now.getTime() - timeStamp) / 1000
-  if (secondsPast < 60) {
-    return parseInt(secondsPast) + 's'
-  }
-  if (secondsPast < 3600) {
-    return parseInt(secondsPast / 60) + 'm'
-  }
-  if (secondsPast <= 86400) {
-    return parseInt(secondsPast / 3600) + 'h'
-  }
-  if (secondsPast > 86400) {
-    const day = timeStamp.getDate()
-    const month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(' ', '')
-    const year = timeStamp.getFullYear() === now.getFullYear() ? '' : ' ' + timeStamp.getFullYear()
-    return day + ' ' + month + year
-  }
-}
+import { timeSince } from '../lib/time'
 
 export default function Item ({ item, children }) {
   return (

components/reply.js

@@ -8,8 +8,7 @@ export const CommentSchema = Yup.object({
   text: Yup.string().required('required').trim()
 })
 
-export default function Reply ({ item }) {
-  const parentId = item.id
+export default function Reply ({ parentId, onSuccess, cacheId }) {
   const [createComment] = useMutation(
     gql`
       ${COMMENTS}
@@ -23,7 +22,7 @@ export default function Reply ({ item }) {
       }`, {
       update (cache, { data: { createComment } }) {
         cache.modify({
-          id: `Item:${item.id}`,
+          id: cacheId || `Item:${parentId}`,
           fields: {
             comments (existingCommentRefs = [], { readField }) {
               const newCommentRef = cache.writeFragment({
@@ -46,17 +45,15 @@ export default function Reply ({ item }) {
           text: ''
         }}
         schema={CommentSchema}
-        onSubmit={async (values) => {
-          const {
-            data: {
-              createComment: { id }
-            },
-            error
-          } = await createComment({ variables: { ...values, parentId } })
+        onSubmit={async (values, { resetForm }) => {
+          const { error } = await createComment({ variables: { ...values, parentId } })
           if (error) {
             throw new Error({ message: error.toString() })
           }
-          console.log('success!', id)
+          resetForm({ text: '' })
+          if (onSuccess) {
+            onSuccess()
+          }
         }}
       >
         <Input

lib/time.js

@@ -0,0 +1,21 @@
+export function timeSince (timeStamp) {
+  const now = new Date()
+  const secondsPast = (now.getTime() - timeStamp) / 1000
+  if (secondsPast < 60) {
+    return parseInt(secondsPast) + 's'
+  }
+  if (secondsPast < 3600) {
+    return parseInt(secondsPast / 60) + 'm'
+  }
+  if (secondsPast <= 86400) {
+    return parseInt(secondsPast / 3600) + 'h'
+  }
+  if (secondsPast > 86400) {
+    const day = timeStamp.getDate()
+    const month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(' ', '')
+    const year = timeStamp.getFullYear() === now.getFullYear() ? '' : ' ' + timeStamp.getFullYear()
+    return day + ' ' + month + year
+  }
+
+  return 'now'
+}

pages/items/[id].js

@@ -44,12 +44,12 @@ export default function FullItem ({ item }) {
   return (
     <Layout>
       {item.parentId
-        ? <Comment item={item} replyOpen includeParent />
+        ? <Comment item={item} replyOpen includeParent cacheId='ROOT_QUERY' />
         : (
           <>
             <Item item={item}>
               {item.text && <Text>{item.text}</Text>}
-              <Reply item={item} />
+              <Reply parentId={item.id} cacheId='ROOT_QUERY' />
             </Item>
           </>
           )}