From 1f3cfddac8efa0528e090613fe495b9daadb01e6 Mon Sep 17 00:00:00 2001
From: Christie Molloy <cmolloy@redhat.com>
Date: Wed, 30 Sep 2020 09:55:18 -0400
Subject: [PATCH] create group now working

---
 src/groups/GroupsCreateModal.tsx | 60 ++++++++++++++++++--------------
 src/groups/GroupsSection.tsx     | 11 ++++--
 2 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/groups/GroupsCreateModal.tsx b/src/groups/GroupsCreateModal.tsx
index 691ebb7169..69ccb2484e 100644
--- a/src/groups/GroupsCreateModal.tsx
+++ b/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>
   );
 };
diff --git a/src/groups/GroupsSection.tsx b/src/groups/GroupsSection.tsx
index 5e7c5d26b7..268938dda7 100644
--- a/src/groups/GroupsSection.tsx
+++ b/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>
   );