aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/app/views/timeline-common/Timeline.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/app/views/timeline-common/Timeline.tsx')
-rw-r--r--FrontEnd/src/app/views/timeline-common/Timeline.tsx70
1 files changed, 1 insertions, 69 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index 7aa645f5..d970af84 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import clsx from "clsx";
import {
HttpForbiddenError,
@@ -8,16 +7,7 @@ import {
} from "@/http/common";
import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
-import TimelineItem from "./TimelineItem";
-import TimelineDateItem from "./TimelineDateItem";
-
-function dateEqual(left: Date, right: Date): boolean {
- return (
- left.getDate() == right.getDate() &&
- left.getMonth() == right.getMonth() &&
- left.getFullYear() == right.getFullYear()
- );
-}
+import TimelinePostListView from "./TimelinePostListView";
export interface TimelineProps {
className?: string;
@@ -101,62 +91,4 @@ const Timeline: React.FC<TimelineProps> = (props) => {
}
};
-export interface TimelinePostListViewProps {
- className?: string;
- style?: React.CSSProperties;
- posts: HttpTimelinePostInfo[];
-}
-
-export const TimelinePostListView: React.FC<TimelinePostListViewProps> = (
- props
-) => {
- const { className, style, posts } = props;
-
- const groupedPosts = React.useMemo<
- { date: Date; posts: (HttpTimelinePostInfo & { index: number })[] }[]
- >(() => {
- const result: {
- date: Date;
- posts: (HttpTimelinePostInfo & { index: number })[];
- }[] = [];
- let index = 0;
- for (const post of posts) {
- const time = new Date(post.time);
- 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 style={style} className={clsx("timeline", className)}>
- {groupedPosts.map((group) => {
- return (
- <>
- <TimelineDateItem date={group.date} />
- {group.posts.map((post) => {
- return (
- <TimelineItem
- key={post.id}
- post={post}
- current={posts.length - 1 === post.index}
- />
- );
- })}
- </>
- );
- })}
- </div>
- );
-};
-
export default Timeline;