done

kemboi590 · Jul 26, 2023 · 845b2f2 · 845b2f2
1 parent 00fb452
commit 845b2f2
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 19 deletions.
diff --git a/src/pages/Tasks/Discussions/Discussions.jsx b/src/pages/Tasks/Discussions/Discussions.jsx
@@ -25,7 +25,7 @@ function Discussions() {
           Authorization: `${userData.token}`,
         },
       });
-      // console.log(response.data);
+      console.log(response.data);
       setCommentsDetails(response.data);
     } catch (response) {
       console.log(response);
@@ -57,7 +57,10 @@ function Discussions() {
       })
       .catch((error) => {
         console.log(error);
-        toast.error("Oops! Something went wrong. Please try again.", toastStyles.error);
+        toast.error(
+          "Oops! Something went wrong. Please try again.",
+          toastStyles.error
+        );
         textareaRef.current.value = "";
       });
   };
@@ -74,7 +77,10 @@ function Discussions() {
       getAllComments();
     } catch (error) {
       // console.log(error);
-      toast.error("Oops! Something went wrong. Please try again.", toastStyles.error);
+      toast.error(
+        "Oops! Something went wrong. Please try again.",
+        toastStyles.error
+      );
     }
   };
 
@@ -99,7 +105,9 @@ function Discussions() {
           commentsDetails.map((comment, index) => {
             const timestamp = new Date(comment.timestamp).toLocaleString();
             const isCurrentUserComment = comment.username === userData.username;
-            const chatClass = isCurrentUserComment ? "chat_bubble_right" : "chat_bubble_left";
+            const chatClass = isCurrentUserComment
+              ? "chat_bubble_right"
+              : "chat_bubble_left";
 
             return (
               <div className={`comment_card ${chatClass}`} key={index}>
@@ -111,13 +119,26 @@ function Discussions() {
 
                 <p className="comment_content">{comment.content}</p>
                 <div className="edit_delete">
-                  <div className="edit_comment">
-                    <BsPencilFill onClick={() => handleEditToggle(comment)} />
-                    {showEditForm[comment.comment_id] && <UpdateComment comment={tempComment} getAllComments={getAllComments} />}
-                  </div>
-                  <div className="delete_comment">
-                    <FaTrash onClick={() => handleCommentDelete(comment.comment_id)} />
-                  </div>
+                  {userData && userData.user_id === comment.user_id && (
+                    <div className="edit_comment">
+                      <BsPencilFill onClick={() => handleEditToggle(comment)} />
+                      {showEditForm[comment.comment_id] && (
+                        <UpdateComment
+                          comment={tempComment}
+                          getAllComments={getAllComments}
+                        />
+                      )}
+                    </div>
+                  )}
+
+                  {/* here */}
+                  {userData && userData.user_id === comment.user_id && (
+                    <div className="delete_comment">
+                      <FaTrash
+                        onClick={() => handleCommentDelete(comment.comment_id)}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             );
@@ -126,7 +147,12 @@ function Discussions() {
         <form onSubmit={handleSubmit} className="myFormComments">
           <div className="form_for_comments">
             <div className="textarea">
-              <textarea className="inputComment" placeholder="Write a comment" name="Coment" ref={textareaRef} />
+              <textarea
+                className="inputComment"
+                placeholder="Write a comment"
+                name="Coment"
+                ref={textareaRef}
+              />
             </div>
 
             <button type="submit" className="sbmtComment">

diff --git a/src/pages/Tasks/Discussions/discussions.css b/src/pages/Tasks/Discussions/discussions.css
@@ -5,7 +5,7 @@
   border: #888 1px solid;
   border-radius: 5px;
   box-shadow: 0px 0px 5px #ccc;
-  width: 90%;
+  width: 85%;
 }
 .comment_title {
   font-size: 20px;
@@ -14,7 +14,6 @@
   columns: #333;
 }
 .wrap_comments {
-  margin: 10px 0px;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -23,6 +22,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 80%;
+  margin: 0 auto;
 }
 .comment_card {
   margin: 10px 0px;

diff --git a/src/pages/Tasks/UpdateComment/UpdateComment.jsx b/src/pages/Tasks/UpdateComment/UpdateComment.jsx
@@ -32,16 +32,35 @@ function UpdateComment({ comment, getAllComments }) {
       })
       .catch((error) => {
         console.log(error);
-        toast.error("Oops! Something went wrong. Please try again.", toastStyles.error);
+        toast.error(
+          "Oops! Something went wrong. Please try again.",
+          toastStyles.error
+        );
       });
   };
   return (
     <div>
       <form className="updateComment">
-        <textarea className="inputupdateComment" placeholder="Write a comment" name="Coment" value={newComment} onChange={(e) => setNewComment(e.target.value)}></textarea>
-        <button type="submit" className="submitUpdate" onClick={handleSubmit}>
-          <IoSend />
-        </button>
+        <div className="lets_update_comment">
+          <>
+            <textarea
+              className="inputupdateComment"
+              placeholder="Write a comment"
+              name="Coment"
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+            ></textarea>
+          </>
+          <>
+            <button
+              type="submit"
+              className="submitUpdate"
+              onClick={handleSubmit}
+            >
+              <IoSend />
+            </button>
+          </>
+        </div>
       </form>
     </div>
   );

diff --git a/src/pages/Tasks/UpdateComment/updatecomment.css b/src/pages/Tasks/UpdateComment/updatecomment.css
@@ -0,0 +1,31 @@
+.lets_update_comment {
+  display: flex;
+  gap: 5px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.updateComment {
+  margin: 10px;
+  padding: 10px;
+}
+.inputupdateComment {
+  width: 100%;
+  resize: none;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.submitUpdate {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 35px;
+  background-color: #333;
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 10px;
+}