feat(user): use response from PUT for table and avoid refetching

Author: x0sina

dashboard/src/components/dialogs/user-modal.tsx

@@ -26,6 +26,7 @@ import {
   useModifyUser,
   useModifyUserWithTemplate,
   type UserResponse,
+  type UsersResponse,
 } from '@/service/api'
 import { dateUtils, useRelativeExpiryDate } from '@/utils/dateFormatter'
 import { formatBytes } from '@/utils/formatByte'
@@ -605,16 +606,44 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
   })
 
   // Function to refresh all user-related data
-  const refreshUserData = (user: UserResponse) => {
-    // Invalidate relevant queries to trigger fresh fetches
-    queryClient.invalidateQueries({ queryKey: ['/api/users'] })
-    queryClient.invalidateQueries({ queryKey: ['getUsersUsage'] })
-    queryClient.invalidateQueries({ queryKey: ['getUserStats'] })
-    queryClient.invalidateQueries({ queryKey: ['getInboundStats'] })
-    queryClient.invalidateQueries({ queryKey: ['getUserOnlineStats'] })
-
-    // Force immediate refetch
-    refetchUsers()
+  const refreshUserData = (user: UserResponse, isEdit: boolean = false) => {
+    if (isEdit) {
+      // When editing, update the specific user in the cache without refreshing all users
+      // Get all cached queries for users
+      queryClient.setQueriesData<UsersResponse>(
+        {
+          queryKey: ['/api/users'],
+          exact: false,
+        },
+        (oldData) => {
+          if (!oldData) return oldData
+
+          // Find and update the user in the users array
+          const updatedUsers = oldData.users.map((u) => (u.username === user.username ? user : u))
+
+          return {
+            ...oldData,
+            users: updatedUsers,
+          }
+        },
+      )
+
+      // Still invalidate usage/stats queries as they may have changed
+      queryClient.invalidateQueries({ queryKey: ['getUsersUsage'] })
+      queryClient.invalidateQueries({ queryKey: ['getUserStats'] })
+      queryClient.invalidateQueries({ queryKey: ['getInboundStats'] })
+      queryClient.invalidateQueries({ queryKey: ['getUserOnlineStats'] })
+    } else {
+      // When creating, invalidate and refetch all users
+      queryClient.invalidateQueries({ queryKey: ['/api/users'] })
+      queryClient.invalidateQueries({ queryKey: ['getUsersUsage'] })
+      queryClient.invalidateQueries({ queryKey: ['getUserStats'] })
+      queryClient.invalidateQueries({ queryKey: ['getInboundStats'] })
+      queryClient.invalidateQueries({ queryKey: ['getUserOnlineStats'] })
+
+      // Force immediate refetch
+      refetchUsers()
+    }
 
     // Call the success callback if provided
     if (onSuccessCallback) {
@@ -629,7 +658,7 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
   })
   const modifyUserMutation = useModifyUser({
     mutation: {
-      onSuccess: data => refreshUserData(data),
+      onSuccess: data => refreshUserData(data, true),
     },
   })
   const createUserFromTemplateMutation = useCreateUserFromTemplate({
@@ -641,7 +670,7 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
   // Add the mutation hook at the top with other mutations
   const modifyUserWithTemplateMutation = useModifyUserWithTemplate({
     mutation: {
-      onSuccess: data => refreshUserData(data),
+      onSuccess: data => refreshUserData(data, true),
     },
   })
 

dashboard/src/components/users/action-buttons.tsx

@@ -505,7 +505,18 @@ const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
       </AlertDialog>
 
       {/* Edit User Modal */}
-      <UserModal isDialogOpen={isEditModalOpen} onOpenChange={setEditModalOpen} form={userForm} editingUser={true} editingUserId={user.id} editingUserData={user} onSuccessCallback={refreshUserData} />
+      <UserModal
+        isDialogOpen={isEditModalOpen}
+        onOpenChange={setEditModalOpen}
+        form={userForm}
+        editingUser={true}
+        editingUserId={user.id}
+        editingUserData={user}
+        onSuccessCallback={() => {
+          // No need to invalidate - cache is already updated by the modal
+          setEditModalOpen(false)
+        }}
+      />
 
       <UsageModal open={isUsageModalOpen} onClose={() => setUsageModalOpen(false)} username={user.username} />
 

dashboard/src/components/users/users-table.tsx

@@ -285,7 +285,7 @@ const UsersTable = memo(() => {
   const handleEditSuccess = () => {
     setEditModalOpen(false)
     setSelectedUser(null)
-    handleManualRefresh()
+    // No need to manually refresh - cache is already updated by the modal
   }
 
   const columns = setupColumns({