Skip to content

Commit 907a523

Browse files
bryphe-coderbryphe-coder
committed
Start pulling out AppPage/FormPage
1 parent cc411d0 commit 907a523

File tree

12 files changed

+247
-132
lines changed

12 files changed

+247
-132
lines changed

‎site/components/FullScreenForm/Title.tsx renamed to ‎site/components/Form/Title.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@ const useStyles = makeStyles((theme) => ({
2323
}))
2424

2525
export const Title: React.FC<TitleProps> = ({ title, organization }) => {
26-
2726
const styles = useStyles()
2827

29-
return <div className={styles.title} >
30-
<Typography variant="h3">{title}</Typography>
31-
<Typography variant="caption">
32-
In <strong>{organization}</strong> organization
33-
</Typography>
34-
</div>
35-
}
28+
return (
29+
<div className={styles.title}>
30+
<Typography variant="h3">{title}</Typography>
31+
<Typography variant="caption">
32+
In <strong>{organization}</strong> organization
33+
</Typography>
34+
</div>
35+
)
36+
}

‎site/components/Form/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Title } from "./Title"

‎site/components/FullScreenForm/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎site/components/Page/AppPage.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from "react"
2+
3+
import { makeStyles } from "@material-ui/core"
4+
import { Navbar } from "../Navbar"
5+
import { Footer } from "./Footer"
6+
7+
const useStyles = makeStyles((theme) => ({
8+
root: {
9+
display: "flex",
10+
flexDirection: "column",
11+
},
12+
header: {
13+
flex: 0,
14+
},
15+
body: {
16+
height: "100%",
17+
flex: 1,
18+
},
19+
footer: {
20+
flex: 0,
21+
},
22+
}))
23+
24+
/**
25+
* `AppPage` is a main application page - containing the following common elements:
26+
* - A navbar, with organization dropdown and users
27+
* - A footer
28+
*/
29+
export const AppPage: React.FC = ({ children }) => {
30+
const styles = useStyles()
31+
32+
const header = (
33+
<div className={styles.header}>
34+
<Navbar />
35+
</div>
36+
)
37+
38+
const footer = (
39+
<div className={styles.footer}>
40+
<Footer />
41+
</div>
42+
)
43+
44+
return (
45+
<div className={styles.root}>
46+
{header}
47+
{children}
48+
{footer}
49+
</div>
50+
)
51+
}

‎site/components/Page/FormPage.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import Button from "@material-ui/core/Button"
2+
import Typography from "@material-ui/core/Typography"
3+
import { makeStyles } from "@material-ui/core/styles"
4+
import { ButtonProps } from "@material-ui/core/Button"
5+
import React from "react"
6+
7+
import { Title } from "./../Form"
8+
9+
const useStyles = makeStyles(() => ({
10+
form: {
11+
display: "flex",
12+
flexDirection: "column",
13+
flex: "1 1 auto",
14+
},
15+
header: {
16+
flex: "0",
17+
marginTop: "1em",
18+
},
19+
body: {
20+
flex: "1",
21+
overflowY: "auto",
22+
},
23+
footer: {
24+
display: "flex",
25+
flex: "0",
26+
flexDirection: "row",
27+
justifyContent: "center",
28+
alignItems: "center",
29+
},
30+
button: {
31+
margin: "1em",
32+
},
33+
}))
34+
35+
export interface FormButton {
36+
props: ButtonProps
37+
title: string
38+
}
39+
40+
export interface FormPageProps {
41+
title: string
42+
organization: string
43+
buttons?: FormButton[]
44+
}
45+
46+
export const FormPage: React.FC<FormPageProps> = ({ title, organization, children, buttons }) => {
47+
const styles = useStyles()
48+
49+
const actualButtons = buttons || []
50+
51+
return (
52+
<div className={styles.form}>
53+
<div className={styles.header}>
54+
<Title title={title} organization={organization} />
55+
</div>
56+
<div className={styles.body}>{children}</div>
57+
<div className={styles.footer}>
58+
{actualButtons.map(({ props, title }) => {
59+
return (
60+
<Button {...props} className={styles.button}>
61+
{" "}
62+
{title}
63+
</Button>
64+
)
65+
})}
66+
</div>
67+
</div>
68+
)
69+
}

‎site/components/Page/RedirectPage.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useEffect } from "react"
2+
import { useRouter } from "next/router"
3+
4+
export interface RedirectPageProps {
5+
path: string
6+
}
7+
8+
export const RedirectPage: React.FC<RedirectPageProps> = ({ path }) => {
9+
const router = useRouter()
10+
11+
useEffect(() => {
12+
router.push(path)
13+
})
14+
15+
return null
16+
}

‎site/components/Page/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
export * from "./Footer"
2+
export * from "./AppPage"
3+
export * from "./FormPage"
4+
export * from "./RedirectPage"

‎site/pages/_app.tsx

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,6 @@ import ThemeProvider from "@material-ui/styles/ThemeProvider"
66
import { light } from "../theme"
77
import { AppProps } from "next/app"
88
import { makeStyles } from "@material-ui/core"
9-
import { Navbar } from "../components/Navbar"
10-
import { Footer } from "../components/Page"
11-
12-
/**
13-
* `Contents` is the wrapper around the core app UI,
14-
* containing common UI elements like the footer and navbar.
15-
*
16-
* This can't be inlined in `MyApp` because it requires styling,
17-
* and `useStyles` needs to be inside a `<ThemeProvider />`
18-
*/
19-
const Contents: React.FC<AppProps> = ({ Component, pageProps }) => {
20-
const styles = useStyles()
21-
22-
const header = (
23-
<div className={styles.header}>
24-
<Navbar />
25-
</div>
26-
)
27-
28-
const footer = (
29-
<div className={styles.footer}>
30-
<Footer />
31-
</div>
32-
)
33-
34-
return (
35-
<div className={styles.root}>
36-
{header}
37-
<Component {...pageProps} />
38-
{footer}
39-
</div>
40-
)
41-
}
429

