create group now working

This commit is contained in:
Christie Molloy 2020-09-30 09:55:18 -04:00
parent 4e67ecc1da
commit 1f3cfddac8
2 changed files with 42 additions and 29 deletions

View file

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

View file

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