Skip to content

Commit 0530952

Browse files
bryphe-coderbryphe-coder
committed
Some cleanup / refactoring
1 parent a0a9da2 commit 0530952

File tree

9 files changed

+123
-138
lines changed

9 files changed

+123
-138
lines changed

‎site/src/app.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react"
2+
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
3+
4+
import CssBaseline from "@material-ui/core/CssBaseline"
5+
import ThemeProvider from "@material-ui/styles/ThemeProvider"
6+
7+
import { dark } from "./theme"
8+
import { Workspaces } from "./pages"
9+
10+
/**
11+
* <App /> is the root rendering logic of the application - setting up our router
12+
* and any contexts / global state management.
13+
* @returns
14+
*/
15+
16+
export const App: React.FC = () => {
17+
return (
18+
<ThemeProvider theme={dark}>
19+
<CssBaseline />
20+
<Router>
21+
<Switch>
22+
<Route path="/">
23+
<Workspaces />
24+
</Route>
25+
</Switch>
26+
</Router>
27+
</ThemeProvider>
28+
)
29+
}

‎site/src/components/Navbar/BorderedMenu.tsx

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎site/src/components/Navbar/NavMenuEntry.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import ListItemIcon from "@material-ui/core/ListItemIcon"
2-
import ListItemText from "@material-ui/core/ListItemText"
32
import MenuItem from "@material-ui/core/MenuItem"
43
import { SvgIcon, Typography } from "@material-ui/core"
54
import { makeStyles } from "@material-ui/core/styles"
65
import React from "react"
7-
import { Link } from "react-router-dom"
86

