Add recent tapes column to artists

Author: switz

src/components/RecentTapesColumn.tsx

@@ -0,0 +1,79 @@
+import sortActiveBands from '../lib/sortActiveBands';
+import { durationToHHMMSS, removeLeadingZero, simplePluralize, splitShowDate } from '../lib/utils';
+
+import RelistenAPI from '@/lib/RelistenAPI';
+import { RawParams } from '@/types/params';
+import React from 'react';
+import Column from './Column';
+import Flex from './Flex';
+import Row from './Row';
+import RowHeader from './RowHeader';
+import Tag from './Tag';
+import { notFound } from 'next/navigation';
+
+const RecentTapesColumn = async ({
+  artistSlug,
+  year,
+}: Pick<RawParams, 'artistSlug' | 'year'>) => {
+  const shows = await RelistenAPI.fetchRecentlyAdded(artistSlug).catch(() => {
+    notFound();
+  });
+  const tours = {};
+  return (
+    <Column heading={year ? year : 'Recently Added'} key={year}>
+      {(!shows || shows.length === 0) && (
+        <div className="text-center text-gray-700 text-sm py-2">
+          No recently added shows!
+        </div>
+      )}
+      {shows &&
+        artistSlug &&
+        sortActiveBands(artistSlug, shows).map((show) => {
+          const { year, month, day } = splitShowDate(show.display_date);
+          const { venue, avg_duration, tour } = show;
+          let tourName = '';
+
+          // keep track of which tours we've displayed
+          if (tour) {
+            if (!tours[tour.id]) tourName = tour.name ?? '';
+
+            tours[tour.id] = true;
+          }
+
+          return (
+            <div key={show.id}>
+              {tourName && (
+                <RowHeader>{tourName === 'Not Part of a Tour' ? '' : tourName}</RowHeader>
+              )}
+              <Row
+                href={`/${artistSlug}/${year}/${month}/${day}`}
+                activeSegments={{
+                  month,
+                  day,
+                }}
+              >
+                <div>
+                  <Flex>
+                    {removeLeadingZero(month)}/{day}/{year}
+                    {show.has_soundboard_source && <Tag>SBD</Tag>}
+                  </Flex>
+                  {venue && (
+                    <div className="text-xxs text-foreground-muted">
+                      <div>{venue.name}</div>
+                      <div>{venue.location}</div>
+                    </div>
+                  )}
+                </div>
+                <div className="flex h-full min-w-[20%] flex-col justify-center gap-2 text-right text-xxs text-foreground-muted">
+                  <div>{durationToHHMMSS(avg_duration)}</div>
+                  <div>{simplePluralize('tape', show.source_count)}</div>
+                </div>
+              </Row>
+            </div>
+          );
+        })}
+    </Column>
+  );
+};
+
+export default React.memo(RecentTapesColumn);

src/components/RecentTapesRow.tsx

@@ -0,0 +1,19 @@
+import { RawParams } from '@/types/params';
+import Row from './Row';
+
+const RecentTapesRow = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
+  return (
+    <Row href={`/${artistSlug}/recently-added`} activeSegments={{ year: 'recently-added' }}>
+      <div>
+        <div>Recent Tapes</div>
+        <div className="text-xxs text-foreground-muted">The newest recordings</div>
+      </div>
+      <div className="min-w-[20%] text-right text-xxs text-foreground-muted">
+        <div>fresh shows</div>
+        <div>fresh tapes</div>
+      </div>
+    </Row>
+  );
+};
+
+export default RecentTapesRow;

src/components/ShowsColumn.tsx

@@ -11,9 +11,11 @@ import Row from './Row';
 import RowHeader from './RowHeader';
 import Tag from './Tag';
 import TodayInHistoryColumn from './TodayInHistoryColumn';
+import RecentTapesColumn from './RecentTapesColumn';
 
 const ShowsColumn = async ({ artistSlug, year }: Pick<RawParams, 'artistSlug' | 'year'>) => {
   if (year === 'today-in-history') return <TodayInHistoryColumn artistSlug={artistSlug} />;
+  if (year === 'recently-added') return <RecentTapesColumn artistSlug={artistSlug} />;
 
   const artistShows = await RelistenAPI.fetchShows(artistSlug, year).catch(() => {
     notFound();

src/components/YearsColumn.tsx

@@ -7,6 +7,7 @@ import { notFound } from 'next/navigation';
 import Column from './Column';
 import Row from './Row';
 import TodayInHistoryRow from './TodayInHistoryRow';
+import RecentTapesRow from './RecentTapesRow';
 
 const YearsColumn = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
   const [artists, artistYears] = await Promise.all([
@@ -22,6 +23,7 @@ const YearsColumn = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
   return (
     <Column heading={artist?.name ?? 'Years'}>
       <TodayInHistoryRow artistSlug={artistSlug} />
+      <RecentTapesRow artistSlug={artistSlug} />
       {artistSlug &&
         artistYears.length &&
         sortActiveBands(artistSlug, artistYears).map((yearObj) => (

src/lib/RelistenAPI.ts

@@ -119,6 +119,15 @@ export class RelistenAPI {
     }
   );
 
+  // Recently Added Shows API
+  static fetchRecentlyAdded = cache(async (artistSlug?: string): Promise<Show[]> => {
+    if (!artistSlug) return [];
+
+    return this.cachedFetch<Show[]>(
+      `/api/v2/artists/${artistSlug}/shows/recently-added`
+    );
+  });
+
   // Live API
   static fetchRecentlyPlayed = cache(async (): Promise<any[]> => {
     return this.cachedFetch<any[]>('/api/v2/live/recently_played', { revalidate: 0 });