Set up page

coder · presleyp · Apr 14, 2022 · Apr 11, 2022 · Apr 11, 2022 · Apr 11, 2022
commit 201b34a1aa2a0f06175683cbaac0946b1bee23eb
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -16,7 +16,7 @@ import { SettingsPage } from "./pages/settings"
 import { TemplatesPage } from "./pages/templates"
 import { TemplatePage } from "./pages/templates/[organization]/[template]"
 import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create"
-import { UsersPage } from "./pages/users"
+import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/workspaces/[workspace]"
 
 export const AppRouter: React.FC = () => (

diff --git a/site/src/components/ErrorSummary/index.tsx b/site/src/components/ErrorSummary/index.tsx
@@ -1,13 +1,13 @@
 import React from "react"
 
 export interface ErrorSummaryProps {
-  error: Error | undefined
+  error: Error | unknown
 }
 
 export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error }) => {
   // TODO: More interesting error page
 
-  if (typeof error === "undefined") {
+  if (!(error instanceof Error)) {
     return <div>{"Unknown error"}</div>
   }
 

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -0,0 +1,25 @@
+import { useActor } from "@xstate/react"
+import React, { useContext } from "react"
+import { ErrorSummary } from "../../components/ErrorSummary"
+import { UsersTable } from "../../components/UsersTable/UsersTable"
+import { XServiceContext } from "../../xServices/StateContext"
+
+export type Role = "Admin" | "Member"
+
+export interface User {
+  username: string
+  email: string
+  siteRole: Role
+}
+
+export const UsersPage: React.FC = () => {
+  const xServices = useContext(XServiceContext)
+  const [usersState] = useActor(xServices.usersXService)
+  const { users, getUsersError } = usersState.context
+
+  if (usersState.matches("error")) {
+    return <ErrorSummary error={getUsersError} />
+  } else {
+    return <UsersTable users={users} />
+  }
+}
diff --git a/site/src/pages/users.tsx b/site/src/pages/users.tsx
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
@@ -3,10 +3,12 @@ import React, { createContext } from "react"
 import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
+import { usersMachine } from "./users/usersXService"
 
 interface XServiceContextType {
-  buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
   authXService: ActorRefFrom<typeof authMachine>
+  buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
+  usersXService: ActorRefFrom<typeof usersMachine>
 }
 
 /**
@@ -23,8 +25,9 @@ export const XServiceProvider: React.FC = ({ children }) => {
   return (
     <XServiceContext.Provider
       value={{
-        buildInfoXService: useInterpret(buildInfoMachine),
         authXService: useInterpret(authMachine),
+        buildInfoXService: useInterpret(buildInfoMachine),
+        usersXService: useInterpret(usersMachine)
       }}
     >
       {children}

diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
@@ -4,8 +4,8 @@ import * as Types from "../../api/types"
 
 export interface UsersContext {
   users: Types.UserResponse[]
-  pager: Types.Pager
-  getUsersError: Error | unknown
+  pager?: Types.Pager
+  getUsersError?: Error | unknown
 }
 
 export type UsersEvent = { type: 'GET_USERS' }
@@ -24,6 +24,9 @@ export const usersMachine =
         },
       },
       id: "usersState",
+      context: {
+        users: [],
+      },
       initial: "gettingUsers",
       states: {
         gettingUsers: {