csesoc · melanieso · Sep 20, 2019 · Aug 27, 2019 · Aug 27, 2019 · Aug 29, 2019
diff --git a/client/public/index.html b/client/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Plannify</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -1,18 +1,17 @@
-import React, { Component }  from 'react';
+import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import Example from './Example';
-import '../css/App.css';
+import Plannify from './planner/Plannify';
+import Pathways from './pathways/Pathways';
 
-class App extends Component {
-  render() {
+const App = () => {
     return (
       <div className="App">
         <Switch>
-          <Route exact path='/' component={Example}/>
+          <Route exact path='/' component={Plannify}/>
+          <Route exact path='/pathways' component={Pathways}/>
         </Switch>
       </div>
     );
-  }
 }
 
 export default App;
diff --git a/client/src/components/Example.js b/client/src/components/Example.js
diff --git a/client/src/components/common/DrawerMenu.js b/client/src/components/common/DrawerMenu.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { makeStyles } from '@material-ui/core/styles';
+import PathwaysIcon from '@material-ui/icons/Timeline';
+import PlannifyIcon from '@material-ui/icons/Stars';
+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 SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+
+const useStyles = makeStyles({
+    drawerList: {
+      width: '250px',
+    },
+    drawerLink: {
+      textDecoration: 'none'
+    },
+});
+
+const DrawerMenu = (props) => {
+
+    const classes = useStyles();
+
+    return (
+        <SwipeableDrawer open={props.open} onClose={props.onClose} onOpen={props.onOpen}>
+          <div className={classes.drawerList}>
+            <List>
+              <Link to='/' className={classes.drawerLink}>
+                <ListItem button>
+                  <ListItemIcon>
+                    <PlannifyIcon/>
+                  </ListItemIcon>
+                  <ListItemText primary="Plannify" />
+                </ListItem>
+              </Link>
+              <Link to='/pathways' className={classes.drawerLink}>
+                <ListItem button>
+                  <ListItemIcon>
+                    <PathwaysIcon/>
+                  </ListItemIcon>
+                  <ListItemText primary="Pathways" />
+                </ListItem>
+              </Link>
+            </List> 
+            <Divider />
+          </div>
+        </SwipeableDrawer>
+    );
+}
+
+export default DrawerMenu;
diff --git a/client/src/css/Example.css → client/src/components/common/Footer.js b/client/src/css/Example.css → client/src/components/common/Footer.js
diff --git a/client/src/components/common/NavBar.js b/client/src/components/common/NavBar.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import AppBar from '@material-ui/core/AppBar';
+import Typography from '@material-ui/core/Typography';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { COLORS } from '../../constants/appConstants';
+import DrawerMenu from './DrawerMenu';
+
+const useStyles = makeStyles({
+    icon: {
+      color: COLORS.WHITE,
+    }
+  });
+
+const NavBar = () => {
+
+    const classes = useStyles();
+
+    const [drawerOpen, setDrawerOpen] = React.useState(false);
+
+    function handleDrawerOpen() {
+      setDrawerOpen(true);
+    }
+
+    function handleDrawerClose() {
+      setDrawerOpen(false);
+    }
+
+    return (
+        <AppBar position="static">
+            <Toolbar>
+                <IconButton onClick={handleDrawerOpen}>
+                    <MenuIcon className={classes.icon} />
+                </IconButton>
+                <Typography variant="title" color="inherit"> 
+                  Plannify
+                </Typography>
+            </Toolbar>
+            <DrawerMenu open={drawerOpen} onClose={handleDrawerClose} onOpen={handleDrawerOpen} />
+        </AppBar>
+    );
+}
+
+export default NavBar;
diff --git a/client/src/components/common/Theme.js b/client/src/components/common/Theme.js
diff --git a/client/src/components/pathways/Course.js b/client/src/components/pathways/Course.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardContent from '@material-ui/core/CardContent';
+
+export default function Course() {
+
+    const code = "";
+    const label = "";
+    const prerequisites = [];
+    const postrequisites = [];
+    const handbookLink = "";
+
+    return(
+      <Card>
+        <CardHeader title={code}>
+        </CardHeader>
+        <CardContent>
+            {label}
+        </CardContent>
+      </Card>
+    );
+}
diff --git a/client/src/components/pathways/Pathways.js b/client/src/components/pathways/Pathways.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import NavBar from '../common/NavBar';
+import Course from './Course';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+
+});
+
+// TODO install react-archer to doarrow things
+// Add search component to search for courses
+    // Click a course should rerender pathways component
+export default function Pathways() {
+
+    const classes = useStyles();
+
+    return(
+      <div>
+        <NavBar />
+        <Typography variant="title" color="inherit">
+          Pathways
+          <Course/>
+        </Typography>
+      </div>
+    );
+}
diff --git a/client/src/components/planner/DegreeInputForm.js b/client/src/components/planner/DegreeInputForm.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    form: {
+
+    }
+});
+
+export default function DegreeInputForm() {
+
+    const classes = useStyles();
+    const [degree, setDegree] = React.useState([]);
+    const [major, setMajor] = React.useState([]);
+    const [minor, setMinor] = React.useState([]);
+
+    function handleDegreeChange(event) {
+        const { options } = event.target;
+        const value = [];
+        for (let i = 0, l = options.length; i < l; i += 1) {
+          if (options[i].selected) {
+            value.push(options[i].value);
+          }
+        }
+        setDegree(value);
+    };
+
+    function handleMajorChange(event) {
+        const { options } = event.target;
+        const value = [];
+        for (let i = 0, l = options.length; i < l; i += 1) {
+          if (options[i].selected) {
+            value.push(options[i].value);
+          }
+        }
+        setMajor(value);
+    };
+
+    function handleMinorChange(event) {
+        const { options } = event.target;
+        const value = [];
+        for (let i = 0, l = options.length; i < l; i += 1) {
+          if (options[i].selected) {
+            value.push(options[i].value);
+          }
+        }
+        setMinor(value);
+    };
+
+    const degreeList = {
+      "Bachelor of Engineering (Honours)": 3707,
+      "Bachelor of Arts": 3409
+    }
+        const majorList = {
+          "Software Engineering": 3707,
+          "Mechanical Engineering": 3707,
+          "History": 3409,
+          "Philosophy": 3409
+        }
+        const minorList = {
+          "Asian Studies": 3409,
+          "Film Studies": 3409
+        }
+        let degreeListOptions = Object.entries(degreeList).map(([degree, degree_code]) => <option key={degree_code} value={degree_code}>{degree}</option>);
+        let majorListOptions = Object.entries(majorList).map(([degree, degree_code]) => <option key={degree_code} value={degree_code}>{degree}</option>);
+        let minorListOptions = Object.entries(minorList).map(([degree, degree_code]) => <option key={degree_code} value={degree_code}>{degree}</option>);
+
+        return (
+            <form className={classes.form} autoComplete="off">
+              <Grid container spacing={3}>
+                <Grid item xs={12}>
+                  <FormControl className="degree_selector_formcontrol">
+                    <InputLabel htmlFor="degree">Degree</InputLabel>
+                    <Select
+                      native
+                      value={degree}
+                      onChange={handleDegreeChange}
+                      inputProps={{
+                        name: 'Degree',
+                        id: 'degree',
+                      }}
+                    >
+                      <option value="" />
+                      {degreeListOptions}
+                    </Select>
+                  </FormControl>
+                </Grid>
+                <Grid item xs={12}>
+                  <FormControl className="major_selector_formcontrol">
+                    <InputLabel htmlFor="major">Major</InputLabel>
+                    <Select
+                      native
+                      value={major}
+                      onChange={handleMajorChange}
+                      inputProps={{
+                        name: 'Major',
+                        id: 'major',
+                      }}
+                    >
+                      <option value="" />
+                      {majorListOptions}
+                    </Select>
+                  </FormControl>
+                </Grid>
+                <Grid item xs={12}>
+                  <FormControl className="minor_selector_formcontrol">
+                    <InputLabel htmlFor="minor">Minor</InputLabel>
+                    <Select
+                      native
+                      value={minor}
+                      onChange={handleMinorChange}
+                      inputProps={{
+                        name: 'Minor',
+                        id: 'minor',
+                      }}
+                    >
+                      <option value="" />
+                      {minorListOptions}
+                    </Select>
+                  </FormControl>
+                </Grid>
+              </Grid>
+            </form>
+        );
+}
diff --git a/client/src/components/planner/DegreePlanner.js b/client/src/components/planner/DegreePlanner.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function DegreePlanner() {
+
+    return (
+        <div>
+          <h1>Degree Planner</h1>
+        </div>
+    );
+}