perf: 🏍️ Optimised Users store in the API

apps/wizarr-frontend/src/stores/users.ts

@@ -1,5 +1,4 @@
 import type { User, Users } from '@/types/api/users';
-
 import { defineStore } from 'pinia';
 
 interface UserStoreState {
@@ -12,74 +11,48 @@ export const useUsersStore = defineStore('users', {
     }),
     actions: {
         async scanUsers() {
-            // Trigger the scan through the API
-            const response = await this.$axios
-                .get('/api/users/scan')
-                .catch(() => {
-                    this.$toast.error('Could not scan users');
-                    return null;
-                });
-
-            // If the response is null, return
-            if (response === null) return;
+            const response = await this.$axios.get('/api/users/scan').catch(() => {
+                this.$toast.error('Could not scan users');
+                return null;
+            });
 
-            // Trigger the get users function
-            await this.getUsers();
+            if (response !== null) {
+                await this.getUsers();
+            }
         },
         async getUsers() {
-            // Get the users from the API
-            const users = await this.$axios
-                .get<Users, { data: Users }>('/api/users')
-                .catch(() => {
-                    this.$toast.error('Could not get users');
-                    return null;
-                });
-
-            // If the users are null, return
-            if (users === null) return;
-
-            // Update the users that are already in the store
-            this.users.forEach((user, index) => {
-                const new_user = users.data.find(
-                    (new_user: User) => new_user.id === user.id,
-                );
-                if (new_user) this.users[index] = new_user;
+            const response = await this.$axios.get<Users, { data: Users }>('/api/users').catch(() => {
+                this.$toast.error('Could not get users');
+                return null;
             });
 
-            // Add the new users to the store if they don't exist
-            users.data.forEach((user: User) => {
-                if (!this.users.find((old_user) => old_user.id === user.id))
-                    this.users.push(user);
-            });
-
-            // Remove the users that were not in the response
-            this.users.forEach((user, index) => {
-                if (
-                    !users.data.find(
-                        (new_user: User) => new_user.id === user.id,
-                    )
-                )
-                    this.users.splice(index, 1);
+            if (response !== null) {
+                this.updateUsers(response.data);
+            }
+        },
+        updateUsers(newUsers: Users) {
+            // Build a map of new users for quick lookup
+            const newUserMap = new Map(newUsers.map(user => [user.id, user]));
+            // Filter and update existing users
+            const updatedUsers = this.users.map(user => newUserMap.get(user.id) || user);
+            // Add new users who aren't already in the store
+            newUserMap.forEach((user, id) => {
+                if (!this.users.some(u => u.id === id)) {
+                    updatedUsers.push(user);
+                }
             });
-
-            // Return the users
-            return users.data;
+            // Set the new users array to the state
+            this.users = updatedUsers.filter(user => newUserMap.has(user.id));
         },
         async deleteUser(id: number) {
-            // Delete the user from the API
-            const response = await this.$axios
-                .delete(`/api/users/${id}`, { disableInfoToast: true })
-                .catch(() => {
-                    this.$toast.error('Could not delete user');
-                    return null;
-                });
-
-            // If the response is null, return
-            if (response === null) return;
+            const response = await this.$axios.delete(`/api/users/${id}`, { disableInfoToast: true }).catch(() => {
+                this.$toast.error('Could not delete user');
+                return null;
+            });
 
-            // Remove the user from the store
-            const index = this.users.findIndex((user: User) => user.id === id);
-            if (index !== -1) this.users.splice(index, 1);
+            if (response !== null) {
+                this.users = this.users.filter(user => user.id !== id);
+            }
         },
     },
     getters: {},