Merge branch 'dev' of https://bitbucket.org/credenti/credenti-tecconn…

…ect-fe into authentication_policy
Vaishnavi-Lingala · May 6, 2022 · 657724e · 657724e
2 parents a2e293e + 3b7d42b
commit 657724e
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 34 deletions.
diff --git a/src/components/Users/User.tsx b/src/components/Users/User.tsx
@@ -1,6 +1,5 @@
 import { Skeleton, Table, Tabs } from "antd";
 import { useEffect, useState } from "react";
-
 import ApiService from "../../Api.service"
 import ApiUrls from "../../ApiUtils"
 
@@ -11,44 +10,64 @@ export function User(props: any) {
     const accessToken = JSON.parse(localStorage.getItem("okta-token-storage")).accessToken.accessToken;
     const [groups, setGroups]: any = useState([]);
     const [loadingDetails, setLoadingDetails] = useState(false);
+    const [page, setPage]: any = useState(1);
+    const [pageSize, setPageSize]: any = useState(10);
     const columns = [{title: "Group Name", dataIndex: "name", width:"40%" },
     {title: "Status", dataIndex: "status", width:"40%" }];
 
     useEffect(()=> {
         setLoadingDetails(true);
         let userId = props.userDetails.uid;
         ApiService.get(ApiUrls.userGroups(userId)).then((groupsResponse:any) => {
-            let userGroups = groupsResponse;
-            for(var i = 0; i < userGroups.length; i++) {	
-				let obj = {
-					key: i+1,
-					name: userGroups[i].name,
-					uid: userGroups[i].uid,
-					status: userGroups[i].status
-				}
-				groups.push(obj);
-			}
-        });
-        setLoadingDetails(false);
+            let userGroups = appendKeyToGivenList(groupsResponse);
+            setGroups(userGroups);
+        }).catch(error => {
+            console.error(`Error in getting groups: ${JSON.stringify(error)}`);
+        }).finally(() => {
+            setLoadingDetails(false);
+        });  
     }, []);
 
+    const appendKeyToGivenList = (inputList) => {
+		inputList.forEach(each => {
+			each['key'] = each.uid;
+		})
+		return inputList;
+	}
+
     return (
         <Skeleton loading={loadingDetails}>
             <Tabs defaultActiveKey="profile" type="card" size={"middle"} animated={false} tabBarStyle={{ marginBottom: '0px' }}>
                 <TabPane tab="Profile" key="profile">
-                    <div className="row-container-2columns" style={{paddingTop: "20px"}}>
-                        <div>Username:<span>{userDetails.user_name}</span></div>
-                        <div>Email: <span >{userDetails.email}</span></div>
-                        <div>Status: <span >{userDetails.status}</span></div>
+                    <div className="row" style={{paddingTop: "20px"}}>
+                        <div style={{width: "100%", display: "flex", marginBottom: "10px"}}>
+                            <div style={{width: "50%"}}>Username</div>
+                            <div>{userDetails.user_name}</div>
+                        </div>
+                        <div style={{width: "100%", display: "flex", marginBottom: "10px"}}>
+                            <div style={{width: "50%"}}>Email</div>
+                            <div>{userDetails.email}</div>
+                        </div>
+                        <div style={{width: "100%", display: "flex", marginBottom: "10px"}}>
+                            <div style={{width: "50%"}}>Status</div>
+                            <div>{userDetails.status}</div>
+                        </div>    
                     </div>
                 </TabPane>
                 <TabPane tab="Groups" key="groups">
-                    <div className="row-container" style={{paddingTop: "20px"}}>
+                    <div className="row" style={{paddingTop: "20px"}}>
                         <Table style={{ border: '1px solid #D7D7DC' }}
 						showHeader={true}
 						columns={columns}
 						dataSource={groups}   
-						pagination={{ position: [] }}></Table>
+						pagination={{ 
+                            current: page,
+                            pageSize: pageSize,
+                            onChange: (page, pageSize) => {
+                                setPage(page);
+                                setPageSize(pageSize);
+                            }
+                         }}></Table>
                     </div>
                 </TabPane>
             </Tabs>

diff --git a/src/components/Users/Users.css b/src/components/Users/Users.css
@@ -0,0 +1,7 @@
+.content-header {
+    display: flex;
+    font-size: xx-large;
+    font-weight: 600;
+    padding: 5px 5px 0 5px;
+    margin-bottom: 20px;
+}
diff --git a/src/components/Users/Users.tsx b/src/components/Users/Users.tsx
@@ -9,6 +9,9 @@ export default function Users() {
 	const [userDetails, setUserDetails] = useState(undefined);
 	const [loadingDetails, setLoadingDetails] = useState(false);
     const [arr, setArr]: any = useState([]);
+	const [page, setPage]: any = useState(1);
+	const [pageSize, setPageSize]: any = useState(10);
+	const [totalItems, setTotalItems]: any = useState(0);
 
     const columns = [{
         title: 'Username',
@@ -28,22 +31,15 @@ export default function Users() {
 
     useEffect(() => {
 		setLoadingDetails(true);
-        ApiService.get(ApiUrls.users)
+        ApiService.get(ApiUrls.users, {start: page, limit: pageSize})
 		.then(data => {
-			let usersList = data?.results;
-			for(var i = 0; i < usersList.length; i++) {	
-				var obj = {
-					key: i+1,
-					user_name: usersList[i].user_name,
-					uid: usersList[i].uid,
-					email: usersList[i].email,
-					status: usersList[i].status
-				}
-				arr.push(obj);
-			}
-			setLoadingDetails(false);
+			const usersWithKey = appendKeyToUsersList(data.results);
+			setArr(usersWithKey);
+			setTotalItems(data.total_items);
 		}).catch(error => {
 			console.error(`Error in getting users list: ${error}`);
+		}).finally(() => {
+			setLoadingDetails(false);
 		})
 	}, [])
 
@@ -54,6 +50,25 @@ export default function Users() {
 		setLoadingDetails(false);
 	}
 
+	const onUsersPageChange = async (page, pageSize) => {
+		setLoadingDetails(true);
+		let data = await ApiService.get(ApiUrls.users, {start: page, limit: pageSize}).catch(error => {
+			console.error(`Error in getting users list by page: ${JSON.stringify(error)}`);
+		}).finally(() => {
+			setLoadingDetails(false);
+		});
+		const usersWithKey = appendKeyToUsersList(data.results);
+		setArr(usersWithKey);
+		setTotalItems(data.total_items);
+	}
+
+	const appendKeyToUsersList = (usersList) => {
+		usersList.forEach(eachUser => {
+			eachUser['key'] = eachUser.uid;
+		})
+		return usersList;
+	}
+
     return (
 		<>
 			<div className='content-header'>
@@ -67,8 +82,17 @@ export default function Users() {
 						style={{ border: '1px solid #D7D7DC' }}
 						showHeader={true}
 						columns={columns}
-						dataSource={arr}   
-						pagination={{ position: [] }}
+						dataSource={arr}
+						pagination={{
+							current: page, 
+							pageSize: pageSize,
+							total: totalItems,
+							onChange:(page, pageSize) => {
+								setPage(page);
+								setPageSize(pageSize);
+								onUsersPageChange(page, pageSize);
+							}
+						}}
 					/>
 				</>}
 			</Skeleton>