56

Author: kossiecoder

db.json

@@ -61,7 +61,7 @@
       "id": 18
     },
     {
-      "subject": "new todo222",
+      "subject": "new todo2222",
       "completed": true,
       "id": 21
     }

src/composables/toast.js

@@ -0,0 +1,27 @@
+import { ref, onUnmounted } from 'vue';
+export const useToast = () => {
+    const toastMessage = ref('');
+    const toastAlertType = ref('');
+    const showToast = ref(false); 
+    const timeout = ref(null);
+    const triggerToast = (message, type = 'success') => {
+          toastMessage.value = message;
+          toastAlertType.value = type;
+          showToast.value = true;
+          timeout.value = setTimeout(() => {
+            toastMessage.value = '';
+            toastAlertType.value = '';
+            showToast.value = false;
+          }, 1000)
+        }
+
+    onUnmounted(() => {
+        clearTimeout(timeout.value);
+    })
+    return {
+        toastMessage,
+        toastAlertType,
+        showToast,
+        triggerToast
+    }
+}

src/pages/todos/_id.vue

@@ -59,9 +59,10 @@
 <script>
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
-import { ref, computed, onUnmounted  } from 'vue';
+import { ref, computed  } from 'vue';
 import _ from 'lodash';
 import Toast from '@/components/Toast.vue';
+import { useToast } from '@/composables/toast';
 
 export default {
   components: {
@@ -73,15 +74,14 @@ export default {
         const todo = ref(null);
         const originalTodo = ref(null);
         const loading = ref(true);
-        const showToast = ref(false);
-        const toastMessage = ref('');
-        const toastAlertType = ref('');
-        const timeout = ref(null);
-        const todoId = route.params.id
+        const {
+              toastMessage,
+              toastAlertType,
+              showToast,
+              triggerToast
+            } = useToast();
 
-        onUnmounted(() => {
-          clearTimeout(timeout.value);
-        })
+        const todoId = route.params.id        
 
         const getTodo = async () => {
           try {
@@ -95,7 +95,7 @@ export default {
             loading.value = false;
           } catch (error) {
             console.log(error);
-            tiggerToast('Something went wrong', 'danger');
+            triggerToast('Something went wrong', 'danger');
           }
         };
 
@@ -115,16 +115,7 @@ export default {
 
         getTodo();
 
-        const tiggerToast = (message, type = 'success') => {
-          toastMessage.value = message;
-          toastAlertType.value = type;
-          showToast.value = true;
-          timeout.value = setTimeout(() => {
-            toastMessage.value = '';
-            toastAlertType.value = '';
-            showToast.value = false;
-          }, 5000)
-        }
+        
 
         const onSave = async () => {
           try {
@@ -136,10 +127,10 @@ export default {
             });
 
             originalTodo.value = {...res.data};
-            tiggerToast('Successfully saved!');
+            triggerToast('Successfully saved!');
           } catch (error) {
             console.log(error);
-            tiggerToast('Something went wrong', 'danger')
+            triggerToast('Something went wrong', 'danger')
           }
         };
 

src/pages/todos/index.vue

@@ -42,18 +42,26 @@
       </ul>
     </nav>
   </div>
+  <Toast 
+    v-if="showToast" 
+    :message="toastMessage"
+    :type="toastAlertType"
+  />
 </template>
 
 <script>
 import { ref, computed, watch } from 'vue';
 import TodoSimpleForm from '@/components/TodoSimpleForm.vue';
 import TodoList from '@/components/TodoList.vue';
 import axios from 'axios';
+import Toast from '@/components/Toast.vue';
+import { useToast } from '@/composables/toast';
 
 export default {
   components: {
     TodoSimpleForm,
     TodoList,
+    Toast,
   },
   setup() {
     const todos = ref([]);
@@ -66,6 +74,13 @@ export default {
       return Math.ceil(numberOfTodos.value/limit);
     });
 
+    const {
+      toastMessage,
+      toastAlertType,
+      showToast,
+      triggerToast
+    } = useToast();
+
     const getTodos = async (page = currentPage.value) => {
       currentPage.value = page;
       try {
@@ -77,6 +92,7 @@ export default {
       } catch (err) {
         console.log(err);
         error.value = 'Something went wrong.';
+        triggerToast('Something went wrong', 'danger')
       }    
     };
 
@@ -95,6 +111,7 @@ export default {
       } catch (err) {
         console.log(err);
         error.value = 'Something went wrong.';
+        triggerToast('Something went wrong', 'danger')
       }
     };
 
@@ -108,6 +125,7 @@ export default {
       } catch (err) {
         console.log(err);
         error.value = 'Something went wrong.';
+        triggerToast('Something went wrong', 'danger')
       }
     };
 
@@ -123,6 +141,7 @@ export default {
       } catch (err) {
         console.log(err);
         error.value = 'Something went wrong.';
+        triggerToast('Something went wrong', 'danger')
       }
       
     };
@@ -151,6 +170,9 @@ export default {
       numberOfPages,
       currentPage,
       getTodos,
+      toastMessage,
+      toastAlertType,
+      showToast,
     };
   }
 }