Wire up more to the create form

coder · bryphe-coder · Jan 26, 2022 · Jan 25, 2022 · Jan 25, 2022 · Jan 25, 2022
commit 502a034ee3c75561df5d8d3ce529db229ba2c0ec
diff --git a/site/api.ts b/site/api.ts
@@ -1,3 +1,5 @@
+import { mutate } from "swr"
+
 interface LoginResponse {
   session_token: string
 }
@@ -39,6 +41,32 @@ export interface Project {
   active_version_id: string
 }
 
+export interface CreateProjectRequest {
+  name: string
+  organizationId: string
+  provisioner: string
+}
+
+export namespace Project {
+  export const create = async (request: CreateProjectRequest): Promise<Project> => {
+    const response = await fetch(`/api/v2/projects/${request.organizationId}/`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(request),
+    })
+
+    const body = await response.json()
+    await mutate("/api/v2/projects")
+    if (!response.ok) {
+      throw new Error(body.message)
+    }
+
+    return body
+  }
+}
+
 export const login = async (email: string, password: string): Promise<LoginResponse> => {
   const response = await fetch("/api/v2/login", {
     method: "POST",

diff --git a/site/forms/CreateProjectForm.tsx b/site/forms/CreateProjectForm.tsx
@@ -12,23 +12,17 @@ import {
   DropdownItem,
 } from "../components/Form"
 
-import { Organization, Provisioner } from "./../api"
-
-export interface CreateProjectRequest {
-  provisionerId: string
-  organizationId: string
-  name: string
-}
+import { Organization, Project, Provisioner, CreateProjectRequest } from "./../api"
 
 export interface CreateProjectFormProps {
   provisioners: Provisioner[]
   organizations: Organization[]
-  onSubmit: (request: CreateProjectRequest) => Promise<void>
+  onSubmit: (request: CreateProjectRequest) => Promise<Project>
   onCancel: () => void
 }
 
 const validationSchema = Yup.object({
-  provisionerId: Yup.string().required("Email is required."),
+  provisioner: Yup.string().required("Provisioner is required."),
   organizationId: Yup.string().required("Organization is required."),
   name: Yup.string().required("Name is required"),
 })
@@ -46,18 +40,20 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
 
   const form = useFormik<CreateProjectRequest>({
     initialValues: {
-      provisionerId: provisioners[0].id,
-      organizationId: organizations[0].id,
+      provisioner: provisioners[0].id,
+      organizationId: organizations[0].name,
       name: "",
     },
     enableReinitialize: true,
     validationSchema: validationSchema,
-    onSubmit: onSubmit,
+    onSubmit: (req) => {
+      return onSubmit(req)
+    },
   })
 
   const organizationDropDownItems: DropdownItem[] = organizations.map((org) => {
     return {
-      value: org.id,
+      value: org.name,
       name: org.name,
     }
   })
@@ -100,7 +96,7 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
       <FormSection title="Provider">
         <FormDropdownField
           form={form}
-          formFieldName={"provisionerId"}
+          formFieldName={"provisioner"}
           helperText="The backing provisioner for this project."
           items={provisionerDropDownItems}
           fullWidth
@@ -113,7 +109,16 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
         <Button className={styles.button} onClick={onCancel} variant="outlined">
           Cancel
         </Button>
-        <Button className={styles.button} onClick={form.submitForm} variant="contained" color="primary" type="submit">
+        <Button
+          className={styles.button}
+          onClick={() => {
+            console.log("submit clicked: " + JSON.stringify(form.values))
+            form.submitForm()
+          }}
+          variant="contained"
+          color="primary"
+          type="submit"
+        >
           Submit
         </Button>
       </div>

diff --git a/site/pages/projects/create.tsx b/site/pages/projects/create.tsx
@@ -3,8 +3,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useRouter } from "next/router"
 import useSWR from "swr"
 
-import { provisioners } from "../../api"
+import * as API from "../../api"
 import { useUser } from "../../contexts/UserContext"
+import { ErrorSummary } from "../../components/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { CreateProjectForm } from "../../forms/CreateProjectForm"
 
@@ -15,8 +16,7 @@ const CreateProjectPage: React.FC = () => {
   const { data: organizations, error } = useSWR("/api/v2/users/me/organizations")
 
   if (error) {
-    // TODO: Merge with error component in other PR
-    return <div>{"Error"}</div>
+    return <ErrorSummary error={error} />
   }
 
   if (!me || !organizations) {
@@ -27,12 +27,18 @@ const CreateProjectPage: React.FC = () => {
     await router.push("/projects")
   }
 
+  const onSubmit = async (req: API.CreateProjectRequest) => {
+    const project = await API.Project.create(req)
+    await router.push("/projects")
+    return project
+  }
+
   return (
     <div className={styles.root}>
       <CreateProjectForm
-        provisioners={provisioners}
+        provisioners={API.provisioners}
         organizations={organizations}
-        onSubmit={(request) => alert(JSON.stringify(request))}
+        onSubmit={onSubmit}
         onCancel={onCancel}
       />
     </div>