Minimal refactoring before sending everything down a step

client/src/Components/Event/Create/Tabs/Basic.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class Basic extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        Basic
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Basic);

client/src/Components/Event/Create/Tabs/PresentationPage.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class PresentationPage extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        PresentationPage
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(PresentationPage);

client/src/Components/Event/Create/Tabs/TeamsServer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class TeamsServer extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        TeamsServer
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(TeamsServer);

client/src/Components/Event/Create/Tabs/Technical.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class Technical extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        Technical
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Technical);

client/src/Components/Event/Create/Tabs/index.js

@@ -0,0 +1,11 @@
+import Basic from './Basic';
+import PresentationPage from './PresentationPage';
+import TeamsServer from './TeamsServer';
+import Technical from './Technical';
+
+export {
+  Basic,
+  PresentationPage,
+  TeamsServer,
+  Technical,
+};

client/src/Components/Event/Create/index.js

@@ -15,18 +15,44 @@ import {
   Paper,
   Grid,
   Typography,
+  AppBar,
+  Tabs,
+  Tab,
 } from '@material-ui/core';
-import { ChevronLeft, ChevronRight } from '@material-ui/icons';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Face as BasicIcon,
+  Alarm as TechnicalIcon,
+  Group as TeamAndServerIcon,
+  PresentToAll as PresentationIcon,
+} from '@material-ui/icons';
 import { DateTimePicker } from 'material-ui-pickers';
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
+import {
+  Basic,
+  PresentationPage,
+  TeamsServer,
+  Technical,
+} from './Tabs';
+
 import { hostedEventsCalls } from '../../../GraphQL/Calls';
 
+function TabContainer(props) {
+  return (
+    <Typography component='div' style={{ padding: 8 * 3 }}>
+      {props.children}
+    </Typography>
+  );
+}
+
 class Create extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      value: 0,
       name: '',
       description: '',
       startDatetime: DateTime.local().plus({ days: 1 }).startOf('day'),
@@ -34,9 +60,13 @@ class Create extends React.Component {
     };
   }
 
+  handleChange = (event, value) => {
+    this.setState({ value });
+  }
+
   render() {
     const {
-      name, description, startDatetime, finishDatetime,
+      name, description, startDatetime, finishDatetime, value,
     } = this.state;
     const { classes } = this.props;
     return (
@@ -47,60 +77,94 @@ class Create extends React.Component {
         }
       >
         {hostEvent => (
-
-          <Paper className={classes.root}>
-            <Typography className={classes.typography} variant='headline' gutterBottom>
-              Create a new event
-            </Typography>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                hostEvent({
-                  variables: {
-                    event: {
-                      name,
-                      description,
-                      startDatetime: startDatetime.valueOf() / 1000,
-                      finishDatetime: startDatetime.valueOf() / 1000,
-                    },
-                  },
-                });
-              }}
+          <div className={classes.root}>
+            <AppBar position='static' color='default'>
+              <Tabs
+              value={value}
+              onChange={this.handleChange}
+              scrollable
+              scrollButtons='off'
+              indicatorColor='primary'
+              textColor='primary'
             >
-              <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+                <Tab
+                className={classes.tabTitle}
+                label='Basic information'
+                icon={<BasicIcon />}
+              />
+                <Tab
+                className={classes.tabTitle}
+                label='Technical information'
+                icon={<TechnicalIcon />}
+              />
+                <Tab
+                className={classes.tabTitle}
+                label='Teams &amp; server setup(disabled)'
+                icon={<TeamAndServerIcon />}
+                disabled
+              />
+                <Tab
+                className={classes.tabTitle}
+                label='Presentation page(disabled)'
+                icon={<PresentationIcon />}
+                disabled
+              />
+              </Tabs>
+            </AppBar>
+            <Paper className={classes.paperRoot}>
+              <Typography className={classes.typography} variant='headline' gutterBottom>
+                Create a new event
+              </Typography>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  hostEvent({
+                    variables: {
+                      event: {
+                        name,
+                        description,
+                        startDatetime: startDatetime.valueOf() / 1000,
+                        finishDatetime: startDatetime.valueOf() / 1000,
+                      },
+                    },
+                  });
+                }}
+              >
+                {value === 0 && <TabContainer>
+                  <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
                 These are the basic information you need to input in order to create an event.
                 There might be some heavy changes in the near future as the application is still at a very early stage.
-              </Typography>
+                  </Typography>
 
-              <TextField
+                  <TextField
                 label='Public id'
                 value='Your public ID will be generated automatically'
                 className={classes.inputField}
                 disabled
               />
 
-              <TextField
+                  <TextField
                 label='Name'
                 value={name}
                 className={classes.inputField}
               />
-              <TextField
+                  <TextField
                 multiline
                 label='Description'
                 value={description}
                 className={classes.inputField}
               />
 
-              <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+                  <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
                 The dates are purely indicative, as it is important for you to make sure everything is
                 ready before manually triggering the beginning and end of the event.
                 If you are confident use the scheduler to start it for you(incoming).
-              </Typography>
+                  </Typography>
 
-              <FormGroup row className={classes.inputField}>
-                <Grid container justify='space-around' >
-                  <Grid item>
-                    <DateTimePicker
+                  <FormGroup row className={classes.inputField}>
+                    <Grid container justify='space-around' >
+                      <Grid item>
+                        <DateTimePicker
                       autoOk
                       disablePast
                       format="DD' at 'HH:mm"
@@ -111,9 +175,9 @@ class Create extends React.Component {
                       value={startDatetime}
                       helperText='Competition start date'
                     />
-                  </Grid>
-                  <Grid item>
-                    <DateTimePicker
+                      </Grid>
+                      <Grid item>
+                        <DateTimePicker
                       autoOk
                       disablePast
                       format="DD' at 'HH:mm"
@@ -124,15 +188,15 @@ class Create extends React.Component {
                       value={finishDatetime}
                       helperText='Competition finishing date'
                     />
-                  </Grid>
-                </Grid>
-              </FormGroup>
+                      </Grid>
+                    </Grid>
+                  </FormGroup>
 
-              <FormControl className={classes.inputField}>
-                <InputLabel shrink htmlFor='select'>
+                  <FormControl className={classes.inputField}>
+                    <InputLabel shrink htmlFor='select'>
                   Select the formula
-                </InputLabel>
-                <Select
+                    </InputLabel>
+                    <Select
                   id='select'
                   value='1'
                   input={<Input name='Role' id='role-label-placeholder' />}
@@ -140,17 +204,17 @@ class Create extends React.Component {
                   name='select'
                   className={classes.selectEmpty}
                 >
-                  <MenuItem key='1' value='1'>moi</MenuItem>
-                  <MenuItem key='2' value='2'>toi</MenuItem>
-                  <MenuItem key='3' value='3'>nous</MenuItem>
-                </Select>
-                <FormHelperText> For new formula, select {'"'}create new{'"'} </FormHelperText>
-              </FormControl>
-              <FormControl className={classes.inputField}>
-                <InputLabel shrink htmlFor='select'>
+                      <MenuItem key='1' value='1'>moi</MenuItem>
+                      <MenuItem key='2' value='2'>toi</MenuItem>
+                      <MenuItem key='3' value='3'>nous</MenuItem>
+                    </Select>
+                    <FormHelperText> For new formula, select {'"'}create new{'"'} </FormHelperText>
+                  </FormControl>
+                  <FormControl className={classes.inputField}>
+                    <InputLabel shrink htmlFor='select'>
                   Select the Plotter
-                </InputLabel>
-                <Select
+                    </InputLabel>
+                    <Select
                   id='select'
                   value='1'
                   input={<Input name='Role' id='role-label-placeholder' />}
@@ -158,19 +222,27 @@ class Create extends React.Component {
                   name='select'
                   className={classes.selectEmpty}
                 >
-                  <MenuItem key='1' value='1'>moi</MenuItem>
-                  <MenuItem key='2' value='2'>toi</MenuItem>
-                  <MenuItem key='3' value='3'>nous</MenuItem>
-                </Select>
-                <FormHelperText> For new plotter, select {'"'}create new{'"'} </FormHelperText>
-              </FormControl>
-              <Grid container justify='center' >
-                <Grid item>
-                  <Button type='submit' variant='contained' color='secondary'>Create New Project</Button>
-                </Grid>
-              </Grid>
-            </form>
-          </Paper>
+                      <MenuItem key='1' value='1'>moi</MenuItem>
+                      <MenuItem key='2' value='2'>toi</MenuItem>
+                      <MenuItem key='3' value='3'>nous</MenuItem>
+                    </Select>
+                    <FormHelperText> For new plotter, select {'"'}create new{'"'} </FormHelperText>
+                  </FormControl>
+                  <Grid container justify='center' >
+                    <Grid item>
+                      <Button className={classes.bottomButton} type='submit' variant='contained' color='secondary'>
+                        Create New Project
+                      </Button>
+                    </Grid>
+                  </Grid>
+                </TabContainer>
+              }
+                {value === 1 && <TabContainer><Technical /></TabContainer>}
+                {value === 2 && <TabContainer><TeamsServer /></TabContainer>}
+                {value === 3 && <TabContainer><PresentationPage /></TabContainer>}
+              </form>
+            </Paper>
+          </div>
         )}
       </Mutation>
     );

client/src/Components/Event/Create/styles.js

@@ -1,5 +1,34 @@
 const styles = theme => ({
   root: {
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+    padding: 0,
+    margin: 0,
+  },
+  tabTitle: {
+    width: '25%',
+    maxWidth: 'none',
+  },
+  card: {
+    flexGrow: 1,
+    padding: 20,
+    marginTop: 20,
+    marginBottom: 20,
+    marginLeft: 400,
+    marginRight: 400,
+  },
+  buttonList: {
+    margin: theme.spacing.unit,
+    float: 'right',
+  },
+  buttonGrid: {
+    marginTop: -20,
+  },
+  title: {
+    marginTop: 20,
+  },
+  paperRoot: {
     width: '50%',
     flexGrow: 1,
     padding: 10,
@@ -16,23 +45,12 @@ const styles = theme => ({
     marginLeft: '10%',
     marginTop: 40,
   },
-  checkbox: {
-    width: 150,
-    marginLeft: '0%',
-    marginTop: 20,
-  },
   selectEmpty: {
     marginTop: theme.spacing.unit * 2,
   },
-  button: {
-    margin: theme.spacing.unit,
-    marginTop: theme.spacing.unit * 3,
-  },
-  img: {
-    display: 'block',
-    marginTop: 20,
-    maxWidth: 120,
-    maxHeight: 24,
+  bottomButton: {
+    padding: 15,
+    margin: 20,
   },
 });