-
Notifications
You must be signed in to change notification settings - Fork 6
/
CreateGroup.js
73 lines (66 loc) · 2.43 KB
/
CreateGroup.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React, { useCallback, useState } from "react";
import { getBaseURL } from "./utils.js";
import { ColumnFlow, RowFlow } from "./common/Layout.jsx";
import { Button } from "@mui/material";
import TextInput from "./common/TextInput.jsx";
/**
* CreateGroup is a form component used for creating a new group within the TEA Platform. It provides a simple interface for entering the name of the new group and submitting it to the server. Upon successful submission, the form invokes a callback function to reflect the change.
*
* @param {Object} props - Component props.
* @param {Function} props.afterSubmit - Callback function to be called after successfully creating a group. It is used to trigger any necessary updates in the parent component, such as refreshing the list of groups.
* @returns {JSX.Element} A form that allows users to input a name for a new group and create it.
*
* This component includes error handling to provide feedback to the user in case of an unsuccessful group creation attempt. It leverages the `TextInput` component for inputting the group's name and validates the input before submission to ensure that a name is provided.
*/
function CreateGroup({ afterSubmit }) {
const [name, setName] = useState("");
const [error, setError] = useState();
const [dirty, setDirty] = useState();
const onSubmit = useCallback(
(e) => {
e.preventDefault();
if (!name) {
setDirty(true);
return;
}
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${localStorage.getItem("token")}`,
},
body: JSON.stringify({ name }),
};
fetch(`${getBaseURL()}/groups/`, requestOptions)
.then(() => {
setName("");
afterSubmit();
})
.catch((err) => {
console.error(err);
setError("Could not create group");
});
},
[name, afterSubmit],
);
return (
<ColumnFlow component="form" onSubmit={onSubmit}>
<TextInput
label="Name"
value={name}
setValue={setName}
error={error}
setError={setError}
dirty={dirty}
required
noRequiredSymbol
/>
<RowFlow>
<Button sx={{ marginLeft: "auto" }} variant="outlined" type="submit">
Create group
</Button>
</RowFlow>
</ColumnFlow>
);
}
export default CreateGroup;