Skip to content

Commit 8ca5922

Browse files
presleyppresleyp
committed
Revert "Switch to using creation mode in XState"
This reverts commit cf8442f.
1 parent 9941c1c commit 8ca5922

File tree

4 files changed

+45
-61
lines changed

4 files changed

+45
-61
lines changed

‎site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useActor } from "@xstate/react"
22
import React, { useContext } from "react"
3-
import { Navigate } from "react-router"
3+
import { useNavigate } from "react-router"
44
import { CreateUserRequest } from "../../../api/typesGenerated"
55
import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
66
import { XServiceContext } from "../../../xServices/StateContext"
@@ -13,23 +13,17 @@ export const CreateUserPage: React.FC = () => {
1313
const xServices = useContext(XServiceContext)
1414
const [usersState, usersSend] = useActor(xServices.usersXService)
1515
const { createUserError, createUserFormErrors } = usersState.context
16+
const navigate = useNavigate()
1617
// There is no field for organization id in Community Edition, so handle its field error like a generic error
17-
const genericError = createUserError || createUserFormErrors?.organization_id ? Language.unknownError : undefined
18+
const genericError = (createUserError || createUserFormErrors?.organization_id) ? Language.unknownError : undefined
1819

19-
if (usersState.matches("creationMode")) {
20-
return (
21-
<CreateUserForm
22-
formErrors={createUserFormErrors}
23-
onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
24-
onCancel={() => {
25-
usersSend("EXIT_CREATION_MODE")
26-
}}
27-
isLoading={usersState.hasTag("loading")}
28-
error={genericError}
29-
/>
30-
)
31-
} else {
32-
// on cancel or success, redirect
33-
return <Navigate to="/users" />
34-
}
20+
return (
21+
<CreateUserForm
22+
formErrors={createUserFormErrors}
23+
onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
24+
onCancel={() => navigate("/users")}
25+
isLoading={usersState.hasTag("loading")}
26+
error={genericError}
27+
/>
28+
)
3529
}

