add reply things (codesandbox#3637)

* add reply things

* fix click

* make textarea look okay?

* good textarea

Author: SaraVieira

packages/app/src/app/overmind/effects/fakeGql/comments/mutations.ts

@@ -97,6 +97,8 @@ export const reply: Query<any, any> = gql`
     ) {
       id
       replies {
+        insertedAt
+        updatedAt
         id
         content
         author {
@@ -117,6 +119,8 @@ export const deleteReply: Query<
     deleteReply(replyId: $replyId, commentId: $commentId) {
       id
       replies {
+        insertedAt
+        updatedAt
         id
         content
         author {
@@ -137,6 +141,8 @@ export const updateReply: Query<
     updateReply(replyId: $replyId, commentId: $commentId, comment: $comment) {
       id
       replies {
+        insertedAt
+        updatedAt
         id
         content
         author {

packages/app/src/app/overmind/effects/fakeGql/comments/queries.ts

@@ -23,9 +23,12 @@ export const allComments: Query<CommentsResponse, CommentsVariables> = gql`
         }
       }
       replies {
+        insertedAt
+        updatedAt
         id
         content
         author {
+          id
           avatarUrl
           username
         }
@@ -54,9 +57,12 @@ export const comment: Query<CommentResponse, CommentVariables> = gql`
         id
         content
         author {
+          id
           avatarUrl
           username
         }
+        insertedAt
+        updatedAt
       }
       insertedAt
       updatedAt

packages/app/src/app/overmind/effects/fakeGql/comments/types.ts

@@ -4,6 +4,14 @@ export type Message = {
   author?: Author;
 };
 
+export type Reply = {
+  id: string;
+  content?: string;
+  author?: Author;
+  insertedAt?: string;
+  updatedAt?: string;
+};
+
 export type Author = {
   id: string;
   avatarUrl: string;
@@ -14,7 +22,7 @@ export type Comment = {
   id: string;
   isResolved: boolean;
   originalMessage: Message;
-  replies: Message[];
+  replies: Reply[];
   insertedAt: string;
   updatedAt?: string;
   metadata?: string;
@@ -29,7 +37,7 @@ export type CommentsResponse = {
     {
       id: string;
       isResolved: boolean;
-      replies: Pick<Message, 'id'>[];
+      replies: Pick<Reply, 'id'>[];
       originalMessage: Message;
       insertedAt: string;
       updatedAt: string;
@@ -49,7 +57,7 @@ export type AddCommentResponse = {
   addComment: {
     id: string;
     isResolved: boolean;
-    replies: Pick<Message, 'id'>[];
+    replies: Pick<Reply, 'id'>[];
     originalMessage: Message;
     insertedAt: string;
     updatedAt: string;
@@ -98,7 +106,7 @@ export type CommentResponse = {
       id: string;
       content: string;
     };
-    replies: Message[];
+    replies: Reply[];
     insertedAt: string;
     updatedAt: string;
     metadata: string;
@@ -110,7 +118,7 @@ export type DeleteReplyVariables = { replyId: string; commentId: string };
 export type DeleteReplyResponse = {
   deleteReply: {
     id: string;
-    replies: Message[];
+    replies: Reply[];
   };
 };
 
@@ -123,6 +131,6 @@ export type UpdateReplyVariables = {
 export type UpdateReplyResponse = {
   updateReply: {
     id: string;
-    replies: Message[];
+    replies: Reply[];
   };
 };

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -1488,13 +1488,22 @@ export const updateComment: AsyncAction<{
   const sandboxId = state.editor.currentSandbox.id;
   const isResolved = state.editor.comments[sandboxId][id].isResolved;
   const comment = state.editor.comments[sandboxId][id].originalMessage.content;
+  const updateIsCurrent =
+    state.editor.comments[sandboxId][id].id === state.editor.currentComment.id;
 
   if ('isResolved' in data) {
     state.editor.comments[sandboxId][id].isResolved = data.isResolved;
+    if (updateIsCurrent) {
+      state.editor.currentComment.isResolved = data.isResolved;
+    }
   }
 
   if ('comment' in data) {
     state.editor.comments[sandboxId][id].originalMessage.content = data.comment;
+
+    if (updateIsCurrent) {
+      state.editor.currentComment.originalMessage.content = data.comment;
+    }
   }
 
   try {
@@ -1508,6 +1517,10 @@ export const updateComment: AsyncAction<{
     );
     state.editor.comments[sandboxId][id].isResolved = isResolved;
     state.editor.comments[sandboxId][id].originalMessage.content = comment;
+    if (updateIsCurrent) {
+      state.editor.currentComment.id = id;
+      state.editor.currentComment.originalMessage.content = comment;
+    }
   }
 };
 
@@ -1635,6 +1648,7 @@ export const addReply: AsyncAction<string> = async (
     // sorry
     // @ts-ignore
     replies: state.editor.currentComment.replies.concat({
+      insertedAt: new Date(),
       id: fakeId,
       content: comment,
       author: {

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx

@@ -31,7 +31,6 @@ export const Comment = React.memo(({ comment }: any) => {
 
   return (
     <ListAction
-      onClick={() => actions.editor.selectComment(comment.id)}
       key={comment.id}
       paddingTop={5}
       css={css({
@@ -44,7 +43,11 @@ export const Comment = React.memo(({ comment }: any) => {
       })}
     >
       <Stack align="flex-start" justify="space-between" marginBottom={4}>
-        <Stack gap={2} align="center">
+        <Stack
+          gap={2}
+          align="center"
+          onClick={() => actions.editor.selectComment(comment.id)}
+        >
           <Avatar user={comment.originalMessage.author} />
           <Stack direction="vertical" justify="center">
             <Link
@@ -93,6 +96,7 @@ export const Comment = React.memo(({ comment }: any) => {
         </Stack>
       </Stack>
       <Element
+        onClick={() => actions.editor.selectComment(comment.id)}
         as="p"
         marginY={0}
         marginRight={2 /** Adjust for the missing margin in ListAction */}

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.js

@@ -42,6 +42,9 @@ export const Comment = ({ source }) => {
           color: 'mutedForeground',
           content: "counter(counter) '. '",
         },
+        p: {
+          margin: 0,
+        },
         li: {
           listStyle: 'none',
         },

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Comment.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { formatDistance } from 'date-fns';
+import css from '@styled-system/css';
+import {
+  Element,
+  Stack,
+  Avatar,
+  Text,
+  Link,
+  Menu,
+} from '@codesandbox/components';
+import { useOvermind } from 'app/overmind';
+import { Comment } from './Comment';
+
+type ReplyProps = {
+  id: string;
+  author?: any;
+  insertedAt?: string;
+  commentId: string;
+  content?: string;
+};
+
+export const Reply = ({
+  id,
+  author,
+  insertedAt,
+  commentId,
+  content,
+}: ReplyProps) => {
+  const { state, actions } = useOvermind();
+  return (
+    <>
+      <Element
+        key={id}
+        paddingX={4}
+        paddingTop={6}
+        css={css({
+          borderTop: '1px solid',
+          borderColor: 'sideBar.border',
+        })}
+      >
+        <Stack align="flex-start" justify="space-between" marginBottom={4}>
+          <Stack gap={2} align="center">
+            <Avatar user={author} />
+            <Stack direction="vertical" justify="center">
+              <Link
+                href={`/u/${author.username}`}
+                variant="body"
+                css={{ fontWeight: 'bold', display: 'block' }}
+              >
+                {author.username}
+              </Link>
+              <Text size={12} variant="muted">
+                {formatDistance(new Date(insertedAt), new Date(), {
+                  addSuffix: true,
+                })}
+              </Text>
+            </Stack>
+          </Stack>
+          {state.user.id === author.id && (
+            <Stack align="center">
+              <Menu>
+                <Menu.IconButton name="more" title="Reply actions" size={3} />
+                <Menu.List>
+                  <Menu.Item
+                    onSelect={() =>
+                      actions.editor.deleteReply({
+                        replyId: id,
+                        commentId,
+                      })
+                    }
+                  >
+                    Delete
+                  </Menu.Item>
+                  <Menu.Item>Edit</Menu.Item>
+                </Menu.List>
+              </Menu>
+            </Stack>
+          )}
+        </Stack>
+      </Element>
+      <Comment source={content} />
+    </>
+  );
+};