From 6c997c879589c8c9a224822bc7cf96e2e00d0fc8 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 26 Mar 2022 12:36:21 +0300
Subject: [PATCH] introduce notification type

---
 src/components/Notification.vue | 19 ++++++++++++++-----
 src/stores/notification.ts      | 16 ++++++++++++----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index b21a67b..cbaca4b 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -1,15 +1,20 @@
 <template>
-  <div class="new-notification rounded" v-if="store.visible">
-    <div>{{ store.text }}</div>
+  <div
+    class="new-notif rounded"
+    :class="{ 'notif-error': notif.type == NotificationType.Error }"
+    v-if="notif.visible"
+  >
+    <div>{{ notif.text }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useNotificationStore } from "../stores/notification";
-const store = useNotificationStore();
+import { useNotificationStore, NotificationType } from "../stores/notification";
+
+const notif = useNotificationStore();
 </script>
 <style lang="scss">
-.new-notification {
+.new-notif {
   position: fixed;
   z-index: 2000;
   width: 25rem;
@@ -26,4 +31,8 @@ const store = useNotificationStore();
     text-decoration: underline;
   }
 }
+
+.notif-error {
+  background-color: $red;
+}
 </style>
diff --git a/src/stores/notification.ts b/src/stores/notification.ts
index 042c0c0..122dbd3 100644
--- a/src/stores/notification.ts
+++ b/src/stores/notification.ts
@@ -1,13 +1,21 @@
 import { defineStore } from "pinia";
 
+enum NotificationType {
+  Success,
+  Error,
+}
+
 const useNotificationStore = defineStore("notification", {
   state: () => ({
     text: "",
+    type: NotificationType.Success,
     visible: false,
   }),
   actions: {
-    showNotification(new_text: string) {
+    showNotification(new_text: string, new_type?: NotificationType) {
+      console.log(arguments);
       this.text = new_text;
+      this.type = new_type;
       this.visible = true;
 
       setTimeout(() => {
@@ -18,9 +26,9 @@ const useNotificationStore = defineStore("notification", {
 });
 
 class Notification {
-  constructor(text: string) {
-    useNotificationStore().showNotification(text);
+  constructor(text: string, type?: NotificationType) {
+    useNotificationStore().showNotification(text, type);
   }
 }
 
-export { useNotificationStore, Notification };
+export { useNotificationStore, Notification, NotificationType };