create group now working

src/groups/GroupsCreateModal.tsx

@@ -13,7 +13,7 @@ import { HttpClientContext } from "../http-service/HttpClientContext";
 import { RealmContext } from "../components/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
 
-export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle}) => {
+export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle, setIsCreateModalOpen, createGroupName, setCreateGroupName}) => {
   
   const { t } = useTranslation("groups");
   const httpClient = useContext(HttpClientContext)!;
@@ -21,42 +21,48 @@ export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle}) => {
   const [ nameValue, setNameValue ] = useState("");
   const [add, Alerts] = useAlerts();
 
-  const valueChange = (nameValue: string) => {
-    setNameValue(nameValue)
+  const valueChange = (createGroupName: string) => {
+    setCreateGroupName(createGroupName)
   }
 
   const submitForm = async () => {
     try {
-      await httpClient.doPost(`/admin/realms/${realm}/groups`, nameValue);
+      await httpClient.doPost(`/admin/realms/${realm}/groups`, {name: createGroupName});
+      setIsCreateModalOpen(false);
+      setCreateGroupName("");
       add("Client created", AlertVariant.success);
+      // window.location.reload(false);
     } catch (error) {
       add(`Could not create client: '${error}'`, AlertVariant.danger);
     }
   }
 
   return (
-    <Modal
-      variant={ModalVariant.small}
-      title="Create a group"
-      isOpen={isCreateModalOpen}
-      onClose={handleModalToggle}
-      actions={[
-        <Button key="confirm" variant="primary" onClick={() => submitForm()}>
-          Create
-        </Button>
-      ]}
-    >
-      <Form isHorizontal>
-        <FormGroup label={t("name")} fieldId="kc-root-url">
-          <TextInput
-            type="text"
-            id="create-group-name"
-            name="Name"
-            value={nameValue}
-            onChange={valueChange}
-          />
-        </FormGroup>
-      </Form>
-    </Modal>
+    <React.Fragment>
+      <Alerts />
+      <Modal
+        variant={ModalVariant.small}
+        title="Create a group"
+        isOpen={isCreateModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={() => submitForm()}>
+            Create
+          </Button>
+        ]}
+      >
+        <Form isHorizontal>
+          <FormGroup label={t("name")} fieldId="kc-root-url">
+            <TextInput
+              type="text"
+              id="create-group-name"
+              name="Name"
+              value={createGroupName}
+              onChange={valueChange}
+            />
+          </FormGroup>
+        </Form>
+      </Modal>
+    </React.Fragment>
   );
 };

src/groups/GroupsSection.tsx

@@ -33,6 +33,7 @@ export const GroupsSection = () => {
   const [max, setMax] = useState(10);
   const [first, setFirst] = useState(0);
   const [isKebabOpen, setIsKebabOpen] = useState(false);
+  const [createGroupName, setCreateGroupName] = useState("");
   const columnID: keyof GroupRepresentation = "id";
   const membersLength: keyof GroupRepresentation = "membersLength";
   const columnGroupName: keyof GroupRepresentation = "name";
@@ -77,7 +78,7 @@ export const GroupsSection = () => {
       data && setRawData(data);
       setFilteredData(data);
     });
-  }, []);
+  }, [createGroupName]);
 
   // Filter groups
   const filterGroups = (newInput: string) => {
@@ -147,7 +148,13 @@ export const GroupsSection = () => {
             <GroupsList list={filteredData ? filteredData : rawData} />
           )}
         </TableToolbar>
-        <GroupsCreateModal isCreateModalOpen={isCreateModalOpen} handleModalToggle={handleModalToggle}/>
+        <GroupsCreateModal
+          isCreateModalOpen={isCreateModalOpen}
+          handleModalToggle={handleModalToggle}
+          setIsCreateModalOpen={setIsCreateModalOpen}
+          createGroupName={createGroupName}
+          setCreateGroupName={setCreateGroupName}
+        />
       </PageSection>
     </React.Fragment>
   );