diff options
Diffstat (limited to 'FrontEnd/src/app/views/timeline-common/Timeline.tsx')
-rw-r--r-- | FrontEnd/src/app/views/timeline-common/Timeline.tsx | 70 |
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; |