chore: Refactor tracklist pages to use API

kylewelsby · Jul 22, 2024 · 24c10b8 · 24c10b8
1 parent a44969d
commit 24c10b8
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 104 deletions.
diff --git a/components/Events/EventsListItem.vue b/components/Events/EventsListItem.vue
@@ -18,11 +18,11 @@
       ) {{ event.title }}
       div(
         class="text-gray-300 truncate mb-2"
-      ) {{ event.chapters.map((c) => c.title).join(' / ') }}
+      ) {{ (event.chapters ||[]).map((c) => c.title).join(' / ') }}
       div(
         class="text-sm hidden"
         v-if="!hideDate"
-      ) {{ event.published_at | formattedDate }}
+      ) {{ (event.publishedAt || event.pulished_at) | formattedDate }}
       SiteButton(
         class="mt-4"
         :href="href"

diff --git a/components/Home/HomeEvents.vue b/components/Home/HomeEvents.vue
@@ -33,9 +33,9 @@
         class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-20"
       )
         EventsListItem(
-          v-for="event of events"
+          v-for="event of sortedEvents"
           :event="event"
-          :key="event.id"
+          :key="event.slug"
         )
 </template>
 <script>
@@ -51,12 +51,12 @@ export default {
       return this.events
         .slice(0)
         .sort((a, b) => {
-          if (a.published_at > b.published_at) return 1
-          if (a.published_at < b.published_at) return -1
+          if (a.publishedAt > b.publishedAt) return 1
+          if (a.publishedAt < b.publishedAt) return -1
           return 0
         })
         .filter((e) => {
-          return Date.parse(e.published_at) >= new Date()
+          return Date.parse(e.publishedAt) >= new Date()
         })
         .slice(0, 2)
     },

diff --git a/components/Home/HomeShows.vue b/components/Home/HomeShows.vue
@@ -102,7 +102,7 @@ export default {
       if (this.latestShow.published_at) {
         return new Intl.DateTimeFormat('en-US', {
           dateStyle: 'long',
-        }).format(Date.parse(this.latestShow.published_at))
+        }).format(Date.parse(this.latestShow.publishedAt || this.latestShow.published_at))
       } else {
         return 'INVALID DATE'
       }

diff --git a/components/Home/HomeSupply.vue b/components/Home/HomeSupply.vue
@@ -41,7 +41,7 @@
           target="_blank"
         )
           Artwork(
-            :src="latestItem.artwork"
+            src="/soulection/supply/soulection600capsule.png?tr=fo-auto,c-maintain-ratio,dpr-auto,ar-1:1,w-360,h-360,q-80,c-maintain_ratio"
             :size="360"
             class="shadow-lg rounded-2xl"
           )
@@ -50,35 +50,11 @@
         )
           h4(
             class="mb-4 font-bold text-2xl"
-          ) {{ latestItem.title }}
+          ) Shop Supply
               div(
               class="text-gray-400 text-sm font-light"
               ) Live Now
-          //- div(
-          //-   class="mb-3 font-light text-gray-400"
-          //- ) {{ formattedDate }}
           SiteButton(
             href="https://soulection.supply/"
           ) Shop Supply
 </template>
-<script>
-export default {
-  props: {
-    latestItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    formattedDate() {
-      if (this.latestItem.published_at) {
-        return new Intl.DateTimeFormat('en-US', {
-          dateStyle: 'long',
-        }).format(Date.parse(this.latestItem.published_at))
-      } else {
-        return 'INVALID DATE'
-      }
-    },
-  },
-}
-</script>
diff --git a/pages/index.vue b/pages/index.vue
@@ -4,23 +4,14 @@
   )
     //- HomeHero
     HomeRoseGoldAddicted
-    //- HomeLatest(
-    //-   :post="post"
-    //- )
-    //- HomeSoulectionPlus
-    //- HomeForgottenGemsTour(
-    //-   :events="forgottenGemsTour"
-    //- )
+
     HomeRecords(
       :latest-album="album"
     )