‎site/src/pages/UsersPage/UsersPage.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useActor } from "@xstate/react"
22
import React, { useContext, useEffect } from "react"
3-
import { Navigate } from "react-router"
3+
import { useNavigate } from "react-router"
44
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
55
import { XServiceContext } from "../../xServices/StateContext"
66
import { UsersPageView } from "./UsersPageView"
@@ -9,6 +9,7 @@ export const UsersPage: React.FC = () => {
99
const xServices = useContext(XServiceContext)
1010
const [usersState, usersSend] = useActor(xServices.usersXService)
1111
const { users, pager, getUsersError } = usersState.context
12+
const navigate = useNavigate()
1213

1314
/**
1415
* Fetch users on component mount
@@ -19,15 +20,13 @@ export const UsersPage: React.FC = () => {
1920

2021
if (usersState.matches("error")) {
2122
return <ErrorSummary error={getUsersError} />
22-
} else if (usersState.matches("creationMode")) {
23-
return <Navigate to="/users/create" />
2423
} else {
2524
return (
2625
<UsersPageView
2726
users={users}
2827
pager={pager}
2928
openUserCreationDialog={() => {
30-
usersSend("ENTER_CREATION_MODE")
29+
navigate("/users/create")
3130
}}
3231
/>
3332
)

‎site/src/xServices/StateContext.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useInterpret } from "@xstate/react"
22
import React, { createContext } from "react"
3+
import { useNavigate } from "react-router"
34
import { ActorRefFrom } from "xstate"
45
import { authMachine } from "./auth/authXService"
56
import { buildInfoMachine } from "./buildInfo/buildInfoXService"
@@ -22,12 +23,13 @@ interface XServiceContextType {
2223
export const XServiceContext = createContext({} as XServiceContextType)
2324

2425
export const XServiceProvider: React.FC = ({ children }) => {
26+
const navigate = useNavigate()
2527
return (
2628
<XServiceContext.Provider
2729
value={{
2830
authXService: useInterpret(authMachine),
2931
buildInfoXService: useInterpret(buildInfoMachine),
30-
usersXService: useInterpret(usersMachine),
32+
usersXService: useInterpret(usersMachine.withContext({ users: [], navigate })),
3133
}}
3234
>
3335
{children}

‎site/src/xServices/users/usersXService.ts

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { NavigateFunction } from "react-router"
12
import { assign, createMachine } from "xstate"
23
import * as API from "../../api"
34
import { ApiError, FieldErrors, isApiError, mapApiErrorToFieldErrors } from "../../api/errors"
@@ -15,13 +16,10 @@ export interface UsersContext {
1516
getUsersError?: Error | unknown
1617
createUserError?: Error | unknown
1718
createUserFormErrors?: FieldErrors
19+
navigate?: NavigateFunction
1820
}
1921

20-
export type UsersEvent =
21-
| { type: "GET_USERS" }
22-
| { type: "ENTER_CREATION_MODE" }
23-
| { type: "EXIT_CREATION_MODE" }
24-
| { type: "CREATE"; user: TypesGen.CreateUserRequest }
22+
export type UsersEvent = { type: "GET_USERS" } | { type: "CREATE"; user: TypesGen.CreateUserRequest }
2523

2624
export const usersMachine = createMachine(
2725
{
@@ -47,7 +45,7 @@ export const usersMachine = createMachine(
4745
idle: {
4846
on: {
4947
GET_USERS: "gettingUsers",
50-
ENTER_CREATION_MODE: "creationMode",
48+
CREATE: "creatingUser",
5149
},
5250
},
5351
gettingUsers: {
@@ -69,40 +67,28 @@ export const usersMachine = createMachine(
6967
},
7068
tags: "loading",
7169
},
72-
creationMode: {
73-
initial: "idle",
74-
states: {
75-
idle: {
76-
on: {
77-
CREATE: "creatingUser",
78-
EXIT_CREATION_MODE: "#usersState.idle",
79-
},
70+
creatingUser: {
71+
invoke: {
72+
src: "createUser",
73+
id: "createUser",
74+
onDone: {
75+
target: "idle",
76+
actions: ["displayCreateUserSuccess", "redirectToUsersPage", "clearCreateUserError"],
8077
},
81-
creatingUser: {
82-
invoke: {
83-
src: "createUser",
84-
id: "createUser",
85-
onDone: {
86-
target: "#usersState.idle",
87-
actions: ["displayCreateUserSuccess", "clearCreateUserError"],
88-
},
89-
onError: [
90-
{
91-
target: "idle",
92-
cond: "isFormError",
93-
actions: ["assignCreateUserFormErrors"],
94-
},
95-
{
96-
target: "idle",
97-
actions: ["assignCreateUserError"],
98-
},
99-
],
78+
onError: [
79+
{
80+
target: "idle",
81+
cond: "isFormError",
82+
actions: ["assignCreateUserFormErrors"],
10083
},
101-
tags: "loading",
102-
},
84+
{
85+
target: "idle",
86+
actions: ["assignCreateUserError"],
87+
},
88+
],
10389
},
90+
tags: "loading",
10491
},
105-
10692
error: {
10793
on: {
10894
GET_USERS: "gettingUsers",
@@ -116,7 +102,7 @@ export const usersMachine = createMachine(
116102
createUser: (_, event) => API.createUser(event.user),
117103
},
118104
guards: {
119-
isFormError: (_, event) => isApiError(event.data),
105+
isFormError: (_, event) => isApiError(event.data)
120106
},
121107
actions: {
122108
assignUsers: assign({
@@ -135,7 +121,7 @@ export const usersMachine = createMachine(
135121
}),
136122
assignCreateUserFormErrors: assign({
137123
// the guard ensures it is ApiError
138-
createUserFormErrors: (_, event) => mapApiErrorToFieldErrors((event.data as ApiError).response.data),
124+
createUserFormErrors: (_, event) => mapApiErrorToFieldErrors((event.data as ApiError).response.data)
139125
}),
140126
clearCreateUserError: assign((context: UsersContext) => ({
141127
...context,
@@ -144,6 +130,9 @@ export const usersMachine = createMachine(
144130
displayCreateUserSuccess: () => {
145131
displaySuccess(Language.createUserSuccess)
146132
},
133+
redirectToUsersPage: (context) => {
134+
context.navigate && context.navigate("/users")
135+
},
147136
},
148137
},
149138
)

0 commit comments

Comments
 (0)