fix: simplify event timeline grouping logic (#10727)

ParabolInc · Jan 24, 2025 · f3a911d · f3a911d
1 parent 8e0502e
commit f3a911d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/packages/client/components/TimelineFeedList.tsx b/packages/client/components/TimelineFeedList.tsx
@@ -4,7 +4,7 @@ import {useMemo} from 'react'
 import {usePaginationFragment} from 'react-relay'
 import {Link} from 'react-router-dom'
 import useLoadNextOnScrollBottom from '~/hooks/useLoadNextOnScrollBottom'
-import {TimelineGroup, getTimeGroup} from '~/utils/date/timelineGroups'
+import {TimelineGroup, compareTimelineLabels, getTimeGroup} from '~/utils/date/timelineGroups'
 import {TimelineFeedListPaginationQuery} from '../__generated__/TimelineFeedListPaginationQuery.graphql'
 import {TimelineFeedList_query$key} from '../__generated__/TimelineFeedList_query.graphql'
 import TimelineEvent from './TimelineEvent'
@@ -113,19 +113,19 @@ const TimelineFeedList = (props: Props) => {
 
     freeHistory.forEach((edge) => {
       const eventDate = new Date(edge.node.createdAt)
-      const {date: groupDate, label} = getTimeGroup(eventDate)
+      const label = getTimeGroup(eventDate)
 
-      let group = groups.find((g) => g.date.getTime() === groupDate.getTime())
+      let group = groups.find((g) => g.label === label)
       if (!group) {
-        group = {date: groupDate, events: [], label}
+        group = {events: [], label}
         groups.push(group)
       }
       group.events.push(edge)
     })
 
-    // Sort groups by date (newest first)
-    groups.sort((a, b) => b.date.getTime() - a.date.getTime())
-    return {groups}
+    // Sort groups by label order (newer first)
+    groups.sort((a, b) => compareTimelineLabels(a.label, b.label))
+    return groups
   }, [freeHistory])
 
   if (freeHistory.length === 0 && !lockedHistory?.length) {
@@ -142,8 +142,8 @@ const TimelineFeedList = (props: Props) => {
 
   return (
     <ResultScroller>
-      {groupedFreeHistory.groups.map(({date, events, label}) => (
-        <div key={date.toISOString()}>
+      {groupedFreeHistory.map(({label, events}) => (
+        <div key={label}>
           <div className='my-2 flex items-center gap-4 py-4'>
             <div className='h-[1px] flex-1 bg-slate-400' />
             <div className='bg-slate-50 rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600'>

diff --git a/packages/client/utils/date/timelineGroups.ts b/packages/client/utils/date/timelineGroups.ts
@@ -1,21 +1,32 @@
 import {DAY, MONTH} from './relativeDate'
 
-interface TimelineGroup {
-  date: Date
-  events: any[]
-  label: string
+// Lower number = newer = should appear first
+const LABEL_SORT_ORDER = {
+  '🌅 Today': 0,
+  '🌙 Yesterday': 1,
+  '📅 This week': 2,
+  '📆 This month': 3,
+  '🗓️ Past 3 months': 4,
+  '📚 Past 6 months': 5,
+  '🏛️ Ancient history': 6
+} as const
+
+export type TimelineLabel = keyof typeof LABEL_SORT_ORDER
+
+export const compareTimelineLabels = (a: TimelineLabel, b: TimelineLabel) => {
+  return LABEL_SORT_ORDER[a] - LABEL_SORT_ORDER[b]
 }
 
-export interface TimelineGrouping {
-  date: Date
-  label: string
+interface TimelineGroup {
+  events: any[]
+  label: TimelineLabel
 }
 
 const getStartOfDay = (date: Date): Date => {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate())
 }
 
-export const getTimeGroup = (date: Date): TimelineGrouping => {
+export const getTimeGroup = (date: Date): TimelineLabel => {
   const now = new Date()
   const today = getStartOfDay(now)
   const yesterday = new Date(today.getTime() - DAY)
@@ -27,19 +38,19 @@ export const getTimeGroup = (date: Date): TimelineGrouping => {
   const compareDate = getStartOfDay(date)
 
   if (compareDate >= today) {
-    return {date: today, label: '🌅 Today'}
+    return '🌅 Today'
   } else if (compareDate >= yesterday) {
-    return {date: yesterday, label: '🌙 Yesterday'}
+    return '🌙 Yesterday'
   } else if (compareDate >= lastWeek) {
-    return {date: lastWeek, label: '📅 This week'}
+    return '📅 This week'
   } else if (compareDate >= lastMonth) {
-    return {date: lastMonth, label: '📆 This month'}
+    return '📆 This month'
   } else if (compareDate >= last3Months) {
-    return {date: last3Months, label: '🗓️ Past 3 months'}
+    return '🗓️ Past 3 months'
   } else if (compareDate >= last6Months) {
-    return {date: last6Months, label: '📚 Past 6 months'}
+    return '📚 Past 6 months'
   }
-  return {date: last6Months, label: '🏛️ Ancient history'}
+  return '🏛️ Ancient history'
 }
 
 export type {TimelineGroup}