use text area for comments

Author: Roshan Jossy

src/components/Container.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from 'react'
 
-export default function Container ({children}: any) {
-    return (
-        <div className="p-16">
-            {children}
-        </div>
-    )
-}
+type ContainerProps = {
+  children: ReactNode
+}
+
+export default function Container({ children }: ContainerProps) {
+  return <div className="p-16">{children}</div>
+}

src/components/ExpandingTextarea.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+const MIN_TEXTAREA_HEIGHT = 32
+
+type ExpandingTextareaProps = {
+  value: string
+  setValue: (value: string) => void
+  className?: string
+  placeholder?: string
+}
+
+export default function ExpandingTextarea({
+  value,
+  setValue,
+  className,
+  placeholder,
+}: ExpandingTextareaProps) {
+  const textareaRef = React.useRef<null | HTMLTextAreaElement>(null)
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+    setValue(event.target.value)
+
+  React.useLayoutEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'inherit'
+      // Set height
+      textareaRef.current.style.height = `${Math.max(
+        textareaRef.current.scrollHeight,
+        MIN_TEXTAREA_HEIGHT
+      )}px`
+    }
+    // Reset height - important to shrink on delete
+  }, [value])
+
+  return (
+    <textarea
+      className={className}
+      onChange={onChange}
+      placeholder={placeholder}
+      ref={textareaRef}
+      style={{
+        minHeight: MIN_TEXTAREA_HEIGHT,
+        resize: 'none',
+      }}
+      value={value}
+    />
+  )
+}

src/components/comment/Comments.tsx

@@ -0,0 +1,51 @@
+import { graphql, usePaginationFragment } from 'react-relay'
+import NewComment from './NewComment'
+
+const Comments = ({ story }: any) => {
+  const { data, loadNext, hasNext, refetch } = usePaginationFragment(
+    graphql`
+      fragment Comments_story on Story
+      @refetchable(queryName: "Comments_storyQuery")
+      @argumentDefinitions(
+        count: { type: "Int", defaultValue: 20 }
+        cursor: { type: "String" }
+      ) {
+        comments(first: $count, after: $cursor)
+          @connection(key: "Comments_story__comments") {
+          edges {
+            node {
+              id
+              contentJson
+            }
+          }
+        }
+      }
+    `,
+    story
+  )
+
+  if (!data || !data.comments) {
+    return <></>
+  }
+
+  return (
+    <div className="space-y-4">
+      {data.comments.edges.map((comment: any) => (
+        <div key={comment.id}>{comment.node.contentJson}</div>
+      ))}
+      {hasNext ? (
+        <button
+          className="text-gray-600 dark:text-gray-300"
+          onClick={() => {
+            loadNext(2)
+          }}
+        >
+          Load more
+        </button>
+      ) : null}
+      <NewComment storyId={story.id} refetch={refetch} />
+    </div>
+  )
+}
+
+export default Comments

src/components/comment/NewComment.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { graphql, RefetchFnDynamic, useMutation } from 'react-relay'
+import { Options } from 'react-relay/relay-hooks/useRefetchableFragmentNode'
+import { OperationType } from 'relay-runtime'
+import Button from '../Button'
+import ExpandingTextarea from '../ExpandingTextarea'
+
+type NewCommentProps = {
+  storyId: string
+  refetch: RefetchFnDynamic<OperationType, any, Options>
+}
+
+export default function NewComment({ storyId, refetch }: NewCommentProps) {
+  const [comment, setComment] = useState('')
+
+  const [commitMutation, isMutationInFlight] = useMutation(
+    graphql`
+      mutation NewCommentMutation($input: CommentInput!) {
+        createComment(comment: $input) {
+          id
+        }
+      }
+    `
+  )
+
+  const handleCommentPost = () => {
+    commitMutation({
+      variables: {
+        input: { storyID: storyId, contentJson: comment, abstractContent: '' },
+      },
+      onCompleted: () => {
+        refetch({}, { fetchPolicy: 'network-only' })
+      },
+    })
+  }
+
+  return (
+    <div className="w-full dark:text-gray-300 dark:bg-dark-600 flex flex-col items-end">
+      <div className="textarea-container w-full">
+        <ExpandingTextarea
+          value={comment}
+          setValue={setComment}
+          placeholder="Write a comment..."
+          className="w-full dark:text-gray-300 dark:bg-dark-600 focus-visible:outline-none"
+        />
+      </div>
+      <Button onClick={() => handleCommentPost()}>Post</Button>
+    </div>
+  )
+}

src/components/feed/StoryPreviewFooter.tsx

@@ -41,7 +41,7 @@ export default function StoryPreviewFooter({ story }: StoryPreviewFooterProps) {
         input: { storyID: data.id },
       },
       onCompleted: () => {
-        refetch({})
+        refetch({}, { fetchPolicy: 'network-only' })
       },
     })
   }

src/pages/story/[id].tsx

@@ -2,6 +2,7 @@ import { NextPageContext } from 'next'
 import dynamic from 'next/dynamic'
 import { graphql, usePreloadedQuery } from 'react-relay'
 import { RelayProps, withRelay } from 'relay-nextjs'
+import Comments from '../../components/comment/Comments'
 import Layout from '../../components/Layout'
 import UserDetails from '../../components/UserDetails/UserDetails'
 import { getClientEnvironment } from '../../lib/client_environment'
@@ -20,6 +21,7 @@ const StoryQuery = graphql`
         createdBy {
           ...UserDetails_user
         }
+        ...Comments_story
       }
     }
   }
@@ -42,6 +44,7 @@ const Story = ({
         }
       >
         <Editor body={query?.node?.contentJson} editable={false} />
+        <Comments story={query.node} />
       </Layout>
     </div>
   )