diff --git a/api-client/src/index.ts b/api-client/src/index.ts index fc71734c0d..af13969f12 100644 --- a/api-client/src/index.ts +++ b/api-client/src/index.ts @@ -101,7 +101,7 @@ export { prepareFeatureLocations, prepareFeatureLocation } from './utils/geoJson export { default as CategoriesMapModel } from './models/CategoriesMapModel' export { default as CategoryModel } from './models/CategoryModel' export { default as CityModel } from './models/CityModel' -export { default as DateModel } from './models/DateModel' +export { default as DateModel, type DateIcon } from './models/DateModel' export { default as EventModel } from './models/EventModel' export { default as LocalNewsModel } from './models/LocalNewsModel' export { default as TunewsModel } from './models/TunewsModel' diff --git a/api-client/src/models/DateModel.ts b/api-client/src/models/DateModel.ts index ab7e4fb8c5..fc3eee0c6a 100644 --- a/api-client/src/models/DateModel.ts +++ b/api-client/src/models/DateModel.ts @@ -3,6 +3,8 @@ import { RRule as RRuleType } from 'rrule' const MAX_RECURRENCE_YEARS = 5 +export type DateIcon = 'CalendarTodayRecurringIcon' | 'CalendarRecurringIcon' | 'CalendarTodayIcon' + class DateModel { _startDate: DateTime _endDate: DateTime @@ -101,6 +103,22 @@ class DateModel { return `${localizedStartDate} - ${localizedEndDate.toFormat(format)}` } + getDateIcon(): { icon: DateIcon; label: string } | null { + const isRecurring = this.hasMoreRecurrencesThan(1) + const isToday = this.isToday + + if (isRecurring && isToday) { + return { icon: 'CalendarTodayRecurringIcon', label: 'todayRecurring' } + } + if (isRecurring) { + return { icon: 'CalendarRecurringIcon', label: 'recurring' } + } + if (isToday) { + return { icon: 'CalendarTodayIcon', label: 'today' } + } + return null + } + private rruleToDateTime(date: Date): DateTime { const dateTime = DateTime.fromJSDate(date) // rrule is not correctly handling timezones and always returning local time in the shape of UTC diff --git a/native/src/components/EventListItem.tsx b/native/src/components/EventListItem.tsx index 89ac5042f4..5c7e13d4ad 100644 --- a/native/src/components/EventListItem.tsx +++ b/native/src/components/EventListItem.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { SvgProps } from 'react-native-svg' import styled from 'styled-components/native' -import { DateModel, EventModel, parseHTML } from 'api-client' +import { DateModel, DateIcon, EventModel, parseHTML } from 'api-client' import { CalendarRecurringIcon, @@ -25,19 +25,18 @@ const Description = styled.Text` const placeholderThumbnails = [EventThumbnailPlaceholder1, EventThumbnailPlaceholder2, EventThumbnailPlaceholder3] const getDateIcon = (date: DateModel): { icon: JSXElementConstructor; label: string } | null => { - const isRecurring = date.hasMoreRecurrencesThan(1) - const isToday = date.isToday - - if (isRecurring && isToday) { - return { icon: CalendarTodayRecurringIcon, label: 'todayRecurring' } - } - if (isRecurring) { - return { icon: CalendarRecurringIcon, label: 'recurring' } - } - if (isToday) { - return { icon: CalendarTodayIcon, label: 'today' } + const icons: { [key in DateIcon]: JSXElementConstructor } = { + CalendarTodayRecurringIcon, + CalendarRecurringIcon, + CalendarTodayIcon, } - return null + const iconToUse = date.getDateIcon() + return iconToUse + ? { + icon: icons[iconToUse.icon], + label: iconToUse.label, + } + : null } type EventListItemProps = { diff --git a/web/src/components/EventListItem.tsx b/web/src/components/EventListItem.tsx index 3396725e8c..cf8fce65e1 100644 --- a/web/src/components/EventListItem.tsx +++ b/web/src/components/EventListItem.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' -import { DateModel, EventModel, getExcerpt } from 'api-client' +import { DateModel, DateIcon, EventModel, getExcerpt } from 'api-client' import { CalendarRecurringIcon, @@ -38,19 +38,18 @@ const getEventPlaceholder = (path: string): string => { } const getDateIcon = (date: DateModel): { icon: string; tooltip: string } | null => { - const isRecurring = date.hasMoreRecurrencesThan(1) - const isToday = date.isToday - - if (isRecurring && isToday) { - return { icon: CalendarTodayRecurringIcon, tooltip: 'todayRecurring' } - } - if (isRecurring) { - return { icon: CalendarRecurringIcon, tooltip: 'recurring' } - } - if (isToday) { - return { icon: CalendarTodayIcon, tooltip: 'today' } + const icons: { [key in DateIcon]: string } = { + CalendarTodayRecurringIcon, + CalendarRecurringIcon, + CalendarTodayIcon, } - return null + const iconToUse = date.getDateIcon() + return iconToUse + ? { + icon: icons[iconToUse.icon], + tooltip: iconToUse.label, + } + : null } const EventListItem = ({ event, languageCode }: EventListItemProps): ReactElement => {