Start scaffolding project selection

bryphe-coder · bryphe-coder · commit 0a5c48a9083b · 2022-01-19T18:37:58.000Z
diff --git a/site/api.ts b/site/api.ts
@@ -1,19 +1,22 @@
 export interface Project {
   id: string
+  icon: string
   name: string
   description: string
 }
 
 export namespace Project {
-  export const get = async (org: string): Promise<Project[]> => {
+  export const get = (org: string): Promise<Project[]> => {
     const project1: Project = {
       id: "test-terraform-1",
+      icon: "https://www.datocms-assets.com/2885/1620155117-brandhcterraformverticalcolorwhite.svg",
       name: "Terraform Project 1",
       description: "Simple terraform project that deploys a kubernetes provider",
     }
 
     const project2: Project = {
       id: "test-echo-1",
+      icon: "https://www.datocms-assets.com/2885/1620155117-brandhcterraformverticalcolorwhite.svg",
       name: "Echo Project",
       description: "Project built on echo provisioner",
     }
diff --git a/site/components/Navbar/index.tsx b/site/components/Navbar/index.tsx
@@ -18,11 +18,7 @@ export const Navbar: React.FC = () => {
         </Link>
       </div>
       <div className={styles.fullWidth} />
-      <div className={styles.fixed}>
-        <List>
-          <ListSubheader>Manage</ListSubheader>
-        </List>
-      </div>
+      <div className={styles.fixed} />
     </div>
   )
 }
diff --git a/site/components/Page/FormPage.tsx b/site/components/Page/FormPage.tsx
@@ -17,6 +17,7 @@ const useStyles = makeStyles(() => ({
     marginTop: "1em",
   },
   body: {
+    padding: "2em",
     flex: "1",
     overflowY: "auto",
   },
@@ -58,7 +59,6 @@ export const FormPage: React.FC<FormPageProps> = ({ title, organization, childre
         {actualButtons.map(({ props, title }) => {
           return (
             <Button {...props} className={styles.button}>
-              {" "}
               {title}
             </Button>
           )
diff --git a/site/components/Project/ProjectIcon.tsx b/site/components/Project/ProjectIcon.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { Box, Typography } from "@material-ui/core"
+
+export interface ProjectIconProps {
+  title: string
+  icon: string
+  description?: string
+  onClick: () => void
+}
+
+export const ProjectIcon: React.FC<ProjectIconProps> = ({ title, icon, onClick }) => {
+  return (
+    <Box
+      css={{
+        flex: "0",
+        margin: "1em",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        border: "1px solid red",
+      }}
+      onClick={onClick}
+    >
+      <img src={icon} width={"128px"} height={"128px"} />
+      <Typography>{title}</Typography>
+    </Box>
+  )
+}
diff --git a/site/hooks/useRequest.ts b/site/hooks/useRequest.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react"
+
+export type RequestState<TPayload> =
+  | {
+      state: "loading"
+    }
+  | {
+      state: "error"
+      error: Error
+    }
+  | {
+      state: "success"
+      payload: TPayload
+    }
+
+export const useRequestor = <TPayload>(fn: () => Promise<TPayload>) => {
+  const [requestState, setRequestState] = useState<RequestState<TPayload>>({ state: "loading" })
+
+  useEffect(() => {
+    const f = async () => {
+      try {
+        const response = await fn()
+        setRequestState({ state: "success", payload: response })
+      } catch (err) {
+        setRequestState({ state: "error", error: err })
+      }
+    }
+    f()
+  })
+
+  return requestState
+}
diff --git a/site/pages/workspaces/create/[projectId].tsx b/site/pages/workspaces/create/[projectId].tsx
@@ -1,20 +1,41 @@
 import React from "react"
 import { useRouter } from "next/router"
 
+import { FormPage, FormButton } from "../../../components/Page"
+
 const CreateProjectPage: React.FC = () => {
   const router = useRouter()
   const { projectId } = router.query
 
-  const createWorkspace = () => {
-    alert("create")
+  const cancel = () => {
+    router.back()
   }
 
-  const button = {
-    children: "New Workspace",
-    onClick: createWorkspace,
+  const submit = () => {
+    alert("Submitting workspace")
   }
 
-  return <div>Create Page: {projectId}</div>
+  const buttons: FormButton[] = [
+    {
+      title: "Cancel",
+      props: {
+        variant: "outlined",
+        onClick: cancel,
+      },
+    },
+    {
+      title: "Submit",
+      props: {
+        variant: "contained",
+        color: "primary",
+        disabled: false,
+        type: "submit",
+        onClick: submit,
+      },
+    },
+  ]
+
+  return <FormPage title={"Create Project"} organization={"test-org"} buttons={buttons}></FormPage>
 }
 
 export default CreateProjectPage
diff --git a/site/pages/workspaces/create/index.tsx b/site/pages/workspaces/create/index.tsx
@@ -2,18 +2,44 @@ import React from "react"
 
 import { useRouter } from "next/router"
 import { FormPage, FormButton } from "../../../components/Page"
+import { useRequestor } from "../../../hooks/useRequest"
+import * as Api from "./../../../api"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import { ProjectIcon } from "../../../components/Project/ProjectIcon"
+import Box from "@material-ui/core/Box"
 
 const CreateSelectProjectPage: React.FC = () => {
   const router = useRouter()
-
-  const createWorkspace = () => {
-    alert("create")
-  }
+  const requestState = useRequestor(() => Api.Project.get("test-org"))
 
   const cancel = () => {
     router.back()
   }
 
+  const next = (projectId: string) => () => {
+    router.push(`/workspaces/create/${projectId}`)
+  }
+
+  let body
+
+  switch (requestState.state) {
+    case "loading":
+      body = <CircularProgress />
+      break
+    case "error":
+      body = <>{requestState.error.toString()}</>
+      break
+    case "success":
+      body = (
+        <>
+          {requestState.payload.map((project) => {
+            return <ProjectIcon title={project.name} icon={project.icon} onClick={() => alert("clicked")} />
+          })}
+        </>
+      )
+      break
+  }
+
   const buttons: FormButton[] = [
     {
       title: "Cancel",
@@ -29,11 +55,18 @@ const CreateSelectProjectPage: React.FC = () => {
         color: "primary",
         disabled: false,
         type: "submit",
+        onClick: next("test1"),
       },
     },
   ]
 
-  return <FormPage title={"Select Project"} organization={"test-org"} buttons={buttons}></FormPage>
+  return (
+    <FormPage title={"Select Project"} organization={"test-org"} buttons={buttons}>
+      <Box style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
+        {body}
+      </Box>
+    </FormPage>
+  )
 }
 
 export default CreateSelectProjectPage

Original file line number	Diff line number	Diff line change
`@@ -18,11 +18,7 @@ export const Navbar: React.FC = () => {`
`18`	`18`	`</Link>`
`19`	`19`	`</div>`
`20`	`20`	`<div className={styles.fullWidth} />`
`21`		`- <div className={styles.fixed}>`
`22`		`- <List>`
`23`		`- <ListSubheader>Manage</ListSubheader>`
`24`		`- </List>`
`25`		`- </div>`
	`21`	`+ <div className={styles.fixed} />`
`26`	`22`	`</div>`
`27`	`23`	`)`
`28`	`24`	`}`