feat: Reduce requests (#330)

codescalers · Jan 31, 2024 · 6376796 · 6376796
1 parent 613ec98
commit 6376796
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 28 deletions.
diff --git a/client/src/components/NotificationDetailsDialog.vue b/client/src/components/NotificationDetailsDialog.vue
@@ -69,9 +69,13 @@ export default {
       }
     )
 
-    watch(selected, (value) => {
-      notification.execute(undefined, value)
-    })
+    watch(
+      selected,
+      (value) => {
+        notification.execute(undefined, value)
+      },
+      { immediate: true }
+    )
 
     function getSections(data: any) {
       if (data.type === 'vacations')

diff --git a/client/src/components/calender.vue b/client/src/components/calender.vue
@@ -122,12 +122,7 @@ import birthdayCard from '@/components/cards/birthdayCard.vue'
 import { ref, computed, reactive, watch } from 'vue'
 import type { Api } from '@/types'
 import { useApi } from '@/hooks'
-import type {
-  EventClickArg,
-  CalendarApi,
-  DayCellMountArg,
-  CalendarOptions
-} from '@fullcalendar/core/index.js'
+import type { EventClickArg, CalendarApi, DayCellMountArg } from '@fullcalendar/core/index.js'
 import { useAsyncState } from '@vueuse/core'
 import {
   normalizeEvent,
@@ -136,6 +131,9 @@ import {
   normalizeHoliday,
   normalizedBirthday
 } from '@/utils'
+import { ApiClientBase } from '@/clients/api/base'
+
+const cached_users = new Map<number, Api.User>()
 
 export default {
   name: 'calenderCshr',
@@ -150,6 +148,11 @@ export default {
   },
 
   setup() {
+    const me = ApiClientBase.user.value?.fullUser
+    if (me) {
+      cached_users.set(me.id, me)
+    }
+
     const $api = useApi()
     const meeting = ref<Api.Meetings>()
     const currentDate = ref<Date>(new Date())
@@ -179,8 +182,8 @@ export default {
     const events = ref<Api.Inputs.Event[]>([])
     const birthdays = ref<Api.User[]>([])
 
-    function filteHome(data: any) {
-      data.forEach((home: Api.Home) => {
+    async function filteHome(data: any) {
+      for (const home of data) {
         if (home.title === 'meeting') {
           home.meeting.forEach((meeting: Api.Meetings) => {
             meetings.value.push(meeting)
@@ -204,18 +207,26 @@ export default {
             events.value.push(event)
           })
         }
+
         if (home.title === 'vacation') {
-          home.vacation.forEach(async (vacation: Api.Vacation) => {
+          for (const vacation of home.vacation) {
             let v: Api.Vacation
             v = vacation
-            const user = await $api.users.getuser(vacation.applying_user.id, {
-              disableNotify: true
-            })
-            v.user = user
+
+            if (cached_users.has(vacation.applying_user.id)) {
+              v.user = cached_users.get(vacation.applying_user.id)
+            } else {
+              const user = await $api.users.getuser(vacation.applying_user.id, {
+                disableNotify: true
+              })
+              cached_users.set(vacation.applying_user.id, user)
+              v.user = user
+            }
+
             vacations.value.push(v)
-          })
+          }
         }
-      })
+      }
     }
 
     const homes = useAsyncState(
@@ -345,8 +356,15 @@ export default {
       data.vacation.forEach(async (vacation: Api.Vacation) => {
         let v: Api.Vacation
         v = vacation
-        const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
-        v.user = user
+
+        if (cached_users.has(vacation.applying_user.id)) {
+          v.user = cached_users.get(vacation.applying_user.id)
+        } else {
+          const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
+          cached_users.set(vacation.applying_user.id, user)
+          v.user = user
+        }
+
         vacations.value.push(v)
       })
       closeDialog(id)
@@ -373,8 +391,17 @@ export default {
       vacations.value = vacations.value.filter((vacation) => vacation.id !== id)
       let v: Api.Vacation
       v = data
-      const user = await $api.users.getuser(data.applying_user, { disableNotify: true })
-      v.user = user
+
+      if (cached_users.has(data.applying_user.id)) {
+        v.user = cached_users.get(data.applying_user.id)
+      } else {
+        const user = await $api.users.getuser(data.applying_user.id, {
+          disableNotify: true
+        })
+        cached_users.set(data.applying_user.id, user)
+        v.user = user
+      }
+
       v.isUpdated = true
       vacations.value.push(v)
       closeDialog(id)
@@ -467,17 +494,17 @@ button {
   text-transform: capitalize !important;
 }
 
-.fc-event-title{
+.fc-event-title {
   color: #131313;
   font-weight: 500;
 }
 
-.fc-popover{
+.fc-popover {
   background-color: rgb(49 47 47) !important;
   color: #ffffff;
 
-.fc-popover-header {
-  background-color: rgb(100, 99, 99) !important;
-}
+  .fc-popover-header {
+    background-color: rgb(100, 99, 99) !important;
+  }
 }
 </style>
diff --git a/client/src/views/NotificationsView.vue b/client/src/views/NotificationsView.vue
@@ -12,10 +12,11 @@
       </template>
       <template v-slot:[`item.actions`]="{ item }">
         <v-icon class="me-2" @click="selectedNotification = item" icon="mdi-eye" />
-        <NotificationDetailsDialog route-query="notification-view" v-model="selectedNotification" />
       </template>
     </v-data-table>
   </v-container>
+
+  <NotificationDetailsDialog route-query="notification-view" v-model="selectedNotification" />
 </template>
 
 <script lang="ts">