Rename SnapshotTrackTable to SnapshotTrackEntries

components/snapshot/TrackEntries.vue

@@ -25,17 +25,17 @@ const dateFormatter = new Intl.DateTimeFormat('en-US', {
 const formatDate = (date: string | null) =>
   date ? dateFormatter.format(new Date(date)) : 'N/A';
 
-const displayRetentionText = (retention: number) => {
+const formatRetentionText = (retention: number) => {
   const durationObject = intervalToDateFnsDuration({
     start: 0,
     end: retention
   });
-  const displayText = dateFnsFormatDuration(durationObject, {
+  const formattedText = dateFnsFormatDuration(durationObject, {
     format: ['years', 'months', 'days'],
     delimiter: ', '
   });
 
-  return displayText;
+  return formattedText;
 };
 </script>
 
@@ -60,16 +60,14 @@ const displayRetentionText = (retention: number) => {
     </Column>
     <Column field="artists" header="Artist(s)">
       <template #body="{ data: track }">
-        <div>
-          <div v-for="(artist, index) of track.artists" :key="artist.url">
-            <NuxtLink :to="artist.url" target="_blank">
-              {{ artist.name }}
-            </NuxtLink>
-            <span v-if="index !== track.artists.length - 1" class="md:mr-1"
-              >,</span
-            >
-          </div>
-        </div>
+        <span v-for="(artist, index) of track.artists" :key="artist.url">
+          <NuxtLink :to="artist.url" target="_blank">
+            {{ artist.name }}
+          </NuxtLink>
+          <span v-if="index !== track.artists.length - 1" class="md:mr-1"
+            >,</span
+          >
+        </span>
       </template>
     </Column>
     <Column field="album.name" header="Album">
@@ -94,23 +92,17 @@ const displayRetentionText = (retention: number) => {
     <template v-else-if="props.page === 'stats'">
       <Column field="date_added" header="Date added">
         <template #body="{ data: track }">
-          <span>
-            {{ formatDate(track.date_added) }}
-          </span>
+          {{ formatDate(track.date_added) }}
         </template>
       </Column>
       <Column field="date_removed" header="Date removed">
         <template #body="{ data: track }">
-          <span>
-            {{ formatDate(track.date_removed) }}
-          </span>
+          {{ formatDate(track.date_removed) }}
         </template>
       </Column>
       <Column field="retention" header="Retention">
         <template #body="{ data: track }">
-          <span>
-            {{ displayRetentionText(track.retention) }}
-          </span>
+          {{ formatRetentionText(track.retention) }}
         </template>
       </Column>
     </template>

components/stats/TrackRetention.vue

@@ -2,6 +2,7 @@
 import { $fetch } from 'ohmyfetch';
 
 import { Cumulative } from '~~/models/cumulative';
+import { Track } from '~~/models/track';
 
 const route = useRoute();
 const playlistId = route.params.playlistId as string;
@@ -17,17 +18,19 @@ const {
       `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/cumulative/${playlistId}.json`,
       { parseResponse: JSON.parse }
     );
-    const now = new Date().toISOString();
+    const now = Date.now();
 
     return tracks
       .map((track) => {
         track.retention =
-          Date.parse(track.date_removed || now) - Date.parse(track.date_added);
+          (Date.parse(track.date_removed) || now) -
+          Date.parse(track.date_added);
 
         return track;
       })
       .sort((a, b) => b.retention - a.retention);
-  }
+  },
+  { default: () => [] as Track[] }
 );
 </script>
 
@@ -37,13 +40,13 @@ const {
       <p v-if="error">
         Something went wrong while fetching the longest standing tracks
       </p>
-      <TrackEntriesTable :loading="pending" :tracks="tracks" page="stats" />
+      <SnapshotTrackEntries :loading="pending" :tracks="tracks" page="stats" />
     </ClientOnly>
   </NuxtLayout>
 </template>
 
 <style scoped>
-:deep(div.p-datatable) {
+/* :deep(div.p-datatable) {
   width: 100%;
   padding: 0 1rem;
 }
@@ -52,5 +55,5 @@ const {
   :deep(div.p-datatable) {
     padding: 0 8rem;
   }
-}
+} */
 </style>

pages/playlists/[playlistId]/snapshots/show/[commitSha].vue

@@ -15,7 +15,10 @@ const {
 } = useFetch<Playlist>(
   () =>
     `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/${commitSha}/playlists/pretty/${playlistId}.json`,
-  { key: `snapshot-${commitSha}`, parseResponse: JSON.parse }
+  {
+    key: `snapshot-${commitSha}`,
+    parseResponse: JSON.parse
+  }
 );
 
 const totalTrackDuration = computed(() =>
@@ -53,7 +56,7 @@ const humanizeNumber = (num: number) => numberFormatter.format(num);
         </ul>
       </div>
       <ClientOnly>
-        <TrackEntriesTable
+        <SnapshotTrackEntries
           :loading="pending"
           :tracks="snapshot.tracks"
           page="snapshot"