From 43ee9abe495c6ad87e083e51cff8a8a707ad8800 Mon Sep 17 00:00:00 2001
From: Jason Park <93040528+JasonNotJson@users.noreply.github.com>
Date: Mon, 2 Oct 2023 23:42:24 +0900
Subject: [PATCH] feat: forum time formating with page thread formating (#466)
---
apps/feeds/next.config.js | 15 ++++++-----
apps/feeds/tsconfig.json | 28 ++++++++++++++++----
apps/forum/src/components/App.tsx | 2 +-
apps/forum/src/components/Board.tsx | 2 +-
apps/forum/src/components/Comment.tsx | 7 ++---
apps/forum/src/components/CreateThread.tsx | 4 +--
apps/forum/src/components/Thread.tsx | 3 +--
apps/forum/src/components/ThreadBlock.tsx | 5 ++--
apps/forum/src/utils/timeFormatter.tsx | 30 ++++++++++++----------
9 files changed, 59 insertions(+), 37 deletions(-)
diff --git a/apps/feeds/next.config.js b/apps/feeds/next.config.js
index 3a879374a..34bfa9cc2 100644
--- a/apps/feeds/next.config.js
+++ b/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
diff --git a/apps/feeds/tsconfig.json b/apps/feeds/tsconfig.json
index 4e3f057a8..4dc65595d 100644
--- a/apps/feeds/tsconfig.json
+++ b/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"
+ ]
}
diff --git a/apps/forum/src/components/App.tsx b/apps/forum/src/components/App.tsx
index e04651147..566db297c 100644
--- a/apps/forum/src/components/App.tsx
+++ b/apps/forum/src/components/App.tsx
@@ -119,7 +119,7 @@ const InnerApp = () => {
} path="*" />
-
+
diff --git a/apps/forum/src/components/Board.tsx b/apps/forum/src/components/Board.tsx
index 77e7bf68b..daaffd035 100644
--- a/apps/forum/src/components/Board.tsx
+++ b/apps/forum/src/components/Board.tsx
@@ -132,7 +132,7 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
return (
//
-
+
{
};
const time = timeFormatter(comment);
- console.log(comment);
return (
-
{convertUrlsToLinks(comment.body)}
- Posted at {time}
+
+ {convertUrlsToLinks(comment.body)}
+
+ {time}
{comment.mod === true && (
diff --git a/apps/forum/src/components/CreateThread.tsx b/apps/forum/src/components/CreateThread.tsx
index eecad3972..6bb798827 100644
--- a/apps/forum/src/components/CreateThread.tsx
+++ b/apps/forum/src/components/CreateThread.tsx
@@ -272,12 +272,12 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
onChange={handleBodyChange}
/>
-
setIsExpanded(false)}
>
-
+
{/* {selectedBoard && (
diff --git a/apps/forum/src/components/Thread.tsx b/apps/forum/src/components/Thread.tsx
index 1cd3666c2..f7380ddd0 100644
--- a/apps/forum/src/components/Thread.tsx
+++ b/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 (
-
+
{/*
*/}
diff --git a/apps/forum/src/components/ThreadBlock.tsx b/apps/forum/src/components/ThreadBlock.tsx
index 46c3b2300..bc9d4eab9 100644
--- a/apps/forum/src/components/ThreadBlock.tsx
+++ b/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 */}
-
+
{getTitleBySlug(thread.board_id)}
+ {time}
{
) */}
+
{thread.url ? (
{
>
{convertUrlsToLinks(isPreview, thread.body)}
-
Posted at {time}
{/*
{" "}
diff --git a/apps/forum/src/utils/timeFormatter.tsx b/apps/forum/src/utils/timeFormatter.tsx
index e528b9801..69b1b6d6e 100644
--- a/apps/forum/src/utils/timeFormatter.tsx
+++ b/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`;
+ }
}