fix comment delete (codesandbox#3787)

* fix comment delete

* change themes in code

* not allow empty comments

* fix ts

Author: SaraVieira

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

@@ -370,6 +370,8 @@ export const deleteComment: AsyncAction<{
   const comments = state.comments.comments;
   const deletedComment = comments[sandboxId][commentId];
 
+  delete comments[sandboxId][commentId];
+
   try {
     await effects.gql.mutations.deleteComment({
       commentId,

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

@@ -10,10 +10,12 @@ export const AddComment: React.FC = () => {
 
   const onSubmit = e => {
     e.preventDefault();
-    actions.comments.addComment({
-      content: value,
-    });
-    setValue('');
+    if (value) {
+      actions.comments.addComment({
+        content: value,
+      });
+      setValue('');
+    }
   };
 
   // Form elements submit on Enter, except Textarea :)

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

@@ -13,7 +13,7 @@ export const Code = withTheme(({ value, language, theme }) => (
       {...defaultProps}
       code={value}
       language={language || 'js'}
-      theme={theme.vscodeTheme.type === 'dark' ? nightOwlLight : nightOwl}
+      theme={theme.vscodeTheme.type === 'dark' ? nightOwl : nightOwlLight}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <Element

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

@@ -285,6 +285,9 @@ const CommentBody = ({ comment, editing, setEditing }) => {
             <Menu>
               <Menu.IconButton name="more" title="Comment actions" size={12} />
               <Menu.List>
+                <Menu.Item onSelect={() => setEditing(true)}>
+                  Edit Comment
+                </Menu.Item>
                 <Menu.Item
                   onSelect={() =>
                     actions.comments.deleteComment({
@@ -294,9 +297,6 @@ const CommentBody = ({ comment, editing, setEditing }) => {
                 >
                   Delete
                 </Menu.Item>
-                <Menu.Item onSelect={() => setEditing(true)}>
-                  Edit Comment
-                </Menu.Item>
               </Menu.List>
             </Menu>
           </Stack>