replay changes from dialog branch

packages/app/package.json

@@ -178,6 +178,7 @@
     "posthtml": "^0.11.3",
     "posthtml-parser": "^0.4.1",
     "posthtml-render": "^1.1.0",
+    "prism-react-renderer": "^1.0.2",
     "punycode": "^2.1.1",
     "qrcode.react": "^0.8.0",
     "qs": "^6.5.0",
@@ -200,6 +201,7 @@
     "react-inspector": "^2.2.0",
     "react-instantsearch": "^5.7.0",
     "react-loadable": "^3.3.1",
+    "react-markdown": "^4.3.1",
     "react-media": "^1.9.2",
     "react-modal": "^3.6.1",
     "react-motion": "^0.5.0",

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

@@ -51,3 +51,30 @@ export const updateComment: Query<any, any> = gql`
     }
   }
 `;
+
+export const reply: Query<any, any> = gql`
+  mutation replyToComment(
+    $id: String!
+    $comment: String!
+    $username: String!
+    $metadata: String
+  ) {
+    addReply(
+      id: $id
+      comment: $comment
+      username: $username
+      metadata: $metadata
+    ) {
+      id
+      replies {
+        id
+        content
+        author {
+          id
+          avatarUrl
+          username
+        }
+      }
+    }
+  }
+`;

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

