Merge pull request #773 from kevinhughes27/admin-next-layout

Admin next layout
kevinhughes27 · Jun 23, 2018 · ce39c8b · ce39c8b
2 parents 27870e4 + c9b9813
commit ce39c8b
Show file tree

Hide file tree

Showing 17 changed files with 377 additions and 99 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -46,6 +46,7 @@ jobs:
             - ./node_modules
             - ./client/node_modules
             - ./clients/player-app/node_modules
+            - ./clients/admin_next/node_modules
 
       # Database setup
       - run: bundle exec rake db:create
@@ -79,6 +80,9 @@ jobs:
             - public/webpack
             - tmp/cache/assets
 
+      # Build admin_next
+      - run: cd clients/admin_next && yarn build
+
       # Generate checksum for player-app
       - type: shell
         command: |

diff --git a/app/controllers/admin_next_controller.rb b/app/controllers/admin_next_controller.rb
@@ -2,5 +2,7 @@ class AdminNextController < ApplicationController
   include TournamentController
   include ReactAppController
 
+  before_action :authenticate_user!
+
   app_name 'admin_next'
 end
diff --git a/clients/admin_next/package.json b/clients/admin_next/package.json
@@ -2,14 +2,24 @@
   "name": "admin_next",
   "version": "0.1.0",
   "private": true,
+  "proxy": {
+    "/graphql": {
+      "target": "http://no-borders.lvh.me:3000",
+      "changeOrigin": true
+    }
+  },
   "dependencies": {
-    "@material-ui/core": "^1.0.0-rc.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
+    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
+    "@fortawesome/react-fontawesome": "^0.1.0-11",
+    "@material-ui/core": "^1.2.3",
+    "@material-ui/icons": "^1.1.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-scripts-ts": "2.15.1"
   },
   "scripts": {
-    "start": "react-scripts-ts start",
+    "start": "PORT=4000 react-scripts-ts start",
     "build": "react-scripts-ts build",
     "test": "react-scripts-ts test --env=jsdom",
     "eject": "react-scripts-ts eject"

diff --git a/clients/admin_next/public/index.html b/clients/admin_next/public/index.html
@@ -20,7 +20,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
-    <title>React App</title>
+    <title>Ultimate Tournament Admin</title>
   </head>
   <body>
     <noscript>

diff --git a/clients/admin_next/src/App.test.tsx b/clients/admin_next/src/App.test.tsx
diff --git a/clients/admin_next/src/App.tsx b/clients/admin_next/src/App.tsx
@@ -1,68 +1,44 @@
 import * as React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Typography from '@material-ui/core/Typography';
-import withStyles, { WithStyles, StyleRulesCallback } from '@material-ui/core/styles/withStyles';
-import withRoot from './withRoot';
+import { withStyles, WithStyles } from '@material-ui/core/styles';
+import { App as styles } from './assets/jss/styles';
+import withTheme from './withTheme';
 
-const styles: StyleRulesCallback<'root'> = theme => ({
-  root: {
-    paddingTop: theme.spacing.unit * 20,
-    textAlign: 'center',
-  },
-});
+import TopBar from './layout/TopBar';
+import SideBar from './layout/SideBar';
 
-interface IState {
-  open: boolean;
+interface Props extends WithStyles<typeof styles> {}
+
+interface State {
+  navOpen: boolean;
 };
 
-class Index extends React.Component<WithStyles<'root'>, IState> {
+class App extends React.Component<Props, State> {
   public state = {
-    open: false,
+    navOpen: false,
   };
 
-  public handleClose = () => {
-    this.setState({
-      open: false,
-    });
+  public openNav = () => {
+    this.setState({navOpen: true});
   };
 
-  public handleClick = () => {
-    this.setState({
-      open: true,
-    });
+  public closeNave = () => {
+    this.setState({navOpen: false});
   };
 
-  public render() {
+  public render () {
+    const { classes } = this.props;
+
     return (
-      <div className={this.props.classes.root}>
-        <Dialog open={this.state.open} onClose={this.handleClose}>
-          <DialogTitle>Super Secret Password</DialogTitle>
-          <DialogContent>
-            <DialogContentText>1-2-3-4-5</DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button color="primary" onClick={this.handleClose}>
-              OK
-            </Button>
-          </DialogActions>
-        </Dialog>
-        <Typography variant="display1" gutterBottom={true}>
-          Material-UI
-        </Typography>
-        <Typography variant="subheading" gutterBottom={true}>
-          example project
-        </Typography>
-        <Button variant="raised" color="secondary" onClick={this.handleClick}>
-          Super Secret Password
-        </Button>
+      <div className={classes.root}>
+        <TopBar openNav={this.openNav} />
+        <SideBar 
+          open={this.state.navOpen}
+          handleOpen={this.openNav}
+          handleClose={this.closeNave}
+        />
       </div>
     );
   }
 }
 
-export default withRoot(withStyles(styles)<{}>(Index));
+export default withTheme(withStyles(styles)(App));
diff --git a/clients/admin_next/src/assets/jss/styles.tsx b/clients/admin_next/src/assets/jss/styles.tsx
@@ -0,0 +1,35 @@
+const App = {
+  root: {
+    flexGrow: 1,
+  }
+};
+
+const TopBar = {
+  title: {
+    flex: 1,
+    color: 'white'
+  },
+  menuButton: {
+    color: 'white',
+    marginLeft: -12,
+    marginRight: 20,
+  },
+};
+
+const UserMenu = {};
+
+const SideBar = {};
+
+const NavItems = {
+  list: {
+    width: 250,
+  }  
+};
+
+export {
+  App,
+  TopBar,
+  UserMenu,
+  SideBar,
+  NavItems
+};
diff --git a/clients/admin_next/src/layout/NavItems.tsx b/clients/admin_next/src/layout/NavItems.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { NavItems as styles } from '../assets/jss/styles';
+
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+
+import { 
+  faHome,
+  faUsers,
+  faSitemap,
+  faMapSigns,
+  faCalendar,
+  faList
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+interface Props extends WithStyles<typeof styles> {}
+
+class NavItems extends React.Component<Props> {
+  public render() {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.list}>
+        <List>
+          <div>
+            <ListItem button>
+              <ListItemIcon>
+                <FontAwesomeIcon icon={faHome} />
+              </ListItemIcon>
+              <ListItemText primary="Home" />
+            </ListItem>
+            <ListItem button>
+              <ListItemIcon>
+                <FontAwesomeIcon icon={faUsers} />
+              </ListItemIcon>
+              <ListItemText primary="Teams" />
+            </ListItem>
+            <ListItem button>
+              <ListItemIcon>
+                <FontAwesomeIcon icon={faSitemap} />
+              </ListItemIcon>
+              <ListItemText primary="Division" />
+            </ListItem>
+            <ListItem button>
+              <ListItemIcon>
+              <FontAwesomeIcon icon={faMapSigns} />
+              </ListItemIcon>
+              <ListItemText primary="Fields" />
+            </ListItem>
+            <ListItem button>
+              <ListItemIcon>
+              <FontAwesomeIcon icon={faCalendar} />
+              </ListItemIcon>
+              <ListItemText primary="Schedule" />
+            </ListItem>
+          </div>
+        </List>
+        <Divider/>
+        <List>
+          <div>
+            <ListItem button>
+              <ListItemIcon>
+                <FontAwesomeIcon icon={faList} />
+              </ListItemIcon>
+              <ListItemText primary="Games" />
+            </ListItem>
+          </div>
+        </List>
+      </div>
+    )
+  }
+}
+
+export default withStyles(styles)(NavItems);
diff --git a/clients/admin_next/src/layout/SideBar.tsx b/clients/admin_next/src/layout/SideBar.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { withStyles, WithStyles } from '@material-ui/core/styles';
+import { SideBar as styles } from '../assets/jss/styles';
+
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import NavItems from './NavItems';
+
+interface Props extends WithStyles<typeof styles> {
+  open: boolean,
+  handleOpen: (event: React.SyntheticEvent<{}>) => void,
+  handleClose: (event: React.SyntheticEvent<{}>) => void
+}
+
+class SideBar extends React.Component<Props> {
+  public render() {
+    return (
+      <SwipeableDrawer
+        open={this.props.open}
+        onClose={this.props.handleClose}
+        onOpen={this.props.handleOpen}
+        >
+        <div
+          tabIndex={0}
+          role="button"
+          onClick={this.props.handleClose}
+          onKeyDown={this.props.handleClose}
+          >
+          <NavItems />
+        </div>
+      </SwipeableDrawer>
+    )
+  }
+}
+
+export default withStyles(styles)(SideBar);
diff --git a/clients/admin_next/src/layout/TopBar.tsx b/clients/admin_next/src/layout/TopBar.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { withStyles, WithStyles } from '@material-ui/core/styles';
+import { TopBar as styles } from '../assets/jss/styles';
+
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import UserMenu from './UserMenu';
+
+interface Props extends WithStyles<typeof styles> {
+  openNav: (event: React.SyntheticEvent<{}>) => void,
+}
+
+class TopBar extends React.Component<Props> {
+  public render () {
+    const { classes } = this.props;
+
+    return (
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton className={classes.menuButton} aria-label="Menu" onClick={this.props.openNav}>
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="title" className={classes.title}>
+            Ultimate Tournament
+          </Typography>
+          <UserMenu />
+        </Toolbar>
+      </AppBar>
+    );
+  }
+}
+
+export default withStyles(styles)(TopBar);