feat: allow toggle between interval and date two date formats

MR-Addict · Oct 23, 2024 · 33d271f · 33d271f
1 parent c551595
commit 33d271f
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "mongodb": "^6.10.0",
-    "next": "^15.0.0"
+    "next": "^15.0.1"
   },
   "devDependencies": {
     "@codemirror/lang-markdown": "^6.3.0",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/view": "^6.34.1",
-    "@types/node": "^22.7.7",
-    "@types/react": "^18.3.11",
+    "@types/node": "^22.7.9",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@uiw/codemirror-theme-vscode": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.5",
@@ -34,7 +34,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
-    "rehype-highlight": "^7.0.0",
+    "rehype-highlight": "^7.0.1",
     "rehype-prism-plus": "^2.0.0",
     "remark-gfm": "^4.0.0",
     "tailwindcss": "^3.4.14",

diff --git a/src/app/view/components/Table/Table.tsx b/src/app/view/components/Table/Table.tsx
@@ -5,12 +5,15 @@ import { AiOutlineCalendar, AiOutlineUser } from "react-icons/ai";
 import style from "./Table.module.css";
 import groupBy from "@/lib/utils/groupBy";
 import formatDate from "@/lib/utils/formatDate";
+import timeInterval from "@/lib/utils/timeInterval";
+import usePersistantState from "@/hooks/usePersistantState";
 import { useTableContext } from "@/contexts/Table/TableProvider";
 
 import MarkdownRenderer from "@/components/MarkdownRenderer/MarkdownRenderer";
 
 export default function Table() {
   const { currentNotes } = useTableContext();
+  const [intervalFomatDate, setIntervalFomatDate] = usePersistantState("view-interval-format-date", true);
 
   if (currentNotes.length === 0) return <h1 className="w-full text-center py-28 rounded-sm">没有符合条件的结果</h1>;
 
@@ -28,12 +31,21 @@ export default function Table() {
                 <p className={style.avatar}>{note.name.at(0)}</p>
 
                 <div className="flex flex-col w-full gradient-50 py-4 px-5 rounded-md shadow-md duration-300">
-                  <h2 className="flex flex-row items-center gap-0.5 border-b border-b-gray-300 w-fit text-gray-500">
-                    <AiOutlineUser />
-                    <span className="mr-2">{note.name}</span>
+                  <h2 className="flex flex-row gap-2 w-fit text-gray-500">
+                    <p className="flex flex-row items-center gap-0.5 border-b border-b-gray-300">
+                      <AiOutlineUser />
+                      <span className="mr-2">{note.name}</span>
+                    </p>
 
-                    <AiOutlineCalendar />
-                    <span>{formatDate(note.date)}</span>
+                    <button
+                      type="button"
+                      className="flex flex-row items-center gap-0.5 border-b border-b-gray-300"
+                      onClick={() => setIntervalFomatDate((prev) => !prev)}
+                    >
+                      <AiOutlineCalendar />
+                      {intervalFomatDate && <span>{timeInterval(note.date)}</span>}
+                      {!intervalFomatDate && <span>{formatDate(note.date, false)}</span>}
+                    </button>
                   </h2>
 
                   {new Date(note.date).getFullYear() >= 2024 ? (

diff --git a/src/contexts/Table/TableProvider.tsx b/src/contexts/Table/TableProvider.tsx
@@ -4,7 +4,7 @@ import { createContext, useContext, useState, useMemo, useEffect } from "react";
 
 import { NoteDatabseType } from "@/types/notes";
 
-const notesPerpage = 20;
+const notesPerpage = 50;
 
 interface TableContextProps {
   totalPages: number;