Fetch today metadata in suspense boundary. Fixes #81

Author: switz

src/components/TodayInHistoryColumn.tsx

@@ -13,7 +13,7 @@ import Row from './Row';
 import RowHeader from './RowHeader';
 import Tag from './Tag';
 
-const fetchToday = async (slug?: string): Promise<Show[] | undefined> => {
+export const fetchToday = async (slug?: string): Promise<Show[] | undefined> => {
   // TODO: pull time zone from cloudflare header and render "on date" for the users client
   const parsed: Show[] = await ky(`${API_DOMAIN}/api/v2/artists/${slug}/shows/today`, {
     cache: 'no-cache',

src/components/TodayInHistoryRow.tsx

@@ -0,0 +1,40 @@
+import { RawParams } from '@/app/(main)/(home)/layout';
+import Row from './Row';
+import { fetchToday } from './TodayInHistoryColumn';
+import { simplePluralize } from '@/lib/utils';
+import { Suspense } from 'react';
+
+const TodayInHistoryRow = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
+  return (
+    <Row href={`/${artistSlug}/today-in-history`} activeSegments={{ 0: 'today-in-history' }}>
+      <div>
+        <div>Today In History</div>
+      </div>
+      <div className="min-w-[20%] text-right text-xxs text-[#979797]">
+        <Suspense fallback={null}>
+          <TodayMetadata artistSlug={artistSlug} />
+        </Suspense>
+      </div>
+    </Row>
+  );
+};
+
+const TodayMetadata = async ({ artistSlug }: { artistSlug?: string }) => {
+  if (!artistSlug) return null;
+
+  const data = await fetchToday(artistSlug);
+
+  return (
+    <>
+      <div>{simplePluralize('show', data?.length)}</div>
+      <div>
+        {simplePluralize(
+          'tape',
+          data?.reduce((memo, next) => memo + (next.source_count ?? 0), 0)
+        )}
+      </div>
+    </>
+  );
+};
+
+export default TodayInHistoryRow;

src/components/YearsColumn.tsx

@@ -9,6 +9,7 @@ import { Year } from '../types';
 import Column from './Column';
 import Row from './Row';
 import { notFound } from 'next/navigation';
+import TodayInHistoryRow from './TodayInHistoryRow';
 
 const fetchYears = async (slug?: string): Promise<Year[]> => {
   if (!slug) return [];
@@ -37,15 +38,7 @@ const YearsColumn = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
 
   return (
     <Column heading={artist?.name ?? 'Years'}>
-      <Row href={`/${artistSlug}/today-in-history`} activeSegments={{ 0: 'today-in-history' }}>
-        <div>
-          <div>Today In History</div>
-        </div>
-        <div className="min-w-[20%] text-right text-xxs text-[#979797]">
-          {/* <div>{simplePluralize('show', yearObj.show_count)}</div>
-          <div>{simplePluralize('tape', yearObj.source_count)}</div> */}
-        </div>
-      </Row>
+      <TodayInHistoryRow artistSlug={artistSlug} />
       {artistSlug &&
         artistYears.length &&
         sortActiveBands(artistSlug, artistYears).map((yearObj) => (