added functionality which refreshes the table data when there is successful adding or editing of a member (#196)

Author: ssb-jnk

src/pages/TeamDetail/AddTeamMember.tsx

@@ -14,6 +14,7 @@ import { XCircle } from 'react-feather'
 
 interface AddMember {
   loadingUsers: boolean
+  setRefreshData: React.Dispatch<React.SetStateAction<boolean>>
   userData: User[] | undefined
   teamDetailData: TeamDetailData | undefined
   teamModalHeader: SidebarHeader
@@ -40,6 +41,7 @@ const defaultSelectedGroup = {
 
 const AddTeamMember = ({
   loadingUsers,
+  setRefreshData,
   userData,
   teamDetailData,
   teamModalHeader,
@@ -107,7 +109,10 @@ const AddTeamMember = ({
           }
         })
         .catch((e) => setAddUserToTeamErrors(e.message))
-        .finally(() => setShowAddUserSpinner(false))
+        .finally(() => {
+          setShowAddUserSpinner(false)
+          setRefreshData(true)
+        })
     }
   }
 

src/pages/TeamDetail/EditTeamMember.tsx

@@ -20,6 +20,7 @@ interface EditUserStates {
 
 interface EditTeamMember {
   editUserInfo: UserInfo
+  setRefreshData: React.Dispatch<React.SetStateAction<boolean>>
   teamDetailData: TeamDetailData | undefined
   teamModalHeader: SidebarHeader
   teamGroups: Group[]
@@ -35,6 +36,7 @@ const defaultSelectedGroup = {
 
 const EditTeamMember = ({
   editUserInfo,
+  setRefreshData,
   teamDetailData,
   teamModalHeader,
   teamGroups,
@@ -124,7 +126,10 @@ const EditTeamMember = ({
           }
         })
         .catch((e) => setEditUserErrors({ ...editUserErrors, [`${editUserInfo.email}`]: e.message }))
-        .finally(() => setShowEditUserSpinner({ ...showEditUserSpinner, [`${editUserInfo.email}`]: false }))
+        .finally(() => {
+          setShowEditUserSpinner({ ...showEditUserSpinner, [`${editUserInfo.email}`]: false })
+          setRefreshData(true)
+        })
 
       return
     }
@@ -143,7 +148,10 @@ const EditTeamMember = ({
           }
         })
         .catch((e) => setEditUserErrors({ ...editUserErrors, [`${editUserInfo.email}`]: e.message }))
-        .finally(() => setShowEditUserSpinner({ ...showEditUserSpinner, [`${editUserInfo.email}`]: false }))
+        .finally(() => {
+          setShowEditUserSpinner({ ...showEditUserSpinner, [`${editUserInfo.email}`]: false })
+          setRefreshData(true)
+        })
 
       return
     }
@@ -162,7 +170,10 @@ const EditTeamMember = ({
           }
         })
         .catch((e) => setEditUserErrors({ ...editUserErrors, [`${editUserInfo.email}`]: e.message }))
-        .finally(() => setShowEditUserSpinner({ ...showEditUserSpinner, [`${editUserInfo.email}`]: false }))
+        .finally(() => {
+          setShowEditUserSpinner({ ...showEditUserSpinner, [`${editUserInfo.email}`]: false })
+          setRefreshData(true)
+        })
       return
     }
   }

src/pages/TeamDetail/TeamDetail.tsx

@@ -68,6 +68,7 @@ const TeamDetail = () => {
 
   const { setBreadcrumbTeamDetailDisplayName } = useContext(DaplaCtrlContext)
   const [error, setError] = useState<ApiError | undefined>()
+  const [refreshData, setRefreshData] = useState<boolean>(false)
   const [loadingTeamData, setLoadingTeamData] = useState<boolean>(true)
   const [loadingUsers, setLoadingUsers] = useState<boolean>(false)
   const [teamDetailData, setTeamDetailData] = useState<TeamDetailData>()
@@ -179,12 +180,36 @@ const TeamDetail = () => {
         const displayName = formatDisplayName((formattedResponse.team as Team).display_name)
         setBreadcrumbTeamDetailDisplayName({ displayName })
       })
-      .finally(() => setLoadingTeamData(false))
+      .finally(() => {
+        setLoadingTeamData(false)
+        setRefreshData(false)
+      })
       .catch((error) => {
         setError(error as ApiError)
       })
   }, [])
 
+  useEffect(() => {
+    if (!teamId || refreshData === false) return
+    setLoadingTeamData(true)
+    getTeamDetail(teamId)
+      .then((response) => {
+        const formattedResponse = response as TeamDetailData
+        setTeamDetailData(formattedResponse)
+        setTeamDetailTableData(prepTeamData(formattedResponse))
+
+        const displayName = formatDisplayName((formattedResponse.team as Team).display_name)
+        setBreadcrumbTeamDetailDisplayName({ displayName })
+      })
+      .finally(() => {
+        setLoadingTeamData(false)
+        setRefreshData(false)
+      })
+      .catch((error) => {
+        setError(error as ApiError)
+      })
+  }, [refreshData])
+
   useEffect(() => {
     if (isTeamManager()) {
       setTeamDetailTableHeaderColumns([
@@ -312,6 +337,7 @@ const TeamDetail = () => {
     <>
       <AddTeamMember
         loadingUsers={loadingUsers}
+        setRefreshData={setRefreshData}
         userData={userData}
         teamDetailData={teamDetailData}
         teamModalHeader={teamModalHeader}
@@ -321,6 +347,7 @@ const TeamDetail = () => {
       />
       <EditTeamMember
         editUserInfo={editUserInfo}
+        setRefreshData={setRefreshData}
         teamDetailData={teamDetailData}
         teamModalHeader={teamModalHeader}
         teamGroups={teamGroups}

src/pages/TeamDetail/teamDetailDialog.tsx

@@ -5,7 +5,7 @@ import { Dialog } from '@statisticsnorway/ssb-component-library'
 export const renderSidebarModalInfo = (children: JSX.Element) => {
   return (
     <div className={styles.modalBodyDialog}>
-      <Dialog type='info'>Det kan ta litt tid før du ser endringen.</Dialog>
+      <Dialog type='info'>Det tar 1-2 minutter før tilgangen er aktivert og tabellen er oppdatert.</Dialog>
       {children}
     </div>
   )