Make cancel work

This commit is contained in:
Presley
2022-04-25 16:52:17 +00:00
parent c2de4d49d3
commit 028840ad3d
2 changed files with 6 additions and 3 deletions

View File

@ -21,6 +21,7 @@ const Language = {
export interface CreateUserFormProps { export interface CreateUserFormProps {
onSubmit: (user: CreateUserRequest) => void onSubmit: (user: CreateUserRequest) => void
onCancel: () => void
} }
const validationSchema = Yup.object({ const validationSchema = Yup.object({
@ -29,7 +30,7 @@ const validationSchema = Yup.object({
username: Yup.string().required(), username: Yup.string().required(),
}) })
export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit }) => { export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit, onCancel }) => {
const form: FormikContextType<CreateUserRequest> = useFormik<CreateUserRequest>({ const form: FormikContextType<CreateUserRequest> = useFormik<CreateUserRequest>({
initialValues: { initialValues: {
email: "", email: "",
@ -70,10 +71,10 @@ export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit }) => {
variant="outlined" variant="outlined"
/> />
<div> <div>
<Button onClick={onCancel}>{Language.cancel}</Button>
<LoadingButton color="primary" type="submit" variant="contained"> <LoadingButton color="primary" type="submit" variant="contained">
{Language.createUser} {Language.createUser}
</LoadingButton> </LoadingButton>
<Button>{Language.cancel}</Button>
</div> </div>
</form> </form>
) )

View File

@ -1,5 +1,6 @@
import { useActor } from "@xstate/react" import { useActor } from "@xstate/react"
import React, { useContext } from "react" import React, { useContext } from "react"
import { useNavigate } from "react-router"
import { CreateUserRequest } from "../../../api/typesGenerated" import { CreateUserRequest } from "../../../api/typesGenerated"
import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm" import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
import { XServiceContext } from "../../../xServices/StateContext" import { XServiceContext } from "../../../xServices/StateContext"
@ -7,6 +8,7 @@ import { XServiceContext } from "../../../xServices/StateContext"
export const CreateUserPage = () => { export const CreateUserPage = () => {
const xServices = useContext(XServiceContext) const xServices = useContext(XServiceContext)
const [_, usersSend] = useActor(xServices.usersXService) const [_, usersSend] = useActor(xServices.usersXService)
const navigate = useNavigate()
return <CreateUserForm onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })} /> return <CreateUserForm onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })} onCancel={() => navigate("/users")} />
} }