Hook up api

site/src/api/index.ts

@@ -2,6 +2,7 @@ import axios, { AxiosRequestHeaders } from "axios"
 import { mutate } from "swr"
 import { MockPager, MockUser, MockUser2 } from "../testHelpers/entities"
 import * as Types from "./types"
+import * as GenTypes from "./typesGenerated"
 
 const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
   "Content-Type": "application/json",
@@ -79,6 +80,11 @@ export const getUsers = async (): Promise<Types.PagedUsers> => {
   })
 }
 
+export const createUser = async (user: GenTypes.CreateUserRequest): Promise<GenTypes.User> => {
+  const response = await axios.post<GenTypes.User>("/api/v2/users/", user)
+  return response.data
+}
+
 export const getBuildInfo = async (): Promise<Types.BuildInfoResponse> => {
   const response = await axios.get("/api/v2/buildinfo")
   return response.data

site/src/components/GlobalSnackbar/utils.ts

@@ -60,3 +60,7 @@ export const displayMsg = (msg: string, additionalMsg?: string): void => {
 export const displaySuccess = (msg: string, additionalMsg?: string): void => {
   dispatchNotificationEvent(MsgType.Success, msg, additionalMsg ? [additionalMsg] : undefined)
 }
+
+export const displayError = (msg: string, additionalMsg?: string): void => {
+  dispatchNotificationEvent(MsgType.Error, msg, additionalMsg ? [additionalMsg] : undefined)
+}

site/src/xServices/users/usersXService.ts

@@ -1,14 +1,22 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
 import * as Types from "../../api/types"
+import * as GenTypes from "../../api/typesGenerated"
+import { displayError } from "../../components/GlobalSnackbar/utils"
+
+const Language = {
+  createUserError: "Unable to create user",
+  createUserSuccess: "Successfully created user"
+}
 
 export interface UsersContext {
   users: Types.UserResponse[]
   pager?: Types.Pager
   getUsersError?: Error | unknown
+  createUserError?: Error | unknown
 }
 
-export type UsersEvent = { type: "GET_USERS" }
+export type UsersEvent = { type: "GET_USERS" } | { type: "CREATE", user: GenTypes.CreateUserRequest }
 
 export const usersMachine = createMachine(
   {
@@ -19,6 +27,9 @@ export const usersMachine = createMachine(
       services: {} as {
         getUsers: {
           data: Types.PagedUsers
+        },
+        createUser: {
+          data: GenTypes.User
         }
       },
     },
@@ -26,15 +37,21 @@ export const usersMachine = createMachine(
     context: {
       users: [],
     },
-    initial: "gettingUsers",
+    initial: "idle",
     states: {
+      idle: {
+        on: {
+          GET_USERS: "gettingUsers",
+          CREATE: "creatingUser"
+        },
+      },
       gettingUsers: {
         invoke: {
           src: "getUsers",
           id: "getUsers",
           onDone: [
             {
-              target: "#usersState.ready",
+              target: "#usersState.idle",
               actions: ["assignUsers", "clearGetUsersError"],
             },
           ],
@@ -47,10 +64,20 @@ export const usersMachine = createMachine(
         },
         tags: "loading",
       },
-      ready: {
-        on: {
-          GET_USERS: "gettingUsers",
+      creatingUser: {
+        invoke: {
+          src: "createUser",
+          id: "createUser",
+          onDone: {
+            target: "gettingUsers",
+            actions: "displayCreateUserSuccess"
+          },
+          onError: {
+            target: "idle",
+            actions: "displayCreateUserError"
+          }
         },
+        tags: "loading"
       },
       error: {
         on: {
@@ -62,6 +89,9 @@ export const usersMachine = createMachine(
   {
     services: {
       getUsers: API.getUsers,
+      createUser: (_, event) => (
+        API.createUser(event.user)
+      )
     },
     actions: {
       assignUsers: assign({
@@ -75,6 +105,12 @@ export const usersMachine = createMachine(
         ...context,
         getUsersError: undefined,
       })),
+      displayCreateUserError: () => {
+        displayError(Language.createUserError)
+      },
+      displayCreateUserSuccess: () => {
+        displayError(Language.createUserSuccess)
+      }
     },
   },
 )