Add empty state

Author: LiamMorrow

liftlog-react/app/(tabs)/history/index.tsx

@@ -1,6 +1,8 @@
 import CardList from '@/components/presentation/card-list';
+import EmptyInfo from '@/components/presentation/empty-info';
 import FullHeightScrollView from '@/components/presentation/full-height-scroll-view';
 import HistoryCalendarCard from '@/components/presentation/history-calendar-card';
+import LimitedHtml from '@/components/presentation/limited-html';
 import SessionSummary from '@/components/presentation/session-summary';
 import SessionSummaryTitle from '@/components/presentation/session-summary-title';
 import SplitCardControl from '@/components/presentation/split-card-control';
@@ -10,6 +12,7 @@ import {
   selectSessions,
   selectSessionsInMonth,
 } from '@/store/stored-sessions';
+import { formatDate } from '@/utils/format-date';
 import { YearMonth } from '@js-joda/core';
 import { useTranslate } from '@tolgee/react';
 import { Stack } from 'expo-router';
@@ -54,6 +57,15 @@ export default function History() {
               }
             />
           )}
+          emptyTemplate={
+            <EmptyInfo>
+              <LimitedHtml
+                value={t('NoSessionsInMonth{Month}', {
+                  0: formatDate(currentYearMonth.atDay(1), { month: 'long' }),
+                })}
+              />
+            </EmptyInfo>
+          }
         />
       </FullHeightScrollView>
     </>

liftlog-react/components/presentation/card-list.tsx

@@ -12,6 +12,7 @@ interface CardListProps<T> extends ViewProps {
   cardStyle?: CardProps['style'];
   cardType: 'elevated' | 'outlined' | 'contained';
   keySelector?: (item: T) => Key;
+  emptyTemplate?: ReactNode;
 }
 
 export default function CardList<T>(props: CardListProps<T>) {
@@ -24,6 +25,7 @@ export default function CardList<T>(props: CardListProps<T>) {
     cardStyle,
     cardType,
     keySelector,
+    emptyTemplate,
     ...rest
   } = props;
   return (
@@ -33,10 +35,12 @@ export default function CardList<T>(props: CardListProps<T>) {
         {
           gap: spacing[2],
           padding: spacing[2],
+          flex: 1,
         },
         rest['style'],
       ]}
     >
+      {!!items.length || emptyTemplate}
       {items.map((item, i) => (
         <Card
           key={keySelector?.(item) ?? i}

liftlog-react/components/presentation/history-calendar-card.tsx

@@ -2,6 +2,7 @@ import { SurfaceText } from '@/components/presentation/surface-text';
 import { spacing, useAppTheme } from '@/hooks/useAppTheme';
 import { Session } from '@/models/session-models';
 import { useAppSelector } from '@/store';
+import { formatDate } from '@/utils/format-date';
 import { LocalDate, Year, YearMonth } from '@js-joda/core';
 import Enumerable from 'linq';
 import { View } from 'react-native';
@@ -250,14 +251,6 @@ function HistoryCalendarDay(props: {
   );
 }
 
-function formatDate(date: LocalDate, opts: Intl.DateTimeFormatOptions) {
-  return new Date(
-    date.year(),
-    date.month().ordinal(),
-    date.dayOfMonth(),
-  ).toLocaleString('default', opts);
-}
-
 function getDateOnDay(dayOfWeek: number) {
   // Super gross and hacky, but then we get i18n formatting for free
   const constantSundayDay = LocalDate.of(2025, 5, 4);

liftlog-react/utils/format-date.ts

@@ -0,0 +1,9 @@
+import { LocalDate } from '@js-joda/core';
+
+export function formatDate(date: LocalDate, opts: Intl.DateTimeFormatOptions) {
+  return new Date(
+    date.year(),
+    date.month().ordinal(),
+    date.dayOfMonth(),
+  ).toLocaleString('default', opts);
+}