Skip to content

Commit 9a9f97f

Browse files
kb-commitkb-commit
authored
Merge pull request #32 from commitdev/react
Adding views and routes
2 parents 025479a + 983fdb2 commit 9a9f97f

File tree

12 files changed

+192
-15
lines changed

12 files changed

+192
-15
lines changed

‎config/react.go‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,30 @@ type reactHeader struct {
88
Enabled bool
99
}
1010

11+
type reactSidenavItem struct {
12+
Path string
13+
Label string
14+
Icon string
15+
}
1116
type reactSidenav struct {
1217
Enabled bool
18+
Items []reactSidenavItem
1319
}
1420

1521
type reactAccount struct {
1622
Enabled bool
1723
Required bool
1824
}
25+
26+
type reactView struct {
27+
Path string
28+
Component string
29+
}
30+
1931
type React struct {
2032
App reactApp
2133
Account reactAccount
2234
Header reactHeader
2335
Sidenav reactSidenav
36+
Views []reactView
2437
}

‎templates/commit0/commit0.tmpl‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,16 @@ react:
2828
required: false
2929
sidenav:
3030
enabled: true
31-
31+
items:
32+
- path: /
33+
label: Home
34+
icon: home
35+
- path: /account
36+
label: Account
37+
icon: account_circle
38+
views:
39+
- path: /account
40+
component: account
41+
- path: /
42+
component: home
3243
services:

‎templates/react/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
content="Web site created using create-react-app"
1111
/>
1212
<link rel="apple-touch-icon" href="logo192.png" />
13+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
1314
<!--
1415
manifest.json provides metadata used when your web app is installed on a
1516
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎templates/react/public/index.html.tmpl‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="logo192.png" />
13+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
14+
<!--
15+
manifest.json provides metadata used when your web app is installed on a
16+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
17+
-->
18+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19+
<!--
20+
Notice the use of %PUBLIC_URL% in the tags above.
21+
It will be replaced with the URL of the `public` folder during the build.
22+
Only files inside the `public` folder can be referenced from the HTML.
23+
24+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
25+
work correctly both with client-side routing and a non-root public URL.
26+
Learn how to configure a non-root public URL by running `npm run build`.
27+
-->
28+
<title>{{ .React.App.Name }}</title>
29+
</head>
30+
<body>
31+
<noscript>You need to enable JavaScript to run this app.</noscript>
32+
<div id="root"></div>
33+
<!--
34+
This HTML file is a template.
35+
If you open it directly in the browser, you will see an empty page.
36+
37+
You can add webfonts, meta tags, or analytics to this file.
38+
The build step will place the bundled scripts into the <body> tag.
39+
40+
To begin the development, run `npm start` or `yarn start`.
41+
To create a production bundle, use `npm run build` or `yarn build`.
42+
-->
43+
</body>
44+
</html>

‎templates/react/src/App.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import React from 'react';
22
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
33
import Layout from 'components/layout';
4+
import config from 'config';
5+
6+
const renderView = (view) => {
7+
return (
8+
<Route path={`${view.path}`} component={require(`views/${view.component}`).default} />
9+
)
10+
}
411

512
export default function App() {
13+
14+
615
return (
716
<Layout>
817
<Router>
918
<Switch>
10-
<Route path="/a">
11-
<span>a</span>
12-
</Route>
13-
<Route path="/b">
14-
<span>b</span>
15-
</Route>
16-
<Route path="/">
17-
<span>c</span>
18-
</Route>
19+
{
20+
config.views && config.views.map(renderView)
21+
}
1922
</Switch>
2023
</Router>
2124
</Layout>

‎templates/react/src/components/layout/header/account.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import IconButton from '@material-ui/core/IconButton';
33
import AccountCircle from '@material-ui/icons/AccountCircle';
44
import MenuItem from '@material-ui/core/MenuItem';
55
import Menu from '@material-ui/core/Menu';
66

77
export default function MenuAppBar() {
8-
const [anchorEl, setAnchorEl] = React.useState(null);
8+
const [anchorEl, setAnchorEl] = useState(null);
99
const open = Boolean(anchorEl);
1010

1111
const handleMenu = event => {

‎templates/react/src/components/layout/header/sidenav/content.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
5+
import ListItemIcon from '@material-ui/core/ListItemIcon';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import Icon from '@material-ui/core/Icon';
8+
import config from 'config';
9+
10+
const useStyles = makeStyles({
11+
list: {
12+
width: 250,
13+
},
14+
});
15+
16+
export default function Content() {
17+
const classes = useStyles();
18+
return (
19+
<div
20+
className={classes.list}
21+
role="presentation"
22+
>
23+
<List>
24+
{
25+
config.sidenav && config.sidenav.items && config.sidenav.items.map((item, index) => (
26+
<ListItem button component="a" href={item.path} key={index}>
27+
<ListItemIcon>
28+
<Icon>{item.icon}</Icon>
29+
</ListItemIcon>
30+
<ListItemText primary={item.label} />
31+
</ListItem>
32+
))
33+
}
34+
</List>
35+
</div>
36+
);
37+
}

templates/react/src/components/layout/header/sidenav.js renamed to templates/react/src/components/layout/header/sidenav/index.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import React, { Fragment } from 'react';
1+
import React, { Fragment, useState } from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
33
import IconButton from '@material-ui/core/IconButton';
44
import MenuIcon from '@material-ui/icons/Menu';
5+
import Drawer from '@material-ui/core/Drawer';
6+
import Content from 'components/layout/header/sidenav/content';
57

68
const useStyles = makeStyles(theme => ({
79
menuButton: {
@@ -11,16 +13,25 @@ const useStyles = makeStyles(theme => ({
1113

1214
export default function Sidenav() {
1315
const classes = useStyles();
16+
const [open, setOpen] = useState(false);
17+
18+
const onClose = () => setOpen(false);
19+
const onOpen = () => setOpen(true);
20+
1421
return (
1522
<Fragment>
1623
<IconButton
1724
edge="start"
1825
className={classes.menuButton}
1926
color="inherit"
2027
aria-label="open drawer"
28+
onClick={onOpen}
2129
>
2230
<MenuIcon />
2331
</IconButton>
32+
<Drawer open={open} onClose={onClose}>
33+
<Content />
34+
</Drawer>
2435
</Fragment>
2536
);
2637
}

‎templates/react/src/config/index.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,27 @@ export default {
1111
},
1212
sidenav: {
1313
enabled: true,
14-
}
14+
items: [
15+
{
16+
path: '/',
17+
label: 'Home',
18+
icon: 'home',
19+
},
20+
{
21+
path: '/account',
22+
label: 'Account',
23+
icon: 'account_circle',
24+
},
25+
],
26+
},
27+
views: [
28+
{
29+
path: '/account',
30+
component: 'account',
31+
},
32+
{
33+
path: '/',
34+
component: 'home',
35+
},
36+
],
1537
}

‎templates/react/src/config/index.js.tmpl‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,22 @@ export default {
1111
},
1212
sidenav: {
1313
enabled: {{ .React.Sidenav.Enabled }},
14-
}
14+
items: [
15+
{{ range .React.Sidenav.Items }}
16+
{
17+
path: '{{ .Path }}',
18+
label: '{{ .Label }}',
19+
icon: '{{ .Icon }}',
20+
},
21+
{{ end }}
22+
]
23+
},
24+
views: [
25+
{{ range .React.Views }}
26+
{
27+
path: '{{ .Path }}',
28+
component: '{{ .Component }}',
29+
},
30+
{{ end }}
31+
],
1532
}

0 commit comments

Comments
 (0)