feat: forum time formating with page thread formating (#466)

apps/feeds/next.config.js

@@ -8,17 +8,18 @@ const nextConfig = {
     config.module.rules.push({
       test: /\.md$/,
       use: "raw-loader",
-    });
-    return config;
+    })
+    return config
   },
   images: {
-    unoptimized: true
+    unoptimized: true,
   },
-  assetPrefix: process.env.APP_ENV === 'production' ? "/feeds" : "",
+  assetPrefix: process.env.APP_ENV === "production" ? "/feeds" : "",
   env: {
-    APP_ENV: process.env.APP_ENV || 'development',
-    MF_FEEDS_DOMAIN: process.env.MF_FEEDS_DOMAIN || ''
-  }
+    APP_ENV: process.env.APP_ENV || "development",
+    MF_FEEDS_DOMAIN: process.env.MF_FEEDS_DOMAIN || "",
+  },
+  distDir: "dist",
 }
 
 module.exports = nextConfig

apps/feeds/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,11 +19,25 @@
     "jsx": "preserve",
     "incremental": true,
     "baseUrl": ".",
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "dist/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/forum/src/components/App.tsx

@@ -119,7 +119,7 @@ const InnerApp = () => {
               <Route element={<NotFound />} path="*" />
             </Routes>
           </div>
-          <div className="flex flex-col sm:w-1/5 ">
+          <div className="flex flex-col lg:w-1/5 ">
             <div className="hidden md:h-[500px] md:w-[250px] justify-self-end">
               <h1></h1>
             </div>

apps/forum/src/components/Board.tsx

@@ -132,7 +132,7 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
 
   return (
     // <div className="max-w-2/5 w-5/6 mx-auto h-full">
-    <div className="mx-auto rounded-xl shadow-lg px-2 h-full lg:w-5/6 max-w-[5/6] standard-style">
+    <div className="mx-auto px-2 h-full lg:w-5/6 max-w-[5/6] standard-style">
       <CreateThread onNewThread={handleNewThread} />
       <div
         className="overflow-auto h-[calc(100%-44px)] mt-4 md:mt-8 lg:mt-12"

apps/forum/src/components/Comment.tsx

@@ -129,14 +129,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">Posted at {time}</h2>
+          <h2 className="text-2xl p-2 text-left">
+            {convertUrlsToLinks(comment.body)}
+          </h2>
+          <h2 className="text-sm my-auto p-2">{time}</h2>
         </div>
         {comment.mod === true && (
           <div className="justify-end">

apps/forum/src/components/CreateThread.tsx

@@ -272,12 +272,12 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
           onChange={handleBodyChange}
         />
       </div>
-      <h1
+      <button
         className="absolute top-0 right-2 m-1 p-1 hover:text-light-main cursor-pointer"
         onClick={() => setIsExpanded(false)}
       >
         <CloseIcon />
-      </h1>
+      </button>
       <div className="absolute bottom-0 left-2 w-full flex mb-3 mt-3 text-sm justify-between">
         <div className="my-auto flex flex-row gap-x-2">
           {/* {selectedBoard && (

apps/forum/src/components/Thread.tsx

@@ -37,7 +37,6 @@ const Thread = () => {
         headers: {
           "x-api-key": "0PaO2fHuJR9jlLLdXEDOyUgFXthoEXv8Sp0oNsb8",
           "Content-Type": "application/json",
-          // Authorization: idToken,
         },
         response: true,
       }
@@ -78,7 +77,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">
+    <div className="border-2 mt-12 mx-1 md:mx-auto rounded-xl shadow-lg py-6 h-fit px-4 standard-style max-w-[290px] lg:max-w-[900px]">
       {/* <CreateThread /> */}
 
       <ThreadBlock isPreview={false} thread={thread} />

apps/forum/src/components/ThreadBlock.tsx

@@ -204,10 +204,11 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
         {/* ^ This line goes to parent board on click while in thread */}
         <div className={`px-2`}>
           <div className="flex justify-between mt-2">
-            <div className="flex items-center justify-center mb-auto gap-x-4">
+            <div className="flex items-center text-center justify-center mb-auto gap-x-4">
               <h1 className="text-4xl font-bold  text-light-main dark:text-dark-main text-3xl">
                 {getTitleBySlug(thread.board_id)}
               </h1>
+              <h2 className="text-lg">{time}</h2>
 
               <ImageIcon
                 color={thread.obj_key || thread.url ? "success" : "inherit"}
@@ -237,6 +238,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
                   ) */}
             </div>
           </div>
+
           {thread.url ? (
             <img
               src={thread.url}
@@ -250,7 +252,6 @@ 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">
               {" "}

apps/forum/src/utils/timeFormatter.tsx

@@ -6,23 +6,25 @@ type threadOrComment = CommentType | ThreadType;
 export function timeFormatter(newComment: threadOrComment): string {
   const utcTimestamp = newComment.created_at;
   const date = new Date(utcTimestamp);
+  const now = new Date(); // Get the current date and time
 
-  // Add 9 hours to UTC time
+  // Convert both to JST
   date.setUTCHours(date.getUTCHours() + 9);
+  now.setUTCHours(now.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();
+  // Calculate time difference in milliseconds
+  const diff = now.getTime() - date.getTime();
 
-  // 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")}`;
+  // Convert to minutes and hours
+  const minutesDiff = Math.floor(diff / 60000); // 60 * 1000
+  const hoursDiff = Math.floor(minutesDiff / 60);
 
-  return formattedTimestamp;
+  if (minutesDiff < 60) {
+    return minutesDiff === 1 ? "1 minute ago" : `${minutesDiff} minutes ago`;
+  } else if (hoursDiff < 24) {
+    return hoursDiff === 1 ? "1 hour ago" : `${hoursDiff} hours ago`;
+  } else {
+    const daysDiff = Math.floor(hoursDiff / 24);
+    return daysDiff === 1 ? "1 day ago" : `${daysDiff} days ago`;
+  }
 }