4310
/**
4411
* SafeHydrate is a component that only allows its children to be rendered
@@ -53,32 +20,15 @@ const SafeHydrate: React.FC = ({ children }) => (
5320
* <App /> is the root rendering logic of the application - setting up our router
5421
* and any contexts / global state management.
5522
*/
56-
const MyApp: React.FC<AppProps> = (appProps) => {
23+
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
5724
return (
5825
<SafeHydrate>
5926
<ThemeProvider theme={light}>
6027
<CssBaseline />
61-
<Contents {...appProps} />
28+
<Component {...pageProps} />
6229
</ThemeProvider>
6330
</SafeHydrate>
6431
)
6532
}
6633

67-
const useStyles = makeStyles((theme) => ({
68-
root: {
69-
display: "flex",
70-
flexDirection: "column",
71-
},
72-
header: {
73-
flex: 0,
74-
},
75-
body: {
76-
height: "100%",
77-
flex: 1,
78-
},
79-
footer: {
80-
flex: 0,
81-
},
82-
}))
83-
8434
export default MyApp

‎site/pages/index.tsx

Lines changed: 4 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,8 @@
11
import React from "react"
2-
import { makeStyles, Box, Paper } from "@material-ui/core"
3-
import { AddToQueue as AddWorkspaceIcon } from "@material-ui/icons"
2+
import { RedirectPage } from "./../components/Page"
43

5-
import { EmptyState, SplitButton } from "../components"
6-
7-
const WorkspacesPage: React.FC = () => {
8-
const styles = useStyles()
9-
10-
const createWorkspace = () => {
11-
alert("create")
12-
}
13-
14-
const button = {
15-
children: "New Workspace",
16-
onClick: createWorkspace,
17-
}
18-
19-
return (
20-
<>
21-
<div className={styles.header}>
22-
<SplitButton<string>
23-
color="primary"
24-
onClick={createWorkspace}
25-
options={[
26-
{
27-
label: "New workspace",
28-
value: "custom",
29-
},
30-
{
31-
label: "New workspace from template",
32-
value: "template",
33-
},
34-
]}
35-
startIcon={<AddWorkspaceIcon />}
36-
textTransform="none"
37-
/>
38-
</div>
39-
40-
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
41-
<Box pt={4} pb={4}>
42-
<EmptyState message="No workspaces available." button={button} />
43-
</Box>
44-
</Paper>
45-
</>
46-
)
4+
export const IndexPage: React.FC = () => {
5+
return <RedirectPage path="/workspaces" />
476
}
487

49-
const useStyles = makeStyles((theme) => ({
50-
header: {
51-
display: "flex",
52-
flexDirection: "row-reverse",
53-
justifyContent: "space-between",
54-
margin: "1em auto",
55-
maxWidth: "1380px",
56-
padding: theme.spacing(2, 6.25, 0),
57-
width: "100%",
58-
},
59-
}))
60-
61-
export default WorkspacesPage
8+
export default IndexPage

‎site/pages/workspaces/create/[projectId].tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react"
22
import { useRouter } from "next/router"
33

44
const CreateProjectPage: React.FC = () => {
5-
65
const router = useRouter()
76
const { projectId } = router.query
87

@@ -15,9 +14,7 @@ const CreateProjectPage: React.FC = () => {
1514
onClick: createWorkspace,
1615
}
1716

18-
return (
19-
<div>Create Page: {projectId}</div>
20-
)
17+
return <div>Create Page: {projectId}</div>
2118
}
2219

23-
export default CreateProjectPage
20+
export default CreateProjectPage

‎site/pages/workspaces/create/index.tsx

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,39 @@
1-
import Typography from "@material-ui/core/Typography"
21
import React from "react"
32

4-
import { Title } from "../../../components/FullScreenForm"
3+
import { useRouter } from "next/router"
4+
import { FormPage, FormButton } from "../../../components/Page"
55

66
const CreateSelectProjectPage: React.FC = () => {
7+
const router = useRouter()
78

89
const createWorkspace = () => {
910
alert("create")
1011
}
1112

12-
const button = {
13-
children: "Next",
14-
onClick: createWorkspace,
13+
const cancel = () => {
14+
router.back()
1515
}
1616

17-
return (
18-
<Title title={"Select Project"} organization={"test-org"} />
19-
)
17+
const buttons: FormButton[] = [
18+
{
19+
title: "Cancel",
20+
props: {
21+
variant: "outlined",
22+
onClick: cancel,
23+
},
24+
},
25+
{
26+
title: "Next",
27+
props: {
28+
variant: "contained",
29+
color: "primary",
30+
disabled: false,
31+
type: "submit",
32+
},
33+
},
34+
]
35+
36+
return <FormPage title={"Select Project"} organization={"test-org"} buttons={buttons}></FormPage>
2037
}
2138

22-
export default CreateSelectProjectPage
39+
export default CreateSelectProjectPage

0 commit comments

Comments
 (0)