diff --git a/client/src/components/layout/CommentList/comment-list.scss b/client/src/components/layout/CommentList/comment-list.scss
index 5769b95ec250f7312262a72dd0a3b3fd1eb7dcf8..c834c9b2a156fb6d4eee96dbbe9429b67ccda450 100644
--- a/client/src/components/layout/CommentList/comment-list.scss
+++ b/client/src/components/layout/CommentList/comment-list.scss
@@ -13,7 +13,6 @@
position: relative;
.head {
- padding: 0 20px;
align-items: center;
.name {
@@ -21,36 +20,11 @@
}
}
- textarea {
- background: s.$light;
- border: none;
- border-radius: 25px;
- width: 100%;
- margin: 0;
- height: 100%;
- font-size: 14px;
- padding: 25px;
- display: flex;
- resize: vertical;
- outline: none;
- min-height: 150px;
- }
-
button {
position: absolute;
bottom: 0;
right: 20px;
transform: translateY(50%);
- padding: 8px 20px;
- background: s.$linear-gradient;
- color: s.$white;
- font-weight: s.$weight-regular;
- border-radius: 10px;
-
- &:disabled {
- opacity: 0;
- pointer-events: none;
- }
}
}
}
diff --git a/client/src/components/layout/CommentList/index.tsx b/client/src/components/layout/CommentList/index.tsx
index 344ce0da1185b63a363eedc114219de08f7bcef0..e8d1faeadc2fa5950abf765d9d7ed66c9a0e435d 100644
--- a/client/src/components/layout/CommentList/index.tsx
+++ b/client/src/components/layout/CommentList/index.tsx
@@ -35,7 +35,7 @@ export default function CommentList({ comments, taskId }: Props) {
.catch(() => setError(true))
}
}, [comment, taskId]);
-
+
useEffect(() => {
getCurrentUser()
.then(setUser)
diff --git a/client/src/components/ui/Comment/comment.scss b/client/src/components/ui/Comment/comment.scss
index c752e035a6b17bd6b958347201fc17199f167afd..42845ac8c56b20cfdb9a5b0476183a8af33e7d9b 100644
--- a/client/src/components/ui/Comment/comment.scss
+++ b/client/src/components/ui/Comment/comment.scss
@@ -2,13 +2,14 @@
@use 'styles/settings.scss' as s;
.comment-container {
- padding: 0 20px;
+ position: relative;
background: rgba(s.$white, 0.95);
box-shadow: 0 0 25px rgba(s.$black, 0.1);
border-radius: 25px;
margin-top: 10px;
.head {
+ margin: 0 20px;
display: flex;
align-items: flex-end;
transform: translateY(-10px);
@@ -38,8 +39,70 @@
}
.comment {
+ margin: 0 20px;
font-size: 14px;
padding: 20px 0;
}
+
+ .settings {
+ user-select: none;
+ position: absolute;
+ right: -8px;
+ top: -8px;
+ height: 35px;
+ width: 35px;
+ background: s.$primary;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 28px;
+ color: s.$white;
+ border-radius: 50%;
+ cursor: pointer;
+
+ .icon {
+ margin-right: 0;
+ }
+ }
+
+ textarea {
+ transition: none;
+ background: s.$light;
+ border: none;
+ border-radius: 25px;
+ width: 100%;
+ margin: 0;
+ height: 100%;
+ font-size: 14px;
+ padding: 25px;
+ display: flex;
+ resize: vertical;
+ outline: none;
+ min-height: 150px;
+ }
+
+ .buttons {
+ position: absolute;
+ bottom: 0;
+ right: 20px;
+ transform: translateY(50%);
+
+ button:first-child {
+ margin-right: 10px;
+ }
+ }
+
+ button {
+ padding: 8px 20px;
+ background: s.$linear-gradient;
+ color: s.$white;
+ font-weight: s.$weight-regular;
+ border-radius: 10px;
+
+ &:disabled {
+ opacity: 0;
+ pointer-events: none;
+ }
+ }
}
diff --git a/client/src/components/ui/Comment/index.tsx b/client/src/components/ui/Comment/index.tsx
index 2b928695335f0e47953369f15fb2b6887e1341f1..14e34c92081b87b8845b579e09bd73756479af40 100644
--- a/client/src/components/ui/Comment/index.tsx
+++ b/client/src/components/ui/Comment/index.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import { ChangeEvent, FormEvent, useCallback, useEffect, useState } from 'react';
-import { formatRelativeTime } from 'timely';
import { getUser, User } from 'adapters/user';
-import { Comment as IComment } from 'adapters/comment';
+import { getLoggedInUser } from 'adapters/auth';
+import { currentTime, formatRelativeTime } from 'timely';
+import { Comment as IComment, updateComment } from 'adapters/comment';
import Avatar from 'components/ui/Avatar';
import LongText from 'components/ui/LongText';
@@ -16,14 +17,44 @@ export interface CommentProps {
onError?: () => any;
}
-export default function Comment({ comment, onError }: CommentProps) {
+export default function Comment({ comment: initialComment, onError }: CommentProps) {
+ const [comment, setComment] = useState(initialComment);
const [user, setUser] = useState<User>();
+ const [editing, setEditing] = useState(false);
+ const [text, setText] = useState(comment.text);
+
+ const userId = getLoggedInUser();
+
+ const handleSubmit = useCallback((e: FormEvent) => {
+ e.preventDefault();
+ if (comment.text.length > 0) {
+ setEditing(false);
+ updateComment(comment.id, text).then(() => {
+ setComment({
+ ...comment,
+ text: text,
+ edited: currentTime(),
+ });
+ })
+ .catch(onError);
+ }
+ }, [comment, text, onError]);
+
+ const handleReset = useCallback((e: FormEvent) => {
+ e.preventDefault();
+ setEditing(false);
+ }, [initialComment]);
+
+ const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+ e.preventDefault();
+ setText(e.target.value);
+ }, [comment]);
useEffect(() => {
- getUser(comment.user)
+ getUser(initialComment.user)
.then((user) => setUser(user))
.catch(() => onError?.());
- }, [comment, onError]);
+ }, [initialComment, onError]);
if (user) {
return (
@@ -43,9 +74,29 @@ export default function Comment({ comment, onError }: CommentProps) {
</div>
</div>
</div>
- <div className="comment">
- <LongText text={comment.text} />
- </div>
+ { editing
+ ? (
+ <form onSubmit={handleSubmit} onReset={handleReset}>
+ <textarea value={text} placeholder="Write a comment..." onChange={handleChange}></textarea>
+ <div className="buttons">
+ <button type="reset">Cancel</button>
+ <button type="submit" disabled={text.length <= 0}>Send</button>
+ </div>
+ </form>
+ )
+ : (
+ <div className="comment">
+ <LongText text={comment.text} />
+ </div>
+ )
+ }
+ { !editing && userId === comment.user &&
+ <div className="settings" onClick={() => setEditing(true)}>
+ <span className="material-icons icon">
+ edit
+ </span>
+ </div>
+ }
</div>
)
} else {
diff --git a/client/src/components/ui/User/user.scss b/client/src/components/ui/User/user.scss
index 49719eaf2520e51f0115fbbfe19bee84f1f3bc93..1b29e44b623f9e6fefc10f2bc5f676d48725fe82 100644
--- a/client/src/components/ui/User/user.scss
+++ b/client/src/components/ui/User/user.scss
@@ -45,6 +45,7 @@
}
.settings {
+ user-select: none;
height: 35px;
width: 35px;
background: s.$primary;