use callbacks instead of refetching

atlp-rwanda · Jul 25, 2024 · f1f1f46 · f1f1f46
1 parent fa200c3
commit f1f1f46
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 42 deletions.
diff --git a/src/Pages/UsersAdminDash/UsersAdminDash.tsx b/src/Pages/UsersAdminDash/UsersAdminDash.tsx
@@ -87,17 +87,31 @@ function UsersAdminDash() {
         setOptionsMenuPosition(position)
     }
 
+    async function fetchData() {
+        const response = await axios.get(`${process.env.BACKEND_URL}/api/users?page=${page}&rowsPerPage=5`,
+            {
+                headers: {
+                    'authorization': `Bearer ${token}`
+                }
+            })
+        setUsers(response.data.data.users)
+        setPageCount(response.data.data.pagination.pageCount)
+    }
+
+    async function refreshData(){
+        fetchData()
+        .then(() => {
+            setSpinnerActive(false)
+        })
+        .catch(err => {
+            setSpinnerActive(false)
+            if (err.response && err.response.status === 401) {
+                navigate('/login')
+            }
+        })
+    }
+
     useEffect(() => {
-        async function fetchData() {
-            const response = await axios.get(`${process.env.BACKEND_URL}/api/users?page=${page}&rowsPerPage=5`,
-                {
-                    headers: {
-                        'authorization': `Bearer ${token}`
-                    }
-                })
-            setUsers(response.data.data.users)
-            setPageCount(response.data.data.pagination.pageCount)
-        }
 
         fetchData()
             .then(() => {
@@ -182,7 +196,7 @@ function UsersAdminDash() {
                     <ChangeUserRolePopup
                         page={page}
                         selectedUser={selectedUser}
-                        updateUsers={updateUsers}
+                        refreshData={refreshData}
                         handlePopup={(state: boolean) => setChangeUserRolePopupActive(state)}
                         setSpinnerActive={setSpinnerActive}
                     ></ChangeUserRolePopup> : ''
@@ -192,7 +206,7 @@ function UsersAdminDash() {
                     <DisableUserPopup
                         page={page}
                         selectedUser={selectedUser}
-                        updateUsers={updateUsers}
+                        refreshData={refreshData}
                         handlePopup={(state: boolean) => setdisableUserPopupActive(state)}
                         setSpinnerActive={setSpinnerActive}
                     ></DisableUserPopup> : ''

diff --git a/src/components/ChangeUserRolePopup/ChangeUserRolePopup.tsx b/src/components/ChangeUserRolePopup/ChangeUserRolePopup.tsx
@@ -12,12 +12,12 @@ import { toast } from 'react-toastify';
 interface Props {
     page: number,
     selectedUser: User,
-    updateUsers: (users: User[]) => void,
+    refreshData: () => void,
     handlePopup: (state: boolean) => void,
     setSpinnerActive: (param: boolean | ((prev: boolean) => boolean)) => void,
 }
 
-function ChangeUserRolePopup({ page, selectedUser, updateUsers, handlePopup, setSpinnerActive }: Props) {
+function ChangeUserRolePopup({ page, selectedUser,refreshData, handlePopup, setSpinnerActive }: Props) {
 
     const [selectedRole, setSelectedRole] = useState<string>(selectedUser.role)
 
@@ -42,15 +42,7 @@ function ChangeUserRolePopup({ page, selectedUser, updateUsers, handlePopup, set
                     'authorization': `Bearer ${token}`,
                 }
             })
-            console.log(response)
-            const userResponse = await axios.get(`${process.env.BACKEND_URL}/api/users?page=${page}`,
-                {
-                    headers: {
-                        'authorization': `Bearer ${token}`,
-                    }
-                })
-            updateUsers(userResponse.data.data.users)
-            setSpinnerActive(prev => !prev)
+            refreshData()
             toast.success("User Role Changed")
             handlePopup(false)
         } catch (err: any) {

diff --git a/src/components/DisableUserPopup/DisableUserPopup.tsx b/src/components/DisableUserPopup/DisableUserPopup.tsx
@@ -12,45 +12,36 @@ import { toast } from "react-toastify";
 interface Props {
     page: number,
     selectedUser: User,
-    updateUsers: (users: User[]) => void,
+    refreshData: () => void,
     handlePopup: (state: boolean) => void,
     setSpinnerActive: (param: boolean | ((prev: boolean) => boolean)) => void,
 }
 
-function DisableUserPopup({ page,selectedUser,updateUsers,handlePopup,setSpinnerActive }: Props) {
+function DisableUserPopup({ page, selectedUser, refreshData, handlePopup, setSpinnerActive }: Props) {
     const [reason, setReason] = useState<string>('')
     const { token } = useSelector(
         (state: RootState) => state.token
     )
     const navigate = useNavigate()
 
     async function handleDisableUser() {
-        try{            
+        try {
             handlePopup(false)
-            setSpinnerActive(prev=>!prev)
+            setSpinnerActive(prev => !prev)
             const response = await axios.put(`${process.env.BACKEND_URL}/api/users/disable/${selectedUser.userId}`, {
                 reason: reason
             }, {
                 headers: {
                     'authorization': `Bearer ${token}`,
                 },
             })
-            console.log(response)
-            const userResponse = await axios.get(`${process.env.BACKEND_URL}/api/users?page=${page}`,
-            {
-                headers: {
-                    'authorization': `Bearer ${token}`,
-                },
-            })
-            console.log(userResponse)
-            updateUsers(userResponse.data.data.users)
-            setSpinnerActive(prev=>!prev)
+            refreshData()
             toast.success(response.data.message)
-        }catch(err: any){
+        } catch (err: any) {
             console.log(err)
-	    setSpinnerActive(prev=>!prev)
-	    toast(err.message);
-	    if(err.response && err.response.status===401) navigate('/login')
+            setSpinnerActive(prev => !prev)
+            toast(err.message);
+            if (err.response && err.response.status === 401) navigate('/login')
         }
     }
 
@@ -59,7 +50,7 @@ function DisableUserPopup({ page,selectedUser,updateUsers,handlePopup,setSpinner
     }
 
     function handleClickingOutside(event: any) {
-        if(!event.target.closest("#disableUser"))handlePopup(false)
+        if (!event.target.closest("#disableUser")) handlePopup(false)
     }
 
     useEffect(() => {