diff --git a/packages/client/components/TimelineFeedList.tsx b/packages/client/components/TimelineFeedList.tsx index 151ac5646ed..e8451169f9d 100644 --- 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 ( - {groupedFreeHistory.groups.map(({date, events, label}) => ( -
+ {groupedFreeHistory.map(({label, events}) => ( +
diff --git a/packages/client/utils/date/timelineGroups.ts b/packages/client/utils/date/timelineGroups.ts index d11f3852d0e..f0bcc199898 100644 --- 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}