added timestamp for solutions and comments (#69)

utmgdsc · Apr 30, 2024 · 222aed2 · 222aed2
1 parent 59ebf82
commit 222aed2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/client/src/components/Comment.tsx b/client/src/components/Comment.tsx
@@ -5,6 +5,7 @@ import { Form } from "react-bootstrap";
 import { useEffect, useState } from "react";
 import { CaretUpFill, CaretUp } from "react-bootstrap-icons";
 import { useRemark } from "react-remark";
+import dayjs from 'dayjs';
 
 type CommentProps = NonEditableCommentProps | EditableCommentProps;
 
@@ -62,13 +63,19 @@ const NonEditableComment = ({ comment, onSubmit }: NonEditableCommentProps) => {
 
   useEffect(() => {
     setMarkdownSource(comment.text);
-  }, []);
+  }, [comment.text]);
 
   console.log(comment);
 
   return (
     <>
       <Card className="mt-3">
+        <Card.Header>
+          <div className="d-flex justify-content-between align-items-center">
+            <strong>{comment.userId}</strong>  {/* Displaying username */}
+            <small>{dayjs(comment.createdAt).format('MMM D, YYYY')}</small>  {/* Formatting and displaying date */}
+          </div>
+        </Card.Header>
         <Card.Body>
           <Card.Text>{renderedMarkdown}</Card.Text>
           <div>
@@ -79,45 +86,40 @@ const NonEditableComment = ({ comment, onSubmit }: NonEditableCommentProps) => {
             />
             <Button
               variant="primary"
-              onClick={() => {
-                setIsReplying((p) => !p);
-              }}
+              onClick={() => setIsReplying(prev => !prev)}
             >
               {isReplying ? "Stop Replying" : "Reply"}
             </Button>
             {repliesAvailable && (
               <Button
-                variant={"secondary"}
-                className={"ms-3"}
-                onClick={() => {
-                  setRepliesOpen((p) => !p);
-                }}
+                variant="secondary"
+                className="ms-3"
+                onClick={() => setRepliesOpen(prev => !prev)}
               >
                 {repliesOpen ? "Close Replies" : "See Replies"}
               </Button>
             )}
           </div>
         </Card.Body>
       </Card>
-      <div className={"mt-3 ms-3"}>
+      <div className="mt-3 ms-3">
         {isReplying && (
           <Comment editable={true} onSubmit={onSubmit} parentId={comment.id} />
         )}
-        {repliesAvailable &&
-          repliesOpen &&
-          comment.replies.map((c) => (
-            <Comment
-              key={c.id}
-              comment={c}
-              onSubmit={onSubmit}
-              editable={false}
-            />
-          ))}
+        {repliesAvailable && repliesOpen && comment.replies.map(c => (
+          <Comment
+            key={c.id}
+            comment={c}
+            onSubmit={onSubmit}
+            editable={false}
+          />
+        ))}
       </div>
     </>
   );
 };
 
+
 const EditableComment = ({ onSubmit, parentId }: EditableCommentProps) => {
   const [newComment, setNewComment] = useState<string>("");
   return (

diff --git a/client/src/pages/Solution.tsx b/client/src/pages/Solution.tsx
@@ -6,6 +6,7 @@ import { CommentData } from "../types/CommentData.ts";
 import Button from "../components/Button.tsx";
 import Comment from "../components/Comment.tsx";
 import useCheckRole from '../hooks/useCheckRole';  // Make sure the path is correct
+import dayjs from 'dayjs';
 
 function loadSolution(id, setter) {
   fetch(`/api/solutions/${id}`)
@@ -63,9 +64,16 @@ const Solution = () => {
           <h2>Solution</h2>
           {solutionData && (
             <Card>
+               <Card.Header>
+                <div className="d-flex justify-content-between align-items-center">
+                  <strong>By: {solutionData.userId}</strong>
+                  <small>{dayjs(solutionData.createdAt).format('MMMM D, YYYY')}</small>
+                </div>
+              </Card.Header>
               <Card.Body>
                 <Card.Title>{solutionData.title}</Card.Title>
                 <Card.Text>{solutionData.description}</Card.Text>
+
                 {solutionData.diagram && (
                   <Card.Img variant="bottom" src={`/api/solutions/diagrams/${solutionData.diagram}`} alt="Solution Diagram" />
                 )}