From 4f991a90be1827b6176cf4d2aa2cd6d0c759561f Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 18 Sep 2024 15:22:27 +0200
Subject: [PATCH] implemented get usergroup endpoint end added query call to
 usergroup page

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/usergroups/usergroup.js          | 13 ++++++++-----
 src/store/apiSlice.js                      |  3 ++-
 src/store/endpoints/usergroup-endpoints.js |  3 +++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index d7f7e0a..1575a31 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -20,11 +20,14 @@ import { Table, DataColumn, LinkColumn } from "../../common/table";
 import { Row, Col } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
+import { useGetUserGroupByIdQuery } from "../../store/apiSlice";
 
 const Usergroup = (props) => {
-    // const params = useParams();
-    // const id = params.usergroup;
-    const usergroup = {name: 'Test Group'};
+    const params = useParams();
+    const usergroupID = params.usergroup;
+    const {data: {usergroup} = {}, isLoading} = useGetUserGroupByIdQuery(usergroupID);
+
+    if(isLoading) return <div className='loading'>Loading...</div>;
 
     return (
         <div className='section'>
@@ -32,11 +35,11 @@ const Usergroup = (props) => {
             <Row>
                 <Col>
                     <h4>Users</h4>
-                    <UsergroupUsersTable />
+                    <UsergroupUsersTable usergroupID={usergroupID} />
                 </Col>
                 <Col>
                     <h4>Scenario Mappings</h4>
-                    <UsergroupScenariosTable />
+                    <UsergroupScenariosTable usergroupID={usergroupID} />
                 </Col>
             </Row>
         </div>
diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index f729557..ebce8d3 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -108,5 +108,6 @@ export const {
   useUpdateComponentConfigMutation,
   useGetUsergroupsQuery,
   useAddUsergroupMutation,
-  useDeleteUsergroupMutation
+  useDeleteUsergroupMutation,
+  useGetUserGroupByIdQuery
 } = apiSlice;
diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js
index a710d6c..72d3d36 100644
--- a/src/store/endpoints/usergroup-endpoints.js
+++ b/src/store/endpoints/usergroup-endpoints.js
@@ -19,6 +19,9 @@ export const usergroupEndpoints = (builder) => ({
     getUsergroups: builder.query({
       query: () => 'usergroups',
     }),
+    getUserGroupById: builder.query({
+      query: (usergroupID) => `/usergroups/${usergroupID}`,
+    }),
     addUsergroup: builder.mutation({
       query: (usergroup) => ({
         url: '/usergroups',