97
export interface NavMenuEntryProps {
108
icon: typeof SvgIcon

‎site/src/components/Navbar/index.tsx

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react"
2-
import { fade, makeStyles } from "@material-ui/core/styles"
3-
import { Link, useLocation } from "react-router-dom"
2+
import { makeStyles } from "@material-ui/core/styles"
3+
import { Link } from "react-router-dom"
44
import { Logo, WorkspacesIcon } from "./../Icons"
5-
import { BorderedMenu } from "./BorderedMenu"
65

76
import ListSubheader from "@material-ui/core/ListSubheader"
87

9-
import { NavMenuEntry, NavMenuEntryProps } from "./NavMenuEntry"
10-
import { Button, List, Popover } from "@material-ui/core"
8+
import { NavMenuEntryProps } from "./NavMenuEntry"
9+
import { Button, List } from "@material-ui/core"
1110

1211
const placeholderItems: NavMenuEntryProps[] = [
1312
{
@@ -44,14 +43,6 @@ export const Navbar: React.FC = () => {
4443
<div className={styles.fixed}>
4544
<List>
4645
<ListSubheader>Manage</ListSubheader>
47-
{/*<BorderedMenu
48-
id={"test"}
49-
open={true}
50-
>
51-
{placeholderItems.map((entry) => (
52-
<NavMenuEntry key={entry.label} {...entry} />
53-
))}
54-
</BorderedMenu>*/}
5546
</List>
5647
</div>
5748
</div>

‎site/src/components/Triangle/index.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react"
2+
3+
import { makeStyles } from "@material-ui/core"
4+
5+
export const Triangle: React.FC = () => {
6+
const size = 100
7+
8+
const styles = useStyles()
9+
10+
const transparent = `${size}px solid transparent`
11+
const colored = `${size / 0.86}px solid black`
12+
13+
return (
14+
<div
15+
className={styles.triangle}
16+
style={{
17+
width: 0,
18+
height: 0,
19+
borderLeft: transparent,
20+
borderRight: transparent,
21+
borderBottom: colored,
22+
}}
23+
/>
24+
)
25+
}
26+
27+
const useStyles = makeStyles((theme) => ({
28+
"@keyframes spin": {
29+
from: {
30+
transform: "rotateY(0deg)",
31+
},
32+
to: {
33+
transform: "rotateY(180deg)",
34+
},
35+
},
36+
triangle: {
37+
animation: "$spin 1s ease-in-out infinite alternate both",
38+
},
39+
}))

‎site/src/components/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from "./Button"
22
export * from "./Confetti"
33
export * from "./EmptyState"
44
export * from "./Page"
5+
export * from "./Triangle"

‎site/src/index.tsx

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,15 @@
11
import React from "react"
22
import ReactDOM from "react-dom"
3-
import CssBaseline from "@material-ui/core/CssBaseline"
4-
import Box from "@material-ui/core/Box"
5-
import Paper from "@material-ui/core/Paper"
63

7-
import { dark } from "./theme"
4+
import { App } from "./app"
85

9-
import ThemeProvider from "@material-ui/styles/ThemeProvider"
10-
11-
import { EmptyState } from "./components/EmptyState"
12-
13-
import { Workspaces } from "./pages"
14-
15-
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
6+
// This is the entry point for the app - where everything start.
7+
// In the future, we'll likely bring in more bootstrapping logic -
8+
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32
169

1710
function render() {
1811
const element = document.getElementById("root")
19-
20-
const component = (
21-
<>
22-
<ThemeProvider theme={dark}>
23-
<CssBaseline />
24-
<Router>
25-
<Switch>
26-
<Route path="/">
27-
<Workspaces />
28-
</Route>
29-
</Switch>
30-
</Router>
31-
</ThemeProvider>
32-
</>
33-
)
34-
35-
ReactDOM.render(component, element)
12+
ReactDOM.render(<App />, element)
3613
}
3714

3815
render()

‎site/src/pages/CreateWorkspace.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react"
2+
import { Box } from "@material-ui/core"
3+
4+
import { Confetti, Triangle } from "../components"
5+
6+
/**
7+
* CreateWorkspaceForm
8+
*
9+
* Placeholder component for the new v2 workspace creation flow
10+
*/
11+
export const CreateWorkspace: React.FC = () => {
12+
return (
13+
<Confetti
14+
style={{
15+
minHeight: "500px",
16+
display: "flex",
17+
flexDirection: "column",
18+
justifyContent: "center",
19+
alignItems: "center",
20+
}}
21+
>
22+
<Triangle />
23+
24+
<Box m={"2em"}>NEXT STEP: Let's create a workspace with a v2 provisioner!</Box>
25+
</Confetti>
26+
)
27+
}

‎site/src/pages/Workspaces.tsx

Lines changed: 18 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,10 @@
11
import React, { useState } from "react"
2-
import { AddToQueue as AddWorkspaceIcon } from "@material-ui/icons"
3-
4-
import { Confetti, EmptyState, Page, SplitButton } from "./../components"
5-
62
import { Dialog, DialogActions, Button, DialogTitle, DialogContent, makeStyles, Box, Paper } from "@material-ui/core"
3+
import { AddToQueue as AddWorkspaceIcon } from "@material-ui/icons"
74

8-
const useStyles2 = makeStyles((theme) => ({
9-
"@keyframes spin": {
10-
from: {
11-
transform: "rotateY(0deg)",
12-
},
13-
to: {
14-
transform: "rotateY(180deg)",
15-
},
16-
},
17-
triangle: {
18-
animation: "$spin 1s ease-in-out infinite alternate both",
19-
},
20-
}))
21-
22-
export const Triangle: React.FC = () => {
23-
const size = 100
24-
25-
const styles = useStyles2()
26-
27-
const transparent = `${size}px solid transparent`
28-
const colored = `${size / 0.86}px solid black`
5+
import { EmptyState, Page, SplitButton } from "./../components"
296

30-
return (
31-
<div
32-
className={styles.triangle}
33-
style={{
34-
width: 0,
35-
height: 0,
36-
borderLeft: transparent,
37-
borderRight: transparent,
38-
borderBottom: colored,
39-
}}
40-
/>
41-
)
42-
}
7+
import { CreateWorkspace } from "./CreateWorkspace"
438

449
export const Workspaces: React.FC = () => {
4510
const styles = useStyles()
@@ -84,31 +49,26 @@ export const Workspaces: React.FC = () => {
8449
<EmptyState message="No workspaces available." button={button} />
8550
</Box>
8651
</Paper>
87-
<Dialog fullWidth={true} maxWidth={"lg"} open={open} onClose={handleClose}>
88-
<DialogTitle>New Workspace</DialogTitle>
89-
<DialogContent>
90-
<Confetti
91-
style={{
92-
minHeight: "500px",
93-
display: "flex",
94-
flexDirection: "column",
95-
justifyContent: "center",
96-
alignItems: "center",
97-
}}
98-
>
99-
<Triangle />
10052

101-
<Box m={"2em"}>NEXT STEP: Let's create a workspace with a v2 provisioner!</Box>
102-
</Confetti>
103-
</DialogContent>
104-
<DialogActions>
105-
<Button onClick={handleClose}>Close</Button>
106-
</DialogActions>
107-
</Dialog>
53+
<CreateDialog open={open} handleClose={handleClose} />
10854
</Page>
10955
)
11056
}
11157

58+
const CreateDialog: React.FC<{ open: boolean; handleClose: () => void }> = ({ open, handleClose }) => {
59+
return (
60+
<Dialog fullWidth={true} maxWidth={"lg"} open={open} onClose={handleClose}>
61+
<DialogTitle>New Workspace</DialogTitle>
62+
<DialogContent>
63+
<CreateWorkspace />
64+
</DialogContent>
65+
<DialogActions>
66+
<Button onClick={handleClose}>Close</Button>
67+
</DialogActions>
68+
</Dialog>
69+
)
70+
}
71+
11272
const useStyles = makeStyles((theme) => ({
11373
header: {
11474
display: "flex",

0 commit comments

Comments
 (0)