@@ -24,6 +24,11 @@ export const allComments: Query<CommentsResponse, CommentsVariables> = gql`
       }
       replies {
         id
+        content
+        author {
+          avatarUrl
+          username
+        }
       }
       insertedAt
       updatedAt

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

@@ -1397,7 +1397,11 @@ export const addComment: AsyncAction<{
   comment: string;
   sandboxId: string;
   username: string;
-}> = async ({ state, effects }, { sandboxId, comment, username }) => {
+  open?: boolean;
+}> = async (
+  { state, effects, actions },
+  { sandboxId, comment, username, open }
+) => {
   if (!state.user) {
     return;
   }
@@ -1432,6 +1436,9 @@ export const addComment: AsyncAction<{
 
     delete state.editor.comments[sandboxId][id];
     state.editor.comments[sandboxId][newComment.id] = newComment;
+    if (open) {
+      actions.editor.getComment({ id: newComment.id, sandboxId });
+    }
   } catch (error) {
     effects.notificationToast.error(
       'Unable to create your comment, please try again'
@@ -1534,3 +1541,54 @@ export const changeInvitationAuthorization: AsyncAction<{
     }
   }
 };
+
+export const addReply: AsyncAction<string> = async (
+  { state, effects },
+  comment
+) => {
+  const id = state.editor.currentCommentId;
+
+  if (
+    !state.editor.currentComment ||
+    !id ||
+    !state.user ||
+    !state.editor.currentSandbox
+  ) {
+    return;
+  }
+  const sandboxId = state.editor.currentSandbox.id;
+  const fakeId = `${comment}-${state.user.username}`;
+  state.editor.comments[sandboxId][id] = {
+    ...state.editor.currentComment,
+    // sorry
+    // @ts-ignore
+    replies: state.editor.currentComment.replies.concat({
+      id: fakeId,
+      content: comment,
+      author: {
+        id: state.user.id,
+        avatarUrl: state.user.avatarUrl,
+        username: state.user.username,
+      },
+    }),
+  };
+
+  try {
+    const { addReply: newReply } = await effects.fakeGql.mutations.reply({
+      id,
+      comment,
+      username: state.user.username,
+    });
+    state.editor.comments[sandboxId][id] = {
+      ...state.editor.comments[sandboxId][id],
+      replies: state.editor.currentComment.replies
+        .filter(a => a.id !== fakeId)
+        .concat(newReply.replies[newReply.replies.length - 1]),
+    };
+  } catch (e) {
+    state.editor.comments[sandboxId][id] = {
+      ...state.editor.comments[sandboxId][id],
+      replies: state.editor.currentComment.replies.filter(a => a.id !== fakeId),
+    };
+  }
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Element } from '@codesandbox/components';
+import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
+
+export const Code = props => (
+  <>
+    <Highlight
+      {...defaultProps}
+      code={props.value}
+      language={props.language || 'js'}
+      theme={nightOwlLight}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <Element
+          as="pre"
+          paddingX={4}
+          paddingY={2}
+          marginY={2}
+          className={className}
+          style={style}
+        >
+          {tokens.map((line, i) => (
+            <Element {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <Element as="span" {...getTokenProps({ token, key })} />
+              ))}
+            </Element>
+          ))}
+        </Element>
+      )}
+    </Highlight>
+  </>
+);

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Text, Element } from '@codesandbox/components';
+import { Code } from './Code';
+
+export const Comment = ({ source }) => (
+  <Element paddingX={4} paddingBottom={6}>
+    <ReactMarkdown
+      source={source}
+      renderers={{
+        text: ({ children }) => (
+          <Text variant="muted" size={13}>
+            {children}
+          </Text>
+        ),
+        heading: ({ children }) => (
+          <Text variant="muted" size={13}>
+            {children}
+          </Text>
+        ),
+        code: props => <Code {...props} />,
+      }}
+    />
+  </Element>
+);

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

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import css from '@styled-system/css';
+import Draggable from 'react-draggable';
+import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
+
+import {
+  Element,
+  Stack,
+  Avatar,
+  Textarea,
+  Text,
+  IconButton,
+} from '@codesandbox/components';
+import { useOvermind } from 'app/overmind';
+import { Comment } from './Comment';
+
+// // eslint-disable-next-line no-var
+// var markdown = `
+// I am a comment
+
+// Here's that code block:
+
+// \`\`\`js
+// const total = [1, 2, 3, 4, 5]
+//   .map(num => num * 3)
+//   .filter(num => num < 9)
+//   .reduce((sum, num) => sum += num, 0)
+
+// \`\`\`
+
+// Neat, eh?`;
+
+// const defaultComment = {
+//   id: '5e59204cc277a40fef1e3916',
+//   isResolved: false,
+//   originalMessage: {
+//     id: 'gier2bk769d03r',
+//     content: markdown,
+//     author: {
+//       id: '740dca51-993d-4b0e-b8cb-0e46acada86b',
+//       avatarUrl: 'https://avatars0.githubusercontent.com/u/1863771?v=4',
+//       username: 'siddharthkp',
+//     },
+//   },
+//   replies: [
+//     {
+//       id: 'a\n-SaraVieira',
+//       content: 'A reply',
+//       author: {
+//         avatarUrl: 'https://avatars0.githubusercontent.com/u/1051509?v=4',
+//         badges: [{ id: 'patron_2', name: 'Patron II', visible: true }],
+//         curatorAt: '2018-11-25T18:51:34Z',
+//         email: 'hey@iamsaravieira.com',
+//         experiments: { containerLsp: null },
+//         id: '8d35d7c1-eecb-4aad-87b0-c22d30d12081',
+//         integrations: {
+//           github: null,
+//           zeit: { token: 'pqshnGwa4t3y7RxMzfHnoSW1' },
+//         },
+//         name: 'Sara Vieira',
+//         sendSurvey: false,
+//         subscription: {
+//           amount: 10,
+//           cancelAtPeriodEnd: false,
+//           duration: 'monthly',
+//           plan: 'patron',
+//           since: '2018-03-01T16:00:18Z',
+//         },
+//         username: 'SaraVieira',
+//       },
+//     },
+//   ],
+//   insertedAt: '2020-02-28T14:14:36.859Z',
+//   updatedAt: '2020-02-28T14:14:36.859Z',
+// };
+export const CommentDialog = props =>
+  ReactDOM.createPortal(<Dialog {...props} />, document.body);
+
+export const Dialog = props => {
+  const { state, actions } = useOvermind();
+  const [value, setValue] = useState('');
+  const comment = state.editor.currentComment;
+  const [position, setPosition] = React.useState({
+    x: 200,
+    y: 100,
+  });
+
+  const closeDialog = () => actions.editor.selectComment(null);
+  const onSubmit = () => {
+    setValue('');
+    if (comment) {
+      actions.editor.addReply(value);
+    } else {
+      actions.editor.addComment({
+        comment: value,
+        sandboxId: state.editor.currentSandbox.id,
+        username: state.user.username,
+        open: true,
+      });
+    }
+  };
+
+  const onDragStop = (_, data) => {
+    setPosition({
+      x: data.x,
+      y: data.y,
+    });
+  };
+
+  return (
+    <Draggable handle=".handle" position={position} onStop={onDragStop}>
+      <Element
+        css={css({
+          position: 'absolute',
+          zIndex: 2,
+          backgroundColor: 'dialog.background',
+          color: 'dialog.foreground',
+          border: '1px solid',
+          borderColor: 'dialog.border',
+          borderRadius: 4,
+          width: 420,
+          height: 'auto',
+          paddingBottom: 4,
+        })}
+      >
+        <Stack direction="vertical">
+          <Stack
+            className="handle"
+            justify="space-between"
+            padding={2}
+            paddingLeft={4}
+            css={{ cursor: 'move' }}
+            marginBottom={4}
+          >
+            <Stack align="center" gap={2}>
+              <Avatar user={comment.originalMessage.author} />
+              <Text size={3}>{comment.originalMessage.author.username}</Text>
+            </Stack>
+
+            <Stack align="center">
+              <IconButton
+                name="cross"
+                size={3}
+                title="Close comment dialog"
+                onClick={closeDialog}
+              />
+            </Stack>
+          </Stack>
+          {comment && (
+            <>
+              <Comment source={comment.originalMessage.content} />
+              {comment.replies.map(c => (
+                <>
+                  <Element
+                    paddingX={4}
+                    paddingTop={6}
+                    css={css({
+                      borderTop: '1px solid',
+                      borderColor: 'sideBar.border',
+                    })}
+                  >
+                    <Stack align="center" gap={2}>
+                      <Avatar user={c.author} />
+                      <Text size={3}>{c.author.username}</Text>
+                    </Stack>
+                  </Element>
+                  <Comment source={c.content} />
+                </>
+              ))}
+              <Element
+                paddingX={4}
+                css={css({
+                  borderTop: '1px solid',
+                  borderColor: 'sideBar.border',
+                })}
+              >
+                <Textarea
+                  autosize
+                  css={css({ minHeight: 8, overflow: 'hidden' })}
+                  value={value}
+                  onChange={e => setValue(e.target.value)}
+                  placeholder={comment ? 'Reply' : 'Write a comment...'}
+                  onKeyDown={event => {
+                    if (event.keyCode === ENTER && !event.shiftKey) onSubmit();
+                  }}
+                />
+              </Element>
+            </>
+          )}
+        </Stack>
+      </Element>
+    </Draggable>
+  );
+};