From 786524bd8a1940a2d4c0410283c8d76d6d40c537 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Sun, 3 Nov 2024 19:14:47 +0100
Subject: [PATCH] fix: :technologist: use watch mode

---
 frontend/components/Navbar.vue |  2 +-
 frontend/main.ts               |  9 ---------
 frontend/views/Containers.vue  | 18 ++++++++++--------
 package.json                   |  5 ++---
 4 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/frontend/components/Navbar.vue b/frontend/components/Navbar.vue
index 371e335..74af442 100644
--- a/frontend/components/Navbar.vue
+++ b/frontend/components/Navbar.vue
@@ -12,7 +12,7 @@
     </div>
     <div class="navbar-menu">
       <div class="navbar-start">
-        <a class="navbar-item" :href="`${$api}/docs`">
+        <a class="navbar-item" href="/docs">
           <span class="icon-text">
             <span class="icon">
               <i class="fa fa-book"></i>
diff --git a/frontend/main.ts b/frontend/main.ts
index 6385a27..7d55fea 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -4,15 +4,6 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router'
 
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $api: string
-  }
-}
-
 const app = createApp(App)
-app.config.globalProperties.$api = import.meta.env.PROD
-  ? `${import.meta.env.BASE_URL}api`
-  : `http://localhost:${import.meta.env.API_PORT ?? 8000}/api`
 app.use(router)
 app.mount('#app')
diff --git a/frontend/views/Containers.vue b/frontend/views/Containers.vue
index 9aff5c2..8125eca 100644
--- a/frontend/views/Containers.vue
+++ b/frontend/views/Containers.vue
@@ -1,18 +1,18 @@
 <template>
   <Loading class="container" :loading="loading">
-    <Message v-if="error" type="danger">Error loading containers</Message>
+    <Message v-if="error" type="danger">{{ error }}</Message>
     <ul v-if="!loading && !error">
-      <li v-for="container in containers" :key="container.name">
-        {{ container.name }}
+      <li v-for="container in containers" :key="container">
+        {{ container }}
       </li>
     </ul>
   </Loading>
 </template>
 
 <script lang="ts">
+import axios, { AxiosError } from 'axios'
 import Loading from '@/components/Loading.vue'
 import Message from '@/components/Message.vue'
-import axios from 'axios'
 
 export default {
   name: 'Containers',
@@ -22,17 +22,19 @@ export default {
   },
   data() {
     return {
-      containers: [],
-      error: false,
+      containers: [] as string[],
+      error: '',
       loading: true,
     }
   },
   async mounted() {
     try {
-      this.containers = await axios.get(`${this.$api}/api/containers`)
+      const response = await axios.get<string[]>('/api/containers')
+      this.containers = response.data
     } catch (error) {
       console.error(error)
-      this.error = true
+      this.error =
+        error instanceof AxiosError ? error.message : 'Error loading containers'
     } finally {
       this.loading = false
     }
diff --git a/package.json b/package.json
index c26c83e..e715cb0 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "preview": "vite preview",
-    "build-only": "vite build",
+    "build": "vite build",
+    "watch": "vite build --watch",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix"
   },