Skip to content

Commit 021e4cd

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Load users from the API (coder#1218)
1 parent 69e26c4 commit 021e4cd

File tree

9 files changed

+22
-49
lines changed

9 files changed

+22
-49
lines changed

‎site/src/api/index.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import axios, { AxiosRequestHeaders } from "axios"
22
import { mutate } from "swr"
3-
import { MockPager, MockUser, MockUser2 } from "../testHelpers/entities"
43
import * as Types from "./types"
54
import * as TypesGen from "./typesGenerated"
65

@@ -76,13 +75,9 @@ export const getApiKey = async (): Promise<Types.APIKeyResponse> => {
7675
return response.data
7776
}
7877

79-
export const getUsers = async (): Promise<Types.PagedUsers> => {
80-
// const response = await axios.get<Types.UserResponse[]>("/api/v2/users")
81-
// return response.data
82-
return Promise.resolve({
83-
page: [MockUser, MockUser2],
84-
pager: MockPager,
85-
})
78+
export const getUsers = async (): Promise<TypesGen.User[]> => {
79+
const response = await axios.get<TypesGen.User[]>("/api/v2/users?offset=0&limit=1000")
80+
return response.data
8681
}
8782

8883
export const createUser = async (user: Types.CreateUserRequest): Promise<TypesGen.User> => {

‎site/src/api/types.ts

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,6 @@ export interface UserAgent {
8888
readonly os: string
8989
}
9090

91-
export interface Pager {
92-
total: number
93-
}
94-
95-
export interface PagedUsers {
96-
page: UserResponse[]
97-
pager: Pager
98-
}
99-
10091
export interface WorkspaceAutostartRequest {
10192
schedule: string
10293
}

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import { screen } from "@testing-library/react"
22
import React from "react"
3-
import { MockPager, render } from "../../testHelpers"
3+
import { render } from "../../testHelpers"
44
import { UsersPage } from "./UsersPage"
5-
import { Language } from "./UsersPageView"
65

76
describe("Users Page", () => {
8-
it("has a header with the total number of users", async () => {
9-
render(<UsersPage />)
10-
const total = await screen.findByText(/\d+ total/)
11-
expect(total.innerHTML).toEqual(Language.pageSubtitle(MockPager))
12-
})
137
it("shows users", async () => {
148
render(<UsersPage />)
159
const users = await screen.findAllByText(/.*@coder.com/)

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import { useActor } from "@xstate/react"
22
import React, { useContext, useEffect } from "react"
33
import { useNavigate } from "react-router"
44
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
5+
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
56
import { XServiceContext } from "../../xServices/StateContext"
67
import { UsersPageView } from "./UsersPageView"
78

89
export const UsersPage: React.FC = () => {
910
const xServices = useContext(XServiceContext)
1011
const [usersState, usersSend] = useActor(xServices.usersXService)
11-
const { users, pager, getUsersError } = usersState.context
12+
const { users, getUsersError } = usersState.context
1213
const navigate = useNavigate()
1314

1415
/**
@@ -20,11 +21,14 @@ export const UsersPage: React.FC = () => {
2021

2122
if (usersState.matches("error")) {
2223
return <ErrorSummary error={getUsersError} />
24+
}
25+
26+
if (!users) {
27+
return <FullScreenLoader />
2328
} else {
2429
return (
2530
<UsersPageView
2631
users={users}
27-
pager={pager}
2832
openUserCreationDialog={() => {
2933
navigate("/users/create")
3034
}}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ComponentMeta, Story } from "@storybook/react"
22
import React from "react"
3-
import { MockPager, MockUser, MockUser2 } from "../../testHelpers"
3+
import { MockUser, MockUser2 } from "../../testHelpers"
44
import { UsersPageView, UsersPageViewProps } from "./UsersPageView"
55

66
export default {
@@ -13,7 +13,6 @@ const Template: Story<UsersPageViewProps> = (args) => <UsersPageView {...args} /
1313
export const Ready = Template.bind({})
1414
Ready.args = {
1515
users: [MockUser, MockUser2],
16-
pager: MockPager,
1716
}
1817
export const Empty = Template.bind({})
1918
Empty.args = {

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,29 @@
1+
import Paper from "@material-ui/core/Paper"
12
import { makeStyles } from "@material-ui/core/styles"
23
import React from "react"
3-
import { Pager, UserResponse } from "../../api/types"
4+
import { UserResponse } from "../../api/types"
45
import { Header } from "../../components/Header/Header"
56
import { UsersTable } from "../../components/UsersTable/UsersTable"
67

78
export const Language = {
89
pageTitle: "Users",
9-
pageSubtitle: (pager: Pager | undefined): string => (pager ? `${pager.total} total` : ""),
1010
newUserButton: "New User",
1111
}
1212

1313
export interface UsersPageViewProps {
1414
users: UserResponse[]
15-
pager?: Pager
1615
openUserCreationDialog: () => void
1716
}
1817

19-
export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager, openUserCreationDialog }) => {
18+
export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, openUserCreationDialog }) => {
2019
const styles = useStyles()
2120

2221
return (
2322
<div className={styles.flexColumn}>
24-
<Header
25-
title={Language.pageTitle}
26-
subTitle={Language.pageSubtitle(pager)}
27-
action={{ text: Language.newUserButton, onClick: openUserCreationDialog }}
28-
/>
29-
<UsersTable users={users} />
23+
<Header title={Language.pageTitle} action={{ text: Language.newUserButton, onClick: openUserCreationDialog }} />
24+
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
25+
<UsersTable users={users} />
26+
</Paper>
3027
</div>
3128
)
3229
}

‎site/src/testHelpers/entities.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
BuildInfoResponse,
33
Organization,
4-
Pager,
54
Provisioner,
65
Template,
76
UserAgent,
@@ -38,10 +37,6 @@ export const MockUser2: UserResponse = {
3837
organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
3938
}
4039

41-
export const MockPager: Pager = {
42-
total: 2,
43-
}
44-
4540
export const MockOrganization: Organization = {
4641
id: "test-org",
4742
name: "Test Organization",

‎site/src/testHelpers/handlers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const handlers = [
2222

2323
// users
2424
rest.get("/api/v2/users", async (req, res, ctx) => {
25-
return res(ctx.status(200), ctx.json({ page: [M.MockUser, M.MockUser2], pager: M.MockPager }))
25+
return res(ctx.status(200), ctx.json([M.MockUser, M.MockUser2]))
2626
}),
2727
rest.post("/api/v2/users", async (req, res, ctx) => {
2828
return res(ctx.status(200), ctx.json(M.MockUser))

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ export const Language = {
1010
}
1111

1212
export interface UsersContext {
13-
users: Types.UserResponse[]
14-
pager?: Types.Pager
13+
users?: TypesGen.User[]
1514
getUsersError?: Error | unknown
1615
createUserError?: Error | unknown
1716
createUserFormErrors?: FieldErrors
@@ -27,7 +26,7 @@ export const usersMachine = createMachine(
2726
events: {} as UsersEvent,
2827
services: {} as {
2928
getUsers: {
30-
data: Types.PagedUsers
29+
data: TypesGen.User[]
3130
}
3231
createUser: {
3332
data: TypesGen.User
@@ -104,8 +103,7 @@ export const usersMachine = createMachine(
104103
},
105104
actions: {
106105
assignUsers: assign({
107-
users: (_, event) => event.data.page,
108-
pager: (_, event) => event.data.pager,
106+
users: (_, event) => event.data,
109107
}),
110108
assignGetUsersError: assign({
111109
getUsersError: (_, event) => event.data,

0 commit comments

Comments
 (0)