Merge pull request #26 from firstcontributions/improve-comment-styles

Author: Roshanjossey

package.json

@@ -22,6 +22,7 @@
     "@editorjs/table": "^2.0.2",
     "@firstcontributions/editorjs-codeflask": "https://github.com/firstcontributions/editorjs-codeflask",
     "@react-icons/all-files": "^4.1.0",
+    "dayjs": "^1.11.5",
     "form-data": "^4.0.0",
     "formidable": "^2.0.1",
     "install": "^0.13.0",

src/components/comment/Comment.tsx

@@ -0,0 +1,49 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { graphql, useFragment } from 'react-relay'
+
+type CommentProps = {
+  comment: any
+}
+
+const Comment = ({ comment }: CommentProps) => {
+  const data = useFragment(
+    graphql`
+      fragment Comment_node on Comment {
+        abstractContent
+        contentJson
+        createdBy {
+          avatar
+          name
+          handle
+        }
+        id
+        timeCreated
+      }
+    `,
+    comment
+  )
+
+  dayjs.extend(relativeTime)
+
+  return (
+    <div className="flex flex-col p-j ">
+      <div className="flex flex-row">
+        <img
+          className="w-8 h-8 rounded-full"
+          src={data.createdBy.avatar}
+          alt={data.createdBy.name}
+        />
+        <div className="ml-2 flex flex-col">
+          <div className="flex flex-row text-sm">
+            <span className="mr-4">{data.createdBy.handle}</span>
+            <span>{`${dayjs(data.timeCreated).toNow(true)} ago`}</span>
+          </div>
+          <span className="text-l dark:text-gray-300">{data.contentJson}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Comment

src/components/comment/Comments.tsx

@@ -1,7 +1,13 @@
 import { graphql, usePaginationFragment } from 'react-relay'
+import { Comments_story$key } from '../../queries/__generated__/Comments_story.graphql'
 import NewComment from './NewComment'
+import Comment from './Comment'
 
-const Comments = ({ story }: any) => {
+type CommentsProps = {
+  story: Comments_story$key
+}
+
+const Comments = ({ story }: CommentsProps) => {
   const { data, loadNext, hasNext, refetch } = usePaginationFragment(
     graphql`
       fragment Comments_story on Story
@@ -15,7 +21,7 @@ const Comments = ({ story }: any) => {
           edges {
             node {
               id
-              contentJson
+              ...Comment_node
             }
           }
         }
@@ -29,10 +35,12 @@ const Comments = ({ story }: any) => {
   }
 
   return (
-    <div className="space-y-4">
-      {data.comments.edges.map((comment: any) => (
-        <div key={comment.id}>{comment.node.contentJson}</div>
-      ))}
+    <div className="space-y-4 mt-4">
+      <NewComment storyId={story.id} refetch={refetch} />
+      {data.comments.edges.map(
+        (comment: any) =>
+          comment && <Comment comment={comment.node} key={comment.node.id} />
+      )}
       {hasNext ? (
         <button
           className="text-gray-600 dark:text-gray-300"
@@ -43,7 +51,6 @@ const Comments = ({ story }: any) => {
           Load more
         </button>
       ) : null}
-      <NewComment storyId={story.id} refetch={refetch} />
     </div>
   )
 }

src/pages/index.tsx

@@ -40,11 +40,9 @@ const Home = ({
       sidebarContentLeft={leftSidebar}
       sidebarContentRight={<div>Promoted</div>}
     >
-      {query.viewer && (
-        <>
-          <Feed root={query} />
-        </>
-      )}
+      <>
+        <Feed root={query} />
+      </>
     </Layout>
   )
 }