Refactor CurrentlyBuilding to use centralized data store

Replaced local state and fetching logic with a Vuex-like data store for better state management. Updated import paths, removed redundant code, and ensured reactive updates using computed properties and watchers. This enhances maintainability and reduces code duplication.

frontend/src/components/CurrentlyBuilding.vue

@@ -74,138 +74,84 @@
       </v-list>
       <v-sheet class="ps-4" color="transparent" rounded width="100%">
         <h4 class="mb-2 font-weight-light text-grey">Queued</h4>
-        <QueuedPackagesList :packages="packages.queued" />
+        <queued-packages-list :packages="packages.queued" />
       </v-sheet>
     </v-card-text>
   </v-card>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import type { Packages } from '@/types/Packages'
-import { Package } from '@/types/Package'
 import { useDisplay } from 'vuetify'
-import QueuedPackagesList from './QueuedPackagesList.vue'
+import { useDataStore } from '@/stores/dataStore'
-
+import QueuedPackagesList from '@/components/CurrentlyBuilding/QueuedPackagesList.vue'
-const BASE_URL = 'https://api.alhp.dev/packages'
-const UPDATE_INTERVAL_MINUTES = 5
 
 const { mobile } = useDisplay()
-const lastUpdatedTime = ref(0)
+const dataStore = useDataStore()
 const lastUpdatedSeconds = ref(0)
-const updateFailed = ref(false)
 const rtf = new Intl.RelativeTimeFormat('en', {
   localeMatcher: 'best fit',
   numeric: 'always',
   style: 'long'
 })
 
-const packageCount = ref({
+// Computed properties to access store data
-  total: 0,
+const updateFailed = computed(() => !!dataStore.error)
-  building: 0,
+
-  built: 0,
+const packageCount = computed(() => {
-  queued: 0
+  const stats = dataStore.getPackageStats() || { total: 0, building: 0, built: 0, queued: 0 }
+  return {
+    total: stats.total || 0,
+    building: stats.building || 0,
+    built: stats.built || 0,
+    queued: stats.queued || 0
+  }
 })
 
-const packages = ref<{
+const packages = computed(() => {
-  built: Array<Package>
+  return {
-  building: Array<Package>
+    building: dataStore.getPackagesByStatus('building').packages || [],
-  queued: Array<Package>
+    queued: dataStore.getPackagesByStatus('queued').packages || [],
-}>({
+    built: dataStore.getPackagesByStatus('built').packages || []
-  built: [],
+  }
-  building: [],
-  queued: []
 })
 
-let timerInterval: NodeJS.Timeout // Declare timerInterval outside the function
+// Set up and clean up the timer for "last updated" display
+let updateTimer: number | undefined
 
-const fetchPackages = async (offset: string, status?: string) => {
+const resetLastUpdatedCounter = () => {
-  let url = `${BASE_URL}?limit=0&offset=${offset}`
+  lastUpdatedSeconds.value = 0
-  if (status) {
-    url += `&status=${status}`
-  }
-
-  try {
-    const response = await fetch(url, { method: 'GET' })
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-    const json: Packages = await response.json()
-
-    lastUpdatedTime.value = Date.now()
-    lastUpdatedSeconds.value = 0 // Reset seconds counter
-    updateFailed.value = false
-
-    return json
-  } catch (error) {
-    console.error('Error fetching packages:', error)
-    updateFailed.value = true
-    return null
-  }
 }
 
-const getTotalPackages = async () => {
+const startLastUpdatedTimer = () => {
-  const json = await fetchPackages('1')
+  updateTimer = window.setInterval(() => {
-  if (json) {
+    lastUpdatedSeconds.value++
-    packageCount.value.total = json.total
+  }, 1000)
+}
+
+watch(
+  () => dataStore.loading,
+  (isLoading) => {
+    if (!isLoading) {
+      resetLastUpdatedCounter()
+
+      console.log(updateFailed.value)
+      console.log(packageCount.value)
+      console.log(packages.value)
+      console.log(updateTimer)
     }
-}
-
-const getBuiltPackages = async () => {
-  const json = await fetchPackages('0', 'built')
-  if (json) {
-    packageCount.value.built = json.total
-    packages.value.built = json.packages
   }
-}
+)
-
-const getBuildingPackages = async () => {
-  const json = await fetchPackages('0', 'building')
-  if (json) {
-    packageCount.value.building = json.total
-    packages.value.building = json.packages
-  }
-}
-
-const getQueuedPackages = async () => {
-  const json = await fetchPackages('0', 'queued')
-  if (json) {
-    packageCount.value.queued = json.total
-    packages.value.queued = json.packages
-  }
-}
-
-// Function to start the timer
-const startTimer = () => {
-  stopTimer() // Clear any existing timer
-  getTotalPackages()
-  getBuiltPackages()
-  getBuildingPackages()
-  getQueuedPackages()
-  timerInterval = setInterval(
-    () => {
-      getTotalPackages()
-      getBuiltPackages()
-      getBuildingPackages()
-      getQueuedPackages()
-    },
-    UPDATE_INTERVAL_MINUTES * 60 * 1000
-  )
-}
-
-// Function to stop the timer
-const stopTimer = () => {
-  clearInterval(timerInterval)
-}
 
 onMounted(() => {
-  startTimer() // Start the timer when the component is mounted
+  startLastUpdatedTimer()
 })
 
-// Update seconds counter every second
+onUnmounted(() => {
-setInterval(() => {
+  if (updateTimer) {
-  lastUpdatedSeconds.value++
+    clearInterval(updateTimer)
-}, 1000)
+  }
+})
 </script>
 
 <style lang="scss">