Feat/notifications

src/components/BaseComponents/NavBar.vue

@@ -34,24 +34,20 @@
                         <a data-mdb-dropdown-init class=" nav-link dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
                            role="button" data-bs-toggle="dropdown" aria-expanded="false">
                           <img src="/src/assets/icons/bell-white.svg">
-                          <span v-if="counter > 0" class="badge rounded-pill badge-notification bg-danger">{{counter}}</span>
+                          <span v-if="notificationListRef.length > 0" class="badge rounded-pill badge-notification bg-danger">{{ notificationListRef.length }}</span>
                         </a>
-                        <ul v-if="counter > 0" class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-                          <li v-for="(array,key) in notifMap" :key="key" >
-                            <div class="d-flex align-items-center">
-                              <div v-if="array[1][0] === '1'" class="flex-shrink-0">
-                                <img src="/src/assets/icons/medal.png" alt="Varslingsikon" class="notification-icon">
-                              </div>
-                              <div v-if="array[1][0] === '2'" class="flex-shrink-0">
-                                <img src="/src/assets/userprofile.png" alt="Varslingsikon" class="notification-icon">
-                              </div>
-                              <div v-if="array[1][0] === '3'" class="flex-shrink-0">
-                                <img src="/src/assets/icons/piggybank.svg" alt="Varslingsikon" class="notification-icon">
+                        <ul v-if="notificationListRef.length > 0" class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                          <li v-for="(item, index) in notificationListRef" :key="index" >
+                            <router-link :to="notificationPathMapper[String(item.notificationType)]"
+                                         class="d-flex align-items-center"
+                                         @click="readNotification(item)">
+                              <div class="flex-shrink-0">
+                                <img :src="notificationImageMapper[String(item.notificationType)]" alt="Varslingsikon" class="notification-icon">
                               </div>
                               <div class="flex-grow-1 ms-3">
-                                <router-link class="not-item dropdown-item"   :to="getPath(array[1][0])">{{array[1][1]}}</router-link>
+                                <div class="not-item dropdown-item">{{item.message}}</div>
                               </div>
-                            </div>
+                            </router-link>
                           </li>
                         </ul>
                         <ul v-else class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
@@ -101,6 +97,8 @@
 import { useRouter } from "vue-router";
 import { useUserInfoStore } from '@/stores/UserStore';
 import {onMounted, ref} from "vue";
+import { type NotificationDTO, NotificationService } from '@/api'
+import { afterWrite } from '@popperjs/core'
 
 
 
@@ -118,36 +116,43 @@ if (useUserInfoStore().profileImage !== 0) {
 
 //Hashmap that contains the path to the Badges, The Friend, The dashboard etc.
 //The key value pair is the message of the notification and the path of the route
-let notifMap = ref (new Map<number, any[]>);
+/*
 
-let notifId = ref(0);
+ */
 
 let path = ref('#');
 
-let counter = ref(0)
-
-
-/* id: 0 -> /roadmap
-   id: 1 -> /profile
-   id: 2 -> /friend
- */
-
+let notificationListRef = ref<NotificationDTO[]>([]);
 
+const notificationImageMapper: any = {
+  "FRIEND_REQUEST": "/src/assets/userprofile.png",
+  "BADGE": "/src/assets/icons/medal.png",
+  "COMPLETED_GOAL": "/src/assets/icons/piggybank.svg"
+}
 
-function getNotification(){
-  //axios call
-  let response: any = ref( ['1', 'You have recived a award for getting 200 points'])
-  let response2: any = ref( ['2', 'You have recived a friend request from Jens Aanestad'])
-  let response3: any = ref( ['3', 'You have lost your streak. Come back to try again'])
-  notifMap.value.set(notifId.value,response.value)
-  notifId.value++
-  notifMap.value.set(notifId.value,response2.value)
-  notifId.value++
-  notifMap.value.set(notifId.value,response3.value)
-  notifId.value++
+const notificationPathMapper: any = {
+  "FRIEND_REQUEST": "/friends",
+  "BADGE": "/profile",
+  "COMPLETED_GOAL": "/roadmap"
+}
+const getNotifications = async () => {
+  try {
+    notificationListRef.value = await NotificationService.getUnreadNotificationByUser()
+  } catch (error) {
+    notificationListRef.value = []
+  }
+}
 
-  counter.value = notifMap.value.size
+const readNotification = async (notification: NotificationDTO) => {
+  try {
+    notification.unread = false;
+    await NotificationService.updateNotification({requestBody: notification});
+    notificationListRef.value = await NotificationService.getUnreadNotificationByUser()
+  } catch (error) {
+    notificationListRef.value = [];
+  }
 }
+
 function toBadges(){
 
 }
@@ -220,7 +225,7 @@ function toLogout() {
     router.push('login')
 }
 onMounted(() => {
-  getNotification()
+  getNotifications()
 })
 
 </script>