fix(front): fix duration (no uploads) errors for fakedata

front/src/components/library/TrackBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Track, Artist, Library } from '~/types'
+import type { Operations } from '~/generated/types'
 
 import { momentFormat } from '~/utils/filters'
 import { computed, ref, watch } from 'vue'
@@ -79,7 +80,7 @@ const attributedToUrl = computed(() => router.resolve({
 
 const artistCredit = track.value?.artist_credit
 
-const totalDuration = computed(() => track.value?.uploads[0]?.duration ?? 0)
+const totalDuration = computed(() =>  track.value?.uploads?.[0]?.duration ?? 0)
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -88,14 +89,26 @@ const labels = computed(() => ({
   more: t('components.library.TrackBase.button.more')
 }))
 
+type TrackResponse = Operations['get_tracks_2']['responses']['200']['content']['application/json']
+type TrackParams = Operations['get_tracks_2']['parameters']['query']
+
+type ArtistResponse = Operations['get_artists_2']['responses']['200']['content']['application/json']
+
+const params: TrackParams = {
+  refresh: 'true'
+  // TypeScript will now show all available parameters with their types
+}
+
 const isLoading = ref(false)
 const fetchData = async () => {
   isLoading.value = true
   logger.debug(`Fetching track "${props.id}"`)
   try {
-    const trackResponse = await axios.get(`tracks/${props.id}/`, { params: { refresh: 'true' } })
+    const trackResponse = await axios.get<TrackResponse>(`tracks/${props.id}/`, { params: { refresh: 'true' } })
     track.value = trackResponse.data
-    const artistResponse = await axios.get(`artists/${trackResponse.data.artist.id}/`)
+    const artistResponse = await axios.get<ArtistResponse>(
+      `artists/${trackResponse.data.artist_credit[0].artist.id}/`
+    )
     artist.value = artistResponse.data
   } catch (error) {
     useErrorHandler(error as Error)
@@ -175,14 +188,14 @@ watch(showDeleteModal, (newValue) => {
           :artist-credit="track.artist_credit"
         />
         <div class="meta">
-            <span>{{ t('components.library.TrackBase.title') }}</span>
-            <i class="bi bi-dot" />
-            <span>{{ track.album.title }}</span>
-            <i v-if="totalDuration > 0" class="bi bi-dot" />
-            <human-duration
-              v-if="totalDuration > 0"
-              :duration="totalDuration"
-            />
+          <span>{{ t('components.library.TrackBase.title') }}</span>
+          <i class="bi bi-dot" />
+          <span>{{ track.album.title }}</span>
+          <i v-if="totalDuration > 0" class="bi bi-dot" />
+          <human-duration
+            v-if="totalDuration > 0"
+            :duration="totalDuration"
+          />
         </div>
 
         <Layout flex>