chain promise fix

zimui/src/components/TopicHome.vue

@@ -8,7 +8,9 @@ import TopicSectionType from '@/types/TopicSection'
 import { transformTopicSectionOrSubSectionToCardData } from '@/types/TopicCardData'
 import ToolBar from '../components/ToolBar.vue'
 import { useLoading } from 'vue-loading-overlay'
+import errimageData from '../assets/Error.jpg'
 
+const errimage = ref(errimageData)
 const main = useMainStore()
 
 const props = defineProps({
@@ -39,7 +41,7 @@ const fetchData = async function () {
       topic.value = resp
     }
   } catch (error) {
-    //console.error('Error fetching topic:', error)
+    main.setErrorMessage('An error occured, Please try again.')
   }finally {
     loader.hide()
     dataLoaded.value = true
@@ -91,9 +93,10 @@ const goToPreviousPage = () => {
 </script>
 
 <template>
-    <div v-if="main.errorMessage" class="error-message" >
-      Error: {{ main.errorMessage }}
-    </div>
+  <div v-if="main.errorMessage" class="error-container">
+    <img :src="errimage" class="error-image" />
+    <p class="error-text">{{ main.errorMessage }}</p>
+  </div>
   <div v-else-if="topic" class="content">
     <nav
       class="navbar navbar px-0 channel-navbar navbar-light fixed-top navbar-expand shadow"
@@ -279,9 +282,20 @@ footer {
   text-align: center;
 }
 
-.error-message {
-  color: red;
-  margin-top: 10px;
+.error-container {
+  text-align: center;
+  padding: 20px;
+}
+
+.error-image {
+  width: 300px;
+  margin-bottom: 20px; 
+}
+
+.error-text {
+  color: black; /* Black text color */
+  font-size: 16px;
 }
 
+
 </style>

zimui/src/pages/HomePage.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { onMounted, toRef, Ref, ref, watch} from 'vue'
 import { RouteParams, useRoute } from 'vue-router'
+import errimageData from '../assets/Error.jpg'
+
+const errimage = ref(errimageData)
 
 import { useMainStore } from '../stores/main'
 const main = useMainStore()
@@ -25,29 +28,38 @@ onMounted(async () => {
       topic.value = main.channelData.rootSlug
     }
   } catch (error) {
-    //console.error('Error fetching channel data:', error)
-    // Handle error here, for example, show an error message to the user
+    main.setErrorMessage('An error occured, Please try again.')
   }
 })
 
 import TopicHome from '../components/TopicHome.vue'
 </script>
 
 <template>
-    <div v-if="main.errorMessage" class="error-message">
-      {{ main.errorMessage }}
-    </div>
-
-    <div v-else class="d-flex flex-column h-100">
+  <div v-if="main.errorMessage" class="error-container">
+    <img :src="errimage" class="error-image" />
+    <p class="error-text">{{ main.errorMessage }}</p>
+  </div>
+  <div v-else class="d-flex flex-column h-100">
     <div class="flex-fill flex-shrink-0">
       <TopicHome v-if="main.channelData" :slug="topic" />
     </div>
-    </div>
+  </div>
 </template>
 
 <style scoped>
-.error-message {
-  color: red;
-  margin-top: 10px;
+.error-container {
+  text-align: center;
+  padding: 20px;
+}
+
+.error-image {
+  width: 300px;
+  margin-bottom: 20px; 
+}
+
+.error-text {
+  color: black; /* Black text color */
+  font-size: 16px;
 }
 </style>

zimui/src/stores/main.ts

@@ -7,57 +7,57 @@ export type RootState = {
   channelData: Channel | null
   isLoading: boolean
   errorMessage: string
-  error: AxiosError<object> | null
 }
 export const useMainStore = defineStore('main', {
   state: () =>
     ({
       channelData: null,
       isLoading: false,
       errorMessage: '',
-      error: null,
     }) as RootState,
   getters: {},
   actions: {
     async fetchChannel() {
       this.isLoading = true
       this.errorMessage = ''
-      try {
-        const response = await axios.get('./channel.json')
-        this.isLoading = false
-        this.channelData = response.data as Channel
-      } catch (error) {
-        if (error instanceof AxiosError) {
-          this.isLoading = false
-          this.channelData = null
-          this.handleAxiosError(error);
-        }
+
+      return axios
+        .get('./channel.json')
+        .then((response) => {
+          this.isLoading = false;
+          this.channelData = response.data as Channel;
+          return this.channelData; // Return the fetched channel data
+        })
+        .catch((error) => {
+            this.isLoading = false
+            this.channelData = null
+          if (error instanceof AxiosError) {
+            this.handleAxiosError(error);
+          }
           else {
             this.errorMessage = 'Failed to load channel data';
           }
-          this.error = error as AxiosError<object> // Set axios error to store
-        return null
-        }
+        });
     },
     async fetchTopic(slug: string) {
       this.isLoading = true
       this.errorMessage = ''
-      try {
-        const response = await axios.get('./topics/' + slug + '.json')
-        this.isLoading = false
-        return response.data as Topic
-      } catch (error: unknown) {
-        if (error instanceof AxiosError) {
-          this.isLoading = false
-          this.channelData = null
-          this.handleAxiosError(error);
-        }
-          else{
+      return axios
+        .get('./topics/' + slug + '.json')
+        .then((response) => {
+          this.isLoading = false;
+          return response.data as Topic;
+        })
+        .catch((error) => {
+            this.isLoading = false
+            this.channelData = null
+          if (error instanceof AxiosError) {
+            this.handleAxiosError(error);
+          }
+          else {
             this.errorMessage = 'Failed to load node ' + slug + ' data';
           }
-          this.error = error as AxiosError<object> // Set axios error to store
-          return null
-        }
+        });
     },
     handleAxiosError(error: AxiosError<object>) {
       this.isLoading = false;
@@ -82,8 +82,10 @@ export const useMainStore = defineStore('main', {
         } else {
           this.errorMessage = 'An Unexpected error occured';
         }
-        this.error = error;
       }
     },
+    setErrorMessage(message: string) {
+      this.errorMessage = message
+    },
   },
 })