feat: forum-timstamp (#462)

* Added Timestamp

* feat: localization to JST from UTC

---------

Co-authored-by: KTheAsianimeBoi <[email protected]>

apps/forum/src/components/Comment.tsx

@@ -7,6 +7,7 @@ import { ConfirmModal } from "@app/components/form/ConfirmModal";
 import API from "@aws-amplify/api";
 import { getIdToken } from "wasedatime-ui";
 import ThreadType from "@app/types/thread";
+import { timeFormatter } from "../utils/timeFormatter";
 
 type Props = {
   comment: CommentType;
@@ -18,7 +19,7 @@ type Props = {
 const convertUrlsToLinks = (text: string) => {
   if (!text) return null;
 
-  const urlRegex = /https?:\/\/[^\s]+/g;
+  const urlRegex: RegExp = /https?:\/\/[^\s]+/g;
   const parts = text.split(urlRegex);
   const matches = text.match(urlRegex);
 
@@ -127,12 +128,15 @@ const Comment = ({ comment, thread, setComments, setThread }: Props) => {
     }
   };
 
+  const time = timeFormatter(comment);
+  console.log(comment);
+
   return (
     <Block actions={actions}>
       <div className="border-2 rounded-xl px-4 py-2 text-light-text2 mt-4 standard-style flex flex-row justify-between items-center">
         <div>
           <h2 className="text-2xl p-2">{convertUrlsToLinks(comment.body)}</h2>
-          <h2 className="text-xs my-auto"></h2>
+          <h2 className="text-xs my-auto">Posted at {time}</h2>
         </div>
         {comment.mod === true && (
           <div className="justify-end">

apps/forum/src/components/CommentForm.tsx

@@ -66,6 +66,7 @@ const CommentForm: React.FC<CommentFormProps> = ({
       );
 
       const newComment: CommentType = response.data;
+
       onNewComment(newComment);
       setComment("");
 
@@ -105,12 +106,12 @@ const CommentForm: React.FC<CommentFormProps> = ({
       }
     } catch (error) {
       console.error("An error occurred:", error);
-    } finally {
     }
   };
 
   return (
     <div className="flex justify-between">
+      {/* <div>Posted at ${time}</div> */}
       <input
         className="text-2xl text-light-text3 dark:text-dark-text1 w-full focus:text-light-text1 focus:ring border-2 mt-4 mb-2 rounded-lg px-4 py-2 standard-style"
         placeholder="Write your comment here (no more than 200 character)"
@@ -126,13 +127,11 @@ const CommentForm: React.FC<CommentFormProps> = ({
       >
         <SendIcon />
       </span>
-      {isSignInModalOpen && (
-        <SignInModal
-          isModalOpen={isSignInModalOpen}
-          closeModal={() => setSignInModalOpen(false)}
-          t={t}
-        />
-      )}
+      <SignInModal
+        isModalOpen={isSignInModalOpen}
+        closeModal={() => setSignInModalOpen(false)}
+        t={t}
+      />
     </div>
   );
 };

apps/forum/src/components/Thread.tsx

@@ -80,6 +80,7 @@ const Thread = () => {
   return (
     <div className="border-2 mt-12 mx-auto rounded-xl shadow-lg py-6 h-fit px-4 standard-style max-w-2/5 w-5/6">
       {/* <CreateThread /> */}
+
       <ThreadBlock isPreview={false} thread={thread} />
       <CommentForm
         onNewComment={handleNewComment}

apps/forum/src/components/ThreadBlock.tsx

@@ -11,6 +11,7 @@ import TextsmsIcon from "@mui/icons-material/Textsms";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import boards from "@app/constants/boards.json";
 import ThreadType from "@app/types/thread";
+import { timeFormatter } from "@app/utils/timeFormatter";
 import ImageIcon from "@mui/icons-material/Image";
 
 type Props = {
@@ -182,6 +183,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
 
   const navigate = useNavigate();
 
+  const time = timeFormatter(thread);
   const renderContent = () => {
     return (
       <div
@@ -206,6 +208,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
               <h1 className="text-4xl font-bold  text-light-main dark:text-dark-main text-3xl">
                 {getTitleBySlug(thread.board_id)}
               </h1>
+
               <ImageIcon
                 color={thread.obj_key || thread.url ? "success" : "inherit"}
               />
@@ -247,13 +250,17 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
           >
             {convertUrlsToLinks(isPreview, thread.body)}
           </h2>
+          <h2 className="text-lg mt-5">Posted at {time}</h2>
         </div>
         {/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
               {" "}
               {`# ${thread.tag_id}`}
             </div> */}
         <hr className="mx-2 pt-2 mt-6" />
+        {/* horizontal line break */}
         <div className="flex flex-row justify-evenly pt-2 items-center">
+          {/* The down panel that has like button, views in total, etc...*/}
+
           <div className="flex flex-row items-center justify-center">
             <button onClick={handleLike} className="clipboard-icon group">
               <Favorite

apps/forum/src/utils/timeFormatter.tsx

@@ -0,0 +1,28 @@
+import CommentType from "@app/types/comment";
+import ThreadType from "@app/types/thread";
+
+type threadOrComment = CommentType | ThreadType;
+
+export function timeFormatter(newComment: threadOrComment): string {
+  const utcTimestamp = newComment.created_at;
+  const date = new Date(utcTimestamp);
+
+  // Add 9 hours to UTC time
+  date.setUTCHours(date.getUTCHours() + 9);
+
+  // Extract year, month, date, hours, and minutes
+  const year = date.getUTCFullYear();
+  const month = date.getUTCMonth() + 1; // Months are 0-based, so add 1
+  const day = date.getUTCDate();
+  const hours = date.getUTCHours();
+  const minutes = date.getUTCMinutes();
+
+  // Format the components as a string
+  const formattedTimestamp = `${year}-${month.toString().padStart(2, "0")}-${day
+    .toString()
+    .padStart(2, "0")} ${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}`;
+
+  return formattedTimestamp;
+}