chore: nicer req requests indicator

src/components/NavbarLayout.vue

@@ -32,7 +32,7 @@
                     Users
                     <div
                       class="inline-grid *:[grid-area:1/1] h-full items-center mt-1"
-                      v-if="registrationRequests.length > 0"
+                      v-if="registrationRequests && registrationRequests.length > 0"
                     >
                       <div class="status status-error animate-ping"></div>
                       <div class="status status-error"></div>
@@ -81,7 +81,7 @@
                 Admin
                 <div
                   class="inline-grid *:[grid-area:1/1] h-full items-center mt-1"
-                  v-if="registrationRequests.length > 0"
+                  v-if="registrationRequests && registrationRequests.length > 0"
                 >
                   <div class="status status-error animate-ping"></div>
                   <div class="status status-error"></div>
@@ -94,7 +94,7 @@
                     Users
                     <div
                       class="inline-grid *:[grid-area:1/1] h-full items-center mt-1"
-                      v-if="registrationRequests.length > 0"
+                      v-if="registrationRequests && registrationRequests.length > 0"
                     >
                       <div class="status status-error animate-ping"></div>
                       <div class="status status-error"></div>
@@ -144,9 +144,8 @@ import { useUserInfoStore } from '@/stores/user-info'
 import { Role } from '@/model/users-management/User'
 import { useRouter } from 'vue-router'
 import { useNotificationsStore } from '@/stores/notifications'
-import type { RegistrationRequest } from '@/model/users-management/RegistrationRequest'
-import { onMounted, ref } from 'vue'
-import { getAllRegistrationRequests } from '@/api/users-management/requests/users'
+import { computed, onMounted } from 'vue'
+import { useRegistrationRequestsStore } from '@/stores/registrationRequests'
 
 defineProps({
   title: { type: String },
@@ -158,11 +157,12 @@ defineProps({
 
 const userInfo = useUserInfoStore()
 const router = useRouter()
+const registrationRequestsStore = useRegistrationRequestsStore()
 const goBack = () => router.back()
 
-const registrationRequests = ref<RegistrationRequest[]>([])
+const registrationRequests = computed(() => registrationRequestsStore.registrationRequests)
 
 onMounted(async () => {
-  registrationRequests.value = await getAllRegistrationRequests(userInfo.token)
+  await registrationRequestsStore.updateRegistrationRequests()
 })
 </script>

src/stores/registrationRequests.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { useUserInfoStore } from './user-info'
+import type { RegistrationRequest } from '@/model/users-management/RegistrationRequest'
+import { getAllRegistrationRequests } from '@/api/users-management/requests/users'
+import { ref } from 'vue'
+
+export const useRegistrationRequestsStore = defineStore('registrationRequests', () => {
+  const userInfo = useUserInfoStore()
+  const registrationRequests = ref<RegistrationRequest[] | undefined>()
+
+  async function updateRegistrationRequests() {
+    registrationRequests.value = await getAllRegistrationRequests(userInfo.token)
+  }
+
+  function removeRequest(req: RegistrationRequest) {
+    registrationRequests.value = registrationRequests.value?.filter((u) => u.email !== req.email)
+  }
+
+  return { registrationRequests, updateRegistrationRequests, removeRequest }
+})

src/views/admin/ManageUsersView.vue

@@ -5,27 +5,28 @@ import { Role, type User } from '@/model/users-management/User'
 import { useLoadingOverlayStore } from '@/stores/loading-overlay'
 import { presentSuccess, useSuccessPresenterStore } from '@/stores/success-presenter'
 import { useUserInfoStore } from '@/stores/user-info'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import {
   approveRegistrationRequest,
   rejectRegistrationRequest,
   deleteUser,
-  getAllRegistrationRequests,
   getAllUsers,
 } from '@/api/users-management/requests/users'
+import { useRegistrationRequestsStore } from '@/stores/registrationRequests'
 
 const loadingOverlay = useLoadingOverlayStore()
 const successPresenter = useSuccessPresenterStore()
+const registrationRequestsStore = useRegistrationRequestsStore()
 const userInfo = useUserInfoStore()
 const registeredUsers = ref<User[]>()
-const unregisteredUsers = ref<RegistrationRequest[]>()
+const unregisteredUsers = computed(() => registrationRequestsStore.registrationRequests)
 
 onMounted(async () => {
   try {
     loadingOverlay.startLoading()
     Promise.all([
       (registeredUsers.value = await getAllUsers(userInfo.token)),
-      (unregisteredUsers.value = await getAllRegistrationRequests(userInfo.token)),
+      await registrationRequestsStore.updateRegistrationRequests(),
     ])
   } finally {
     loadingOverlay.stopLoading()
@@ -43,29 +44,28 @@ async function removeUser(user: User) {
   }
 }
 
-async function rejectRequest(user: RegistrationRequest) {
+async function rejectRequest(req: RegistrationRequest) {
   try {
-    await rejectRegistrationRequest(userInfo.token, user.email)
-    unregisteredUsers.value = unregisteredUsers.value?.filter((u) => u.email !== user.email)
-    showToastMessage(`Request for ${user.nickname} rejected successfully.`)
+    await rejectRegistrationRequest(userInfo.token, req.email)
+    registrationRequestsStore.removeRequest(req)
+    showToastMessage(`Request for ${req.nickname} rejected successfully.`)
   } finally {
     loadingOverlay.stopLoading()
   }
 }
 
-async function approveRequest(user: RegistrationRequest) {
+async function approveRequest(req: RegistrationRequest) {
   try {
     loadingOverlay.startLoading()
-    await approveRegistrationRequest(userInfo.token, user.email)
-
-    unregisteredUsers.value = unregisteredUsers.value?.filter((u) => u.email !== user.email)
+    await approveRegistrationRequest(userInfo.token, req.email)
+    registrationRequestsStore.removeRequest(req)
     const newUser: User = {
-      email: user.email,
-      nickname: user.nickname,
+      email: req.email,
+      nickname: req.nickname,
       role: Role.User,
     }
     registeredUsers.value?.push(newUser)
-    showToastMessage(`Request for ${user.nickname} accepted successfully.`)
+    showToastMessage(`Request for ${req.nickname} accepted successfully.`)
   } finally {
     loadingOverlay.stopLoading()
   }