Added comment editing

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;
-            }
         }
     }
 }

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)

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;
+        }
+    }
 }
 

client/src/components/ui/Comment/index.tsx

 
-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 {

client/src/components/ui/User/user.scss

@@ -45,6 +45,7 @@
     }
 
     .settings {
+        user-select: none;
         height: 35px;
         width: 35px;
         background: s.$primary;