-    HomeSupply(
-      :latest-item="supply"
-    )
+    HomeSupply
     HomeShows(
       :latest-show="latestShow"
     )
-    //- HomeDecadeOfLegacy
     HomeEvents(
       :events="events"
     )
@@ -29,67 +20,45 @@
 <script>
 export default {
   name: 'HomePage',
-  async asyncData({ $sentry, $supabase, $config, error, $content }) {
-    // const postResp = await $supabase
-    //   .from('posts')
-    //   .select('title, artwork, href, published_at')
-    //   .eq('profile', $config.profileId)
+  async asyncData({ $supabase, $axios, error }) {
+    const config = {
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    };
+    const {data} = await $axios.get(`https://v5-api-soulectiontracklists-com.fly.dev/shows?page=1&tags=15,19`, config);
+    const showResp = data[0];
+    const {data: eventData} = await $axios.get(`https://v5-api-soulectiontracklists-com.fly.dev/shows?page=1&tags=16&limit=9`, config);
+    // const albumResp = await $supabase
+    //   .from('albums')
+    //   .select(
+    //     `id,
+    //     title,
+    //     artwork,
+    //     published_at,
+    //     artist(
+    //       id,
+    //       title
+    //     )`
+    //   )
+    //   .eq('state', 'published')
+    //   .order('published_at', { ascending: false })
     //   .limit(1)
     //   .single()
-    const showResp = await $supabase
-      .from('shows')
-      .select('*')
-      .eq('state', 'published')
-      .eq('profile', $config.profileId)
-      .overlaps('tags', $config.homepageTagNames)
-      .order('published_at', { ascending: false })
-      .limit(1)
-      .single()
-    const eventsResp = await $supabase
-      .from('shows')
-      .select('*, chapters(*)')
-      .eq('state', 'published')
-      .eq('profile', $config.profileId)
-      .gt('published_at', new Date().toISOString())
-      .overlaps('tags', [16])
-      .order('published_at', { ascending: true })
-      .limit(9)
-    const forgottenGemsTourResp = await $supabase
-      .from('shows')
-      .select('*, chapters(*)')
-      .eq('state', 'published')
-      .eq('profile', $config.profileId)
-      .gt('published_at', new Date().toISOString())
-      .overlaps('tags', [17])
-      .order('published_at', { ascending: true })
-    const albumResp = await $supabase
-      .from('albums')
-      .select(
-        `id,
-        title,
-        artwork,
-        published_at,
-        artist(
-          id,
-          title
-        )`
-      )
-      .eq('state', 'published')
-      .order('published_at', { ascending: false })
-      .limit(1)
-      .single()
-    const supplyResp = await $supabase
-      .from('supply')
-      .select('*')
-      .eq('id', 1)
-      .single()
+    //   console.log(albumResp.data)
+      const albumData = {
+        id: 'vyw1XmSbzks',
+        title: 'Soulection Sound 002: S!RENE (Remixes)',
+        artwork: '/images/albums/_LlJxW7StcM.jpg',
+        published_at: '2024-02-28T08:18:00+00:00',
+        artist: { id: '6TVwqO9zP9Q', title: 'S!RENE' }
+      }
+
     return {
-      latestShow: showResp.data,
-      album: albumResp.data,
-      supply: supplyResp.data || {},
-      events: eventsResp.data,
-      forgottenGemsTour: forgottenGemsTourResp.data,
-      // post: postResp.data,
+      latestShow: showResp,
+      album: albumData,
+      events: eventData,
     }
   },
   head() {

diff --git a/pages/tracklists/page/_page.vue b/pages/tracklists/page/_page.vue
@@ -29,7 +29,6 @@ export default {
     };
     try {
       const {data, headers} = await $axios.get(`https://v5-api-soulectiontracklists-com.fly.dev/shows?page=${params.page}`, config);
-      console.log(parseInt(headers['total-count']))
       return {
         latestShow: data[0],
         shows: data,