Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add edit to comments #3665

Merged
merged 3 commits into from
Mar 10, 2020
Merged

Add edit to comments #3665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
222aebb
add edit ability
SaraVieira Mar 9, 2020
580ea9a
small ui fies
SaraVieira Mar 9, 2020
c9d741b
fix ts
SaraVieira Mar 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/app/src/app/overmind/effects/fakeGql/comments/mutations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,11 @@ export const updateReply: Query<
UpdateReplyResponse,
UpdateReplyVariables
> = gql`
mutation updateReply($replyId: String!, $commentId: String!) {
mutation updateReply(
$replyId: String!
$commentId: String!
$comment: String!
) {
updateReply(replyId: $replyId, commentId: $commentId, comment: $comment) {
id
replies {
Expand Down
11 changes: 7 additions & 4 deletions packages/app/src/app/overmind/namespaces/editor/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1479,7 +1479,7 @@ export const updateComment: AsyncAction<{
id: string;
data: {
comment?: string;
isResolved: boolean;
isResolved?: boolean;
};
}> = async ({ effects, state }, { id, data }) => {
if (!state.editor.currentSandbox) {
Expand All @@ -1493,7 +1493,7 @@ export const updateComment: AsyncAction<{
currentComment &&
state.editor.comments[sandboxId][id].id === currentComment.id;

if ('isResolved' in data) {
if ('isResolved' in data && data.isResolved) {
state.editor.comments[sandboxId][id].isResolved = data.isResolved;
if (updateIsCurrent && currentComment) {
currentComment.isResolved = data.isResolved;
Expand Down Expand Up @@ -1587,9 +1587,12 @@ export const updateReply: AsyncAction<{
});
} catch (error) {
effects.notificationToast.error(
'Unable to update your comment, please try again'
'Unable to update your reply, please try again'
);
state.editor.comments[sandboxId][commentId] = old;
state.editor.comments[sandboxId][commentId] = {
...old,
replies: old.replies,
};
}
};

Expand Down
2 changes: 1 addition & 1 deletion ...space/screens/Comments/Dialog/Comment.tsx → ...pace/screens/Comments/Dialog/Markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Text, Element, Link } from '@codesandbox/components';
import css from '@styled-system/css';
import { Code } from './Code';

export const Comment = ({ source }) => {
export const Markdown = ({ source }) => {
const { state } = useOvermind();
const privateSandbox =
state.editor.currentSandbox.privacy === 1 ||
Expand Down
54 changes: 49 additions & 5 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import React from 'react';
import React, { useState } from 'react';
import { formatDistance } from 'date-fns';
import css from '@styled-system/css';
import {
Element,
Button,
Stack,
Avatar,
Text,
Link,
Menu,
Textarea,
} from '@codesandbox/components';
import { useOvermind } from 'app/overmind';
import { Comment } from './Comment';
import { Markdown } from './Markdown';

type ReplyProps = {
id: string;
Expand All @@ -28,6 +30,8 @@ export const Reply = ({
content,
}: ReplyProps) => {
const { state, actions } = useOvermind();
const [edit, setEdit] = useState(false);
const [value, setValue] = useState(content);
return (
<>
<Element key={id} marginLeft={4} marginRight={2} paddingTop={6}>
Expand Down Expand Up @@ -65,15 +69,17 @@ export const Reply = ({
>
Delete
</Menu.Item>
<Menu.Item>Edit</Menu.Item>
<Menu.Item onSelect={() => setEdit(true)}>
Edit Reply
</Menu.Item>
</Menu.List>
</Menu>
</Stack>
)}
</Stack>
</Element>
<Element
as="p"
as={edit ? 'div' : 'p'}
marginY={0}
marginX={4}
paddingBottom={6}
Expand All @@ -82,7 +88,45 @@ export const Reply = ({
borderColor: 'sideBar.border',
})}
>
<Comment source={content} />
{!edit ? (
<Markdown source={content} />
) : (
<>
<Element marginBottom={2}>
<Textarea
autosize
value={value}
onChange={e => setValue(e.target.value)}
/>
</Element>
<Element
css={css({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridGap: 2,
})}
>
<Button variant="link" onClick={() => setEdit(false)}>
Cancel
</Button>

<Button
variant="secondary"
disabled={!value}
onClick={async () => {
await actions.editor.updateReply({
replyId: id,
commentId,
comment: value,
});
setEdit(false);
}}
>
Save
</Button>
</Element>
</>
)}
</Element>
</>
);
Expand Down
113 changes: 94 additions & 19 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ import {
Text,
Link,
IconButton,
Button,
Menu,
} from '@codesandbox/components';
import { useOvermind } from 'app/overmind';
import { Comment } from './Comment';
import { Markdown } from './Markdown';
import { Reply } from './Reply';

export const CommentDialog = props =>
Expand All @@ -23,7 +25,10 @@ export const CommentDialog = props =>
export const Dialog = props => {
const { state, actions } = useOvermind();
const [value, setValue] = useState('');

const [edit, setEdit] = useState(false);
const comment = state.editor.currentComment;
const [editValue, setEditValue] = useState(comment.originalMessage.content);
const [position, setPosition] = useState({
x: props.x || 200,
y: props.y || 100,
Expand Down Expand Up @@ -110,26 +115,57 @@ export const Dialog = props => {

{comment && (
<>
<Stack gap={2} align="center" paddingX={4} marginBottom={4}>
<Avatar user={comment.originalMessage.author} />
<Stack direction="vertical" justify="center" gap={1}>
<Link
size={3}
weight="bold"
href={`/u/${comment.originalMessage.author.username}`}
variant="body"
>
{comment.originalMessage.author.username}
</Link>
<Text size={2} variant="muted">
{formatDistance(new Date(comment.insertedAt), new Date(), {
addSuffix: true,
})}
</Text>
<Stack
align="flex-start"
justify="space-between"
marginBottom={4}
marginLeft={4}
marginRight={2}
>
<Stack gap={2} align="center">
<Avatar user={comment.originalMessage.author} />
<Stack direction="vertical" justify="center" gap={1}>
<Link
size={3}
weight="bold"
href={`/u/${comment.originalMessage.author.username}`}
variant="body"
>
{comment.originalMessage.author.username}
</Link>
<Text size={2} variant="muted">
{formatDistance(new Date(comment.insertedAt), new Date(), {
addSuffix: true,
})}
</Text>
</Stack>
</Stack>
{state.user.id === comment.originalMessage.author.id && (
<Stack align="center">
<Menu>
<Menu.IconButton
name="more"
title="Comment actions"
size={3}
/>
<Menu.List>
<Menu.Item
onSelect={() =>
actions.editor.deleteComment({ id: comment.id })
}
>
Delete
</Menu.Item>
<Menu.Item onSelect={() => setEdit(true)}>
Edit Comment
</Menu.Item>
</Menu.List>
</Menu>
</Stack>
)}
</Stack>
<Element
as="p"
as={edit ? 'div' : 'p'}
marginY={0}
marginX={4}
paddingBottom={6}
Expand All @@ -138,7 +174,46 @@ export const Dialog = props => {
borderColor: 'sideBar.border',
})}
>
<Comment source={comment.originalMessage.content} />
{!edit ? (
<Markdown source={comment.originalMessage.content} />
) : (
<>
<Element marginBottom={2}>
<Textarea
autosize
value={editValue}
onChange={e => setEditValue(e.target.value)}
/>
</Element>
<Element
css={css({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridGap: 2,
})}
>
<Button variant="link" onClick={() => setEdit(false)}>
Cancel
</Button>

<Button
disabled={!editValue}
variant="secondary"
onClick={async () => {
await actions.editor.updateComment({
id: comment.id,
data: {
comment: editValue,
},
});
setEdit(false);
}}
>
Save
</Button>
</Element>
</>
)}
</Element>
</>
)}
Expand Down