1 files changed, 62 insertions, 26 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index aba868cb..ab658b89 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -5,6 +5,15 @@ import { TimelinePostInfo } from "@/services/timeline";
 
 import TimelineItem from "./TimelineItem";
 import TimelineTop from "./TimelineTop";
+import TimelineDateItem from "./TimelineDateItem";
+
+function dateEqual(left: Date, right: Date): boolean {
+  return (
+    left.getDate() == right.getDate() &&
+    left.getMonth() == right.getMonth() &&
+    left.getFullYear() == right.getFullYear()
+  );
+}
 
 export interface TimelinePostInfoEx extends TimelinePostInfo {
   onDelete?: () => void;
@@ -16,15 +25,39 @@ export interface TimelineProps {
   className?: string;
   style?: React.CSSProperties;
   posts: TimelinePostInfoEx[];
-  onResize?: () => void;
   containerRef?: React.Ref<HTMLDivElement>;
 }
 
 const Timeline: React.FC<TimelineProps> = (props) => {
-  const { posts, onResize } = props;
+  const { posts } = props;
 
   const [showMoreIndex, setShowMoreIndex] = React.useState<number>(-1);
 
+  const groupedPosts = React.useMemo<
+    { date: Date; posts: (TimelinePostInfoEx & { index: number })[] }[]
+  >(() => {
+    const result: {
+      date: Date;
+      posts: (TimelinePostInfoEx & { index: number })[];
+    }[] = [];
+    let index = 0;
+    for (const post of posts) {
+      const { time } = post;
+      if (result.length === 0) {
+        result.push({ date: time, posts: [{ ...post, index }] });
+      } else {
+        const lastGroup = result[result.length - 1];
+        if (dateEqual(lastGroup.date, time)) {
+          lastGroup.posts.push({ ...post, index });
+        } else {
+          result.push({ date: time, posts: [{ ...post, index }] });
+        }
+      }
+      index++;
+    }
+    return result;
+  }, [posts]);
+
   return (
     <div
       ref={props.containerRef}
@@ -32,30 +65,33 @@ const Timeline: React.FC<TimelineProps> = (props) => {
       className={clsx("timeline", props.className)}
     >
       <TimelineTop height="56px" />
-      {(() => {
-        const length = posts.length;
-        return posts.map((post, index) => {
-          return (
-            <TimelineItem
-              post={post}
-              key={post.id}
-              current={length - 1 === index}
-              more={
-                post.onDelete != null
-                  ? {
-                      isOpen: showMoreIndex === index,
-                      toggle: () =>
-                        setShowMoreIndex((old) => (old === index ? -1 : index)),
-                      onDelete: post.onDelete,
-                    }
-                  : undefined
-              }
-              onClick={() => setShowMoreIndex(-1)}
-              onResize={onResize}
-            />
-          );
-        });
-      })()}
+      {groupedPosts.map((group) => {
+        return (
+          <>
+            <TimelineDateItem date={group.date} />
+            {group.posts.map((post) => (
+              <TimelineItem
+                post={post}
+                key={post.id}
+                current={posts.length - 1 === post.index}
+                more={
+                  post.onDelete != null
+                    ? {
+                        isOpen: showMoreIndex === post.index,
+                        toggle: () =>
+                          setShowMoreIndex((old) =>
+                            old === post.index ? -1 : post.index
+                          ),
+                        onDelete: post.onDelete,
+                      }
+                    : undefined
+                }
+                onClick={() => setShowMoreIndex(-1)}
+              />
+            ))}
+          </>
+        );
+      })}
     </div>
   );
 };