From f324b3c202a212a1f30e719f674722f4354b1362 Mon Sep 17 00:00:00 2001
From: Sudarshan-21 <slbondge@gmail.com>
Date: Mon, 15 Apr 2024 22:56:14 +0530
Subject: [PATCH] chain promise fix

---
 zimui/src/assets/Error.jpg         | Bin 0 -> 4165 bytes
 zimui/src/components/TopicHome.vue |  28 +++++++++----
 zimui/src/pages/HomePage.vue       |  34 +++++++++++-----
 zimui/src/stores/main.ts           |  62 +++++++++++++++--------------
 4 files changed, 76 insertions(+), 48 deletions(-)
 create mode 100644 zimui/src/assets/Error.jpg

diff --git a/zimui/src/assets/Error.jpg b/zimui/src/assets/Error.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..336f4f37cda1ac477b41407df3a59693124cf001
GIT binary patch
literal 4165
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
STftgs=Zc8$!gep5&He}NDkfF{

literal 0
HcmV?d00001

diff --git a/zimui/src/components/TopicHome.vue b/zimui/src/components/TopicHome.vue
index 3c94d97..343f776 100644
--- a/zimui/src/components/TopicHome.vue
+++ b/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>
diff --git a/zimui/src/pages/HomePage.vue b/zimui/src/pages/HomePage.vue
index 4acc6ac..859ca53 100644
--- a/zimui/src/pages/HomePage.vue
+++ b/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,8 +28,7 @@ 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.')
   }
 })
 
@@ -34,20 +36,30 @@ 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>
diff --git a/zimui/src/stores/main.ts b/zimui/src/stores/main.ts
index 31bac78..149dbf1 100644
--- a/zimui/src/stores/main.ts
+++ b/zimui/src/stores/main.ts
@@ -7,7 +7,6 @@ export type RootState = {
   channelData: Channel | null
   isLoading: boolean
   errorMessage: string
-  error: AxiosError<object> | null
 }
 export const useMainStore = defineStore('main', {
   state: () =>
@@ -15,49 +14,50 @@ export const useMainStore = defineStore('main', {
       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
+    },
   },
 })