74

Author: kossiecoder

db.json

@@ -56,6 +56,48 @@
       "completed": false,
       "body": "asdf",
       "id": 17
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 18
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 19
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 20
+    },
+    {
+      "subject": "test",
+      "completed": false,
+      "body": "test",
+      "id": 21
+    },
+    {
+      "subject": "test",
+      "completed": false,
+      "body": "test",
+      "id": 22
+    },
+    {
+      "subject": "test1",
+      "completed": false,
+      "body": "test1",
+      "id": 23
+    },
+    {
+      "subject": "adsf",
+      "completed": false,
+      "body": "asdf",
+      "id": 24
     }
   ]
 }

src/App.vue

@@ -15,10 +15,36 @@
   <div class="container">
       <router-view/>
   </div>
+  <Toast 
+    v-if="showToast" 
+    :message="toastMessage"
+    :type="toastAlertType"
+  />
 </template>
 
 <script>
+import Toast from '@/components/Toast.vue';
+import { useToast } from '@/composables/toast';
+
 export default {
+  components: {
+    Toast
+  },
+  setup() {
+    const {
+      toastMessage,
+      toastAlertType,
+      showToast,
+      triggerToast
+    } = useToast();
+
+    return {
+      toastMessage,
+      toastAlertType,
+      showToast,
+      triggerToast
+    }
+  }
 }
 </script>
 

src/components/TodoForm.vue

@@ -160,6 +160,12 @@ export default {
             
             const message = 'Successfully ' + (props.editing ? 'Updated!' : 'Created!');
             triggerToast(message);
+
+            if (!props.editing) {
+              router.push({
+                name: 'Todos'
+              })
+            }
           } catch (error) {
             console.log(error);
             triggerToast('Something went wrong', 'danger')