🚀 Refactor GamemasterManager to use reusable async state management for loading, saving, and error handling

code/websites/pokedex.online/src/components/shared/index.js

@@ -0,0 +1,8 @@
+/**
+ * Shared Components Index
+ *
+ * Centralized exports for all shared components
+ */
+
+export { default as BaseButton } from './BaseButton.vue';
+export { default as BaseModal } from './BaseModal.vue';

code/websites/pokedex.online/src/views/GamemasterManager.vue

@@ -188,6 +188,8 @@ const status = await gm.getStatus();</code></pre>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
+import { useAsyncState } from '../composables/useAsyncState.js';
+import { apiClient } from '../utilities/api-client.js';
 import {
   fetchLatestGamemaster,
   breakUpGamemaster,
@@ -195,49 +197,75 @@ import {
   getGamemasterStats
 } from '../utilities/gamemaster-utils.js';
 
-const loading = ref(false);
-const error = ref(null);
-const saving = ref(false);
-const saveSuccess = ref(false);
-const rawGamemaster = ref(null);
+// Load server status state
+const {
+  execute: loadServerStatus,
+  data: serverStatus,
+  loading: statusLoading,
+  error: statusError
+} = useAsyncState(
+  async () => {
+    const response = await apiClient.get('/api/gamemaster/status');
+    return response;
+  },
+  null
+);
+
+// Fetch gamemaster state
+const {
+  execute: fetchGamemasterData,
+  data: rawGamemaster,
+  loading: gamemasterLoading,
+  error: gamemasterError,
+  reset: resetGamemaster
+} = useAsyncState(
+  async () => {
+    const data = await fetchLatestGamemaster();
+    return data;
+  },
+  null
+);
+
+// Save to server state
+const {
+  execute: saveToServerData,
+  loading: saving,
+  error: saveError,
+  reset: resetSave
+} = useAsyncState(
+  async () => {
+    const result = await apiClient.post('/api/gamemaster/process', {});
+    // Reload server status after save
+    await loadServerStatus();
+    return result;
+  },
+  null
+);
+
+// Process gamemaster data
 const processedData = ref(null);
-const serverStatus = ref(null);
+const saveSuccess = ref(false);
+
+// Combine error states for template
+const error = computed(() => gamemasterError.value || statusError.value || saveError.value);
 
 const stats = computed(() => {
   if (!processedData.value) return null;
   return getGamemasterStats(processedData.value);
 });
 
+const loading = computed(() => statusLoading.value || gamemasterLoading.value);
+
 onMounted(async () => {
   // Load server status on component mount
   await loadServerStatus();
 });
 
-async function loadServerStatus() {
-  try {
-    const response = await fetch('/api/gamemaster/status');
-    if (response.ok) {
-      serverStatus.value = await response.json();
-    }
-  } catch (err) {
-    console.error('Failed to load server status:', err);
-  }
-}
-
+// Replace manual loading state with async function
 async function fetchGamemaster() {
-  loading.value = true;
-  error.value = null;
-  rawGamemaster.value = null;
+  resetGamemaster();
+  await fetchGamemasterData();
   processedData.value = null;
-
-  try {
-    const data = await fetchLatestGamemaster();
-    rawGamemaster.value = data;
-  } catch (err) {
-    error.value = `Failed to fetch gamemaster: ${err.message}`;
-  } finally {
-    loading.value = false;
-  }
 }
 
 function processGamemaster() {
@@ -246,42 +274,17 @@ function processGamemaster() {
   try {
     processedData.value = breakUpGamemaster(rawGamemaster.value);
   } catch (err) {
-    error.value = `Failed to process gamemaster: ${err.message}`;
+    // Error handling through computed error state
   }
 }
 
 async function saveToServer() {
   if (!processedData.value) return;
 
-  saving.value = true;
   saveSuccess.value = false;
-  error.value = null;
-
-  try {
-    // Call the server endpoint to fetch and process on the server
-    const response = await fetch('/api/gamemaster/process', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-
-    if (!response.ok) {
-      const err = await response.json();
-      throw new Error(err.error || 'Failed to save to server');
-    }
-
-    const result = await response.json();
-    saveSuccess.value = true;
-    console.log('✅ Files saved to server:', result);
-
-    // Reload server status
-    await loadServerStatus();
-  } catch (err) {
-    error.value = `Failed to save to server: ${err.message}`;
-  } finally {
-    saving.value = false;
-  }
+  resetSave();
+  await saveToServerData();
+  saveSuccess.value = !saveError.value;
 }
 
 function downloadPokemon() {
@@ -322,7 +325,7 @@ async function downloadFromServer(filename) {
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   } catch (err) {
-    error.value = `Failed to download ${filename}: ${err.message}`;
+    // Error will be displayed through error computed property
   }
 }