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,20 +21,25 @@ 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 (
<React.Fragment>
<Alerts />
<Modal <Modal
variant={ModalVariant.small} variant={ModalVariant.small}
title="Create a group" title="Create a group"
@ -52,11 +57,12 @@ export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle}) => {
type="text" type="text"
id="create-group-name" id="create-group-name"
name="Name" name="Name"
value={nameValue} value={createGroupName}
onChange={valueChange} onChange={valueChange}
/> />
</FormGroup> </FormGroup>
</Form> </Form>
</Modal> </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>
); );