Added a show page

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

@@ -56,12 +56,6 @@ class Basic extends React.Component {
             onChange={newVal => edit('description', newVal.target.value)}
           />
 
-        <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>
-
         <FormGroup row className={classes.inputField}>
           <Grid container justify='space-around' >
             <Grid item>

src/Components/Event/Edit/Tabs/Basic.js

@@ -25,7 +25,7 @@ class Basic extends React.Component {
     return (
       <React.Fragment>
         <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
-          These are the basic information you need to input in order to create an event.
+          These are the basic information you need to input in order to edit an event.
           There might be some heavy changes in the near future as the application is still at a very early stage.
         </Typography>
 
@@ -56,12 +56,6 @@ class Basic extends React.Component {
             onChange={newVal => edit('description', newVal.target.value)}
           />
 
-        <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>
-
         <FormGroup row className={classes.inputField}>
           <Grid container justify='space-around' >
             <Grid item>
@@ -105,7 +99,7 @@ class Basic extends React.Component {
               Go to technical tab
             </Button>
             <Button className={classes.bottomButton} onClick={() => saveChanges()} variant='contained' color='secondary'>
-              Or Create event
+              Or Edit event
             </Button>
           </Grid>
         </Grid>

src/Components/Event/Edit/Tabs/Technical/index.js

@@ -184,7 +184,7 @@ class Technical extends React.Component {
         <Grid container justify='center' >
           <Grid item>
             <Button className={classes.bottomButton} onClick={ () => saveChanges() } variant='contained' color='secondary'>
-              Create the event
+              Edit the event
             </Button>
           </Grid>
         </Grid>

src/Components/Event/Edit/queried.js

@@ -153,7 +153,7 @@ class Queried extends React.Component {
               <div className='container'>
                 <Paper className={classes.paperRoot}>
                   <Typography className={classes.typography} variant='h5' gutterBottom>
-                    Create a new event
+                    Edit an event
                   </Typography>
                   {value === 0 && <TabContainer>
                     <Basic

src/Components/Event/Show/Tabs/Basic.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  TextField,
+  Button,
+  FormGroup,
+  Typography,
+  Grid,
+} from '@material-ui/core';
+import {
+  ChevronLeft,
+  ChevronRight,
+} from '@material-ui/icons';
+import { DateTimePicker } from 'material-ui-pickers';
+
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class Basic extends React.Component {
+  render() {
+    const {
+      classes, event, edit, create,
+    } = this.props;
+    return (
+      <React.Fragment>
+        <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>
+
+        <TextField
+          label='Public id'
+          value='Your public ID will be generated automatically'
+          className={classes.inputField}
+          disabled
+        />
+
+        <TextField
+          label='Title'
+          value={event.title}
+          className={classes.inputField}
+          onChange={newVal => edit('title', newVal.target.value)}
+        />
+        <TextField
+          label='Subtitle'
+          value={event.subtitle}
+          className={classes.inputField}
+          onChange={newVal => edit('subtitle', newVal.target.value)}
+        />
+        <TextField
+            multiline
+            label='Description'
+            value={event.description}
+            className={classes.inputField}
+            onChange={newVal => edit('description', newVal.target.value)}
+          />
+
+        <FormGroup row className={classes.inputField}>
+          <Grid container justify='space-around' >
+            <Grid item>
+              <DateTimePicker
+                autoOk
+                disablePast
+                format="DD' at 'HH:mm"
+                ampm={false}
+                showTabs={false}
+                leftArrowIcon={<ChevronLeft />}
+                rightArrowIcon={<ChevronRight />}
+                value={event.startDatetime}
+                helperText='Competition start date'
+                onChange={newVal => edit('startDatetime', newVal)}
+              />
+            </Grid>
+            <Grid item>
+              <DateTimePicker
+                autoOk
+                disablePast
+                format="DD' at 'HH:mm"
+                ampm={false}
+                showTabs={false}
+                leftArrowIcon={<ChevronLeft />}
+                rightArrowIcon={<ChevronRight />}
+                value={event.endDatetime}
+                helperText='Competition ending date'
+                onChange={newVal => edit('endDatetime', newVal)}
+              />
+            </Grid>
+          </Grid>
+        </FormGroup>
+        <Grid container justify='center' >
+          <Grid item>
+            <Button
+              className={classes.bottomButton}
+              variant='contained'
+              color='secondary'
+              onClick={() => edit('value', 1)}
+            >
+              Go to technical tab
+            </Button>
+            <Button className={classes.bottomButton} onClick={() => create()} variant='contained' color='secondary'>
+              Or Create event
+            </Button>
+          </Grid>
+        </Grid>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Basic);

src/Components/Event/Show/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);

src/Components/Event/Show/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);

src/Components/Event/Show/Tabs/Technical/Formula/New.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  Button,
+  TextField,
+} from '@material-ui/core';
+
+import { Mutation } from 'react-apollo';
+import { getOptionsCalls } from '../../../../../../GraphQL/Calls/index';
+
+class New extends React.Component {
+  constructor() {
+    super();
+    this.state = { name: '' };
+  }
+
+  render() {
+    const { name } = this.state;
+    const { closeDialogs } = this.props;
+    return (
+      <Dialog
+      open={true}
+      onClose={() => closeDialogs()}
+      aria-labelledby='createFormula-dialog-title'
+    >
+        <DialogTitle id='createFormula-dialog-title'>
+          Create a new formula
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            At least for now, all the formulas are publically available, creating it here will let you select it in the select element.
+          </DialogContentText>
+
+          <Mutation mutation={getOptionsCalls.EVENTS_CREATEFORMULA}
+            update={(store, { data }) => {
+              const { events_Formulas: formulas } = store.readQuery({
+                query: getOptionsCalls.EVENTS_FORMULAS,
+              });
+              store.writeQuery({
+                query: getOptionsCalls.EVENTS_FORMULAS,
+                data: { events_Formulas: formulas.concat([data.events_CreateFormula]) },
+              });
+              closeDialogs();
+            }
+            }
+          >
+            {createFormula => (
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  createFormula({
+                    variables: {
+                      formula: { name },
+                    },
+                  });
+                }}
+              >
+                <TextField
+                  label='Name'
+                  value={name}
+                  onChange={e => this.setState({ name: e.target.value })}
+                  fullWidth
+                />
+                <Button type='submit' variant='contained' color='secondary'>Create a new formula</Button>
+              </form>
+            )}
+          </Mutation>
+          <Button onClick={() => closeDialogs()} variant='contained' color='primary'>Close</Button>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+export default New;

src/Components/Event/Show/Tabs/Technical/Formula/index.js

@@ -0,0 +1,5 @@
+import New from './New';
+
+export {
+  New,
+};

src/Components/Event/Show/Tabs/Technical/Plotter/New.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  Button,
+  TextField,
+} from '@material-ui/core';
+
+import { Mutation } from 'react-apollo';
+import { getOptionsCalls } from '../../../../../../GraphQL/Calls/index';
+
+class New extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      name: '',
+      host: '',
+      repo: '',
+      moduleName: '',
+    };
+  }
+
+  render() {
+    const {
+      name, host, repo, moduleName,
+    } = this.state;
+    const { closeDialogs } = this.props;
+    return (
+      <Dialog
+      open={true}
+      onClose={() => closeDialogs()}
+      aria-labelledby='createPlotter-dialog-title'
+    >
+        <DialogTitle id='createPlotter-dialog-title'>
+          Create a new plotter
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            At least for now, all the plotters are publically available, creating it here will let you select it in the select element.
+          </DialogContentText>
+
+          <Mutation mutation={getOptionsCalls.EVENTS_CREATEPLOTTER}
+            update={(store, { data }) => {
+              const { events_Plotters: plotters } = store.readQuery({
+                query: getOptionsCalls.EVENTS_PLOTTERS,
+              });
+              store.writeQuery({
+                query: getOptionsCalls.EVENTS_PLOTTERS,
+                data: { events_Plotters: plotters.concat([data.events_CreatePlotter]) },
+              });
+              closeDialogs();
+            }
+            }
+          >
+            {createPlotter => (
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  createPlotter({
+                    variables: {
+                      plotter: {
+                        name,
+                        host,
+                        repo,
+                        moduleName,
+                      },
+                    },
+                  });
+                }}
+              >
+                <TextField
+                  label='Name'
+                  value={name}
+                  onChange={e => this.setState({ name: e.target.value })}
+                  fullWidth
+                />
+                <TextField
+                  label='Host'
+                  value={host}
+                  onChange={e => this.setState({ host: e.target.value })}
+                  fullWidth
+                />
+                <TextField
+                  label='Repository'
+                  value={repo}
+                  onChange={e => this.setState({ repo: e.target.value })}
+                  fullWidth
+                />
+                <TextField
+                  label='Module Name'
+                  value={moduleName}
+                  onChange={e => this.setState({ moduleName: e.target.value })}
+                  fullWidth
+                />
+                <Button type='submit' variant='contained' color='secondary'>Create a new plotter</Button>
+              </form>
+            )}
+          </Mutation>
+          <Button onClick={() => closeDialogs()} variant='contained' color='primary'>Close</Button>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+export default New;

src/Components/Event/Show/Tabs/Technical/Plotter/index.js

@@ -0,0 +1,5 @@
+import New from './New';
+
+export {
+  New,
+};

src/Components/Event/Show/Tabs/Technical/Prizes/List.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  Paper,
+  Grid,
+  Typography,
+} from '@material-ui/core';
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from 'react-sortable-hoc';
+
+const DragHandle = SortableHandle(() => <div className='dragHandle' />);
+
+const SortableItem = SortableElement(({ value, deletePrize, index }) => (
+  <div className='sortableListItem'>
+    <Grid container spacing={16}>
+      <Grid item>
+        <DragHandle />
+      </Grid>
+      <Grid item xs={12} sm container>
+        <Grid item xs container direction="column" spacing={16}>
+          <Typography gutterBottom variant="subtitle1">
+            {value.from}{value.to}{value.additional}{value.amount}{value.asset}
+          </Typography>
+          <Typography color="textSecondary">
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography style={{ cursor: 'pointer' }} onClick={() => deletePrize(index)} >Remove</Typography>
+        </Grid>
+      </Grid>
+    </Grid>
+  </div>
+));
+
+const SortableList = SortableContainer(({ items, deletePrize }) => (
+  <div className='sortableList'>
+    {items.map((value, index) => (
+      <SortableItem key={`prize-${index}`} index={index} value={value} deletePrize={deleteId => deletePrize(deleteId)} />
+    ))}
+  </div>
+));
+
+class List extends React.Component {
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const newPrizes = this.props.prizes.slice(0);
+    newPrizes.splice(newIndex, 0, newPrizes.splice(oldIndex, 1)[0]);
+    this.props.edit(newPrizes);
+  }
+
+  deletePrize = (deletedIndex) => {
+    const newPrizes = this.props.prizes.slice(0);
+    newPrizes.splice(deletedIndex, 1);
+    this.props.edit(newPrizes);
+  }
+
+  render() {
+    return (
+      <Paper>
+        <SortableList
+          items={this.props.prizes}
+          onSortEnd={this.onSortEnd}
+          useDragHandle={true}
+          deletePrize={deleteId => this.deletePrize(deleteId)}
+        />
+      </Paper>
+    );
+  }
+}
+
+export default List;

src/Components/Event/Show/Tabs/Technical/Prizes/New.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  Button,
+  TextField,
+} from '@material-ui/core';
+
+class New extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      additional: '',
+      amount: 0,
+      asset: '',
+    };
+  }
+
+  render() {
+    const {
+      from, to, additional, amount, asset,
+    } = this.state;
+    const { addPrize, closeDialogs } = this.props;
+    return (
+      <Dialog
+        open={true}
+        onClose={() => closeDialogs()}
+        aria-labelledby='addPrize-dialog-title'
+      >
+        <DialogContent>
+          <DialogContentText>
+            Prizes are define textually only. In case of infringement, contact us.
+          </DialogContentText>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              addPrize({
+                from,
+                to,
+                additional,
+                amount,
+                asset,
+              });
+            }}
+          >
+            <DialogTitle>
+             Conditions :
+            </DialogTitle>
+            <DialogContentText>
+              Examples :
+              If you want to make a price for the best bot only, you set both from and to rank to 1.
+              If you want the rest of the top 10 to get a price, you add a new price with from rank set to 2 and to rank set to 10.
+              Caution :
+              - Leaving &quot;from rank&quot; empty considers it to 0.
+              - Leaving &quot;to rank&quot; empty considers it as infinite
+              - Prizes are define in an additive manner, meaning that if a team qualifies for two prices, it gets both.
+              - Additional allows you to write addionnal textual condition, like &quot;positive ROI only&quot; for example.
+            </DialogContentText>
+
+            <TextField
+              label='From rank'
+              value={from}
+              onChange={e => this.setState({ from: e.target.value })}
+              type="number"
+            />
+            <TextField
+              label='To rank'
+              value={to}
+              onChange={e => this.setState({ to: e.target.value })}
+              type="number"
+            />
+            <TextField
+              label='Additional'
+              value={additional}
+              onChange={e => this.setState({ additional: e.target.value })}
+              fullWidth
+            />
+            <DialogContentText>
+              Pool :
+            </DialogContentText>
+            <DialogContentText>
+              Here you define the pool, the amount is a number whereas asset is a text. For example 1BTC, 200$, or whatever.
+            </DialogContentText>
+            <TextField
+              label='Amount'
+              value={amount}
+              onChange={e => this.setState({ amount: e.target.value })}
+              type="number"
+            />
+            <TextField
+              label='Asset'
+              value={asset}
+              onChange={e => this.setState({ asset: e.target.value })}
+            />
+            <Button type='submit' variant='contained' color='secondary'>Create a new prize</Button>
+          </form>
+          <Button onClick={() => closeDialogs()} variant='contained' color='primary'>Close</Button>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+export default New;

src/Components/Event/Show/Tabs/Technical/Prizes/index.js

@@ -0,0 +1,7 @@
+import List from './List';
+import New from './New';
+
+export {
+  List,
+  New,
+};

src/Components/Event/Show/Tabs/Technical/Rules/List.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Paper,
+  Grid,
+  Typography,
+} from '@material-ui/core';
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from 'react-sortable-hoc';
+
+const DragHandle = SortableHandle(() => <div className='dragHandle' />);
+
+const SortableItem = SortableElement(({ value, deleteRule, index }) => (
+  <div className='sortableListItem'>
+    <Grid container spacing={16}>
+      <Grid item>
+        <DragHandle />
+      </Grid>
+      <Grid item xs={12} sm container>
+        <Grid item xs container direction="column" spacing={16}>
+          <Typography gutterBottom variant="subtitle1">
+            {value.title}
+          </Typography>
+          <Typography color="textSecondary">
+            {value.description}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography style={{ cursor: 'pointer' }} onClick={() => deleteRule(index)} >Remove</Typography>
+        </Grid>
+      </Grid>
+    </Grid>
+  </div>
+));
+
+const SortableList = SortableContainer(({ items, deleteRule }) => (
+  <div className='sortableList'>
+    {items.map((value, index) => (
+      <SortableItem key={`rule-${index}`} index={index} value={value} deleteRule={deleteId => deleteRule(deleteId)} />
+    ))}
+  </div>
+));
+
+class List extends React.Component {
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const newRules = this.props.rules.slice(0);
+    newRules.splice(newIndex, 0, newRules.splice(oldIndex, 1)[0]);
+    this.props.edit(newRules);
+  }
+
+  deleteRule = (deletedIndex) => {
+    const newRules = this.props.rules.slice(0);
+    newRules.splice(deletedIndex, 1);
+    this.props.edit(newRules);
+  }
+
+  render() {
+    return (
+      <Paper>
+        <SortableList
+          items={this.props.rules}
+          onSortEnd={this.onSortEnd}
+          useDragHandle={true}
+          deleteRule={deleteId => this.deleteRule(deleteId)}
+        />
+      </Paper>
+    );
+  }
+}
+
+export default List;

src/Components/Event/Show/Tabs/Technical/Rules/New.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  Button,
+  TextField,
+} from '@material-ui/core';
+
+class New extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      title: '',
+      description: '',
+    };
+  }
+
+  render() {
+    const {
+      title, description,
+    } = this.state;
+    const { addRule, closeDialogs } = this.props;
+    return (
+      <Dialog
+        open={true}
+        onClose={() => closeDialogs()}
+        aria-labelledby='addRule-dialog-title'
+      >
+        <DialogTitle id='addRule-dialog-title'>
+          Create a new rule
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Rules are define textually only. In case of infringement, contact us.
+          </DialogContentText>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              addRule(
+                title,
+                description,
+              );
+            }}
+          >
+            <TextField
+              label='Title'
+              value={title}
+              onChange={e => this.setState({ title: e.target.value })}
+              fullWidth
+            />
+            <TextField
+              label='Description'
+              value={description}
+              onChange={e => this.setState({ description: e.target.value })}
+              fullWidth
+            />
+            <Button type='submit' variant='contained' color='secondary'>Create a new rule</Button>
+          </form>
+          <Button onClick={() => closeDialogs()} variant='contained' color='primary'>Close</Button>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+export default New;

src/Components/Event/Show/Tabs/Technical/Rules/index.js

@@ -0,0 +1,7 @@
+import List from './List';
+import New from './New';
+
+export {
+  List,
+  New,
+};

src/Components/Event/Show/Tabs/Technical/index.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+
+import {
+  Typography,
+  FormControl,
+  InputLabel,
+  Input,
+  Select,
+  FormHelperText,
+  MenuItem,
+  Grid,
+  Button,
+} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../../styles';
+
+import { getOptionsCalls } from '../../../../../GraphQL/Calls/index';
+
+import { List as RulesList, New as NewRule } from './Rules';
+import { List as PrizesList, New as NewPrize } from './Prizes';
+
+import { New as NewPlotter } from './Plotter';
+import { New as NewFormula } from './Formula';
+
+class Technical extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isNewFormulaOpen: false,
+      isNewPlotterOpen: false,
+      isNewRuleOpen: false,
+      isNewPrizeOpen: false,
+    };
+  }
+
+  addRule = (title, description) => {
+    this.props.edit('rules', [...this.props.event.rules, {
+      title,
+      description,
+    }]);
+    this.closeDialogs();
+  }
+
+  addPrize = (prize) => {
+    this.props.edit('prizes', [...this.props.event.prizes, prize]);
+    this.closeDialogs();
+  }
+
+  closeDialogs = () => {
+    this.setState({
+      isNewFormulaOpen: false,
+      isNewPlotterOpen: false,
+      isNewRuleOpen: false,
+      isNewPrizeOpen: false,
+    });
+  }
+
+  render() {
+    const {
+      classes, event, edit, create,
+    } = this.props;
+    const {
+      isNewPlotterOpen, isNewFormulaOpen, isNewRuleOpen, isNewPrizeOpen,
+    } = this.state;
+    return (
+      <React.Fragment>
+        <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+          Select the formula and the plotter you want to use, you can also create your own with the corresponding button.
+        </Typography>
+        <FormControl className={classes.inputField}>
+          <InputLabel shrink htmlFor='select'>
+            Select the formula
+          </InputLabel>
+          <Query query={getOptionsCalls.EVENTS_FORMULAS} >
+            {({ loading, error, data }) => {
+              if (loading) {
+                return (
+                  <Select
+                    value='loading'
+                    input={<Input />}
+                    displayEmpty
+                    className={classes.selectEmpty}
+                    disabled
+                  >
+                    <MenuItem key='1' value='loading'>Loading possibilities...</MenuItem>
+                  </Select>
+                );
+              }
+              if (error) return `Error! ${error.message}`;
+              const selects = data.events_Formulas.map((formula, index) => (
+                <MenuItem key={index} value={formula.id}>{formula.name}</MenuItem>
+              ));
+              return (
+                <React.Fragment>
+                  <Select
+                    value={event.formulaId}
+                    input={<Input />}
+                    displayEmpty
+                    className={classes.selectEmpty}
+                    onChange={newVal => edit('formulaId', newVal.target.value)}
+                  >
+                    {selects}
+                  </Select>
+                  { isNewFormulaOpen ? <NewFormula closeDialogs={() => this.closeDialogs()} /> : ''}
+                </React.Fragment>
+              );
+            }}
+          </Query>
+          <FormHelperText className={classes.clickable} onClick={() => { this.setState({ isNewFormulaOpen: true }); }}>
+            To create a new formula, click here
+          </FormHelperText>
+        </FormControl>
+        <FormControl className={classes.inputField}>
+          <InputLabel shrink htmlFor='select'>
+            Select the Plotter
+          </InputLabel>
+          <Query query={getOptionsCalls.EVENTS_PLOTTERS} >
+            {({ loading, error, data }) => {
+              if (loading) {
+                return (
+                  <Select
+                    value='loading'
+                    input={<Input />}
+                    displayEmpty
+                    className={classes.selectEmpty}
+                    disabled
+                  >
+                    <MenuItem key='1' value='loading'>Loading possibilities...</MenuItem>
+                  </Select>
+                );
+              }
+              if (error) return `Error! ${error.message}`;
+              const selects = data.events_Plotters.map((plotter, index) => (
+                <MenuItem key={index} value={plotter.id}>{plotter.name}</MenuItem>
+              ));
+              return (
+                <React.Fragment>
+                  <Select
+                    value={event.plotterId}
+                    input={<Input />}
+                    displayEmpty
+                    className={classes.selectEmpty}
+                    onChange={newVal => edit('plotterId', newVal.target.value)}
+                  >
+                    {selects}
+                  </Select>
+                  { isNewPlotterOpen ? <NewPlotter closeDialogs={() => this.closeDialogs()} /> : ''}
+                </React.Fragment>
+              );
+            }}
+          </Query>
+          <FormHelperText className={classes.clickable} onClick={() => { this.setState({ isNewPlotterOpen: true }); }} >
+            To create a new plotter, click here
+          </FormHelperText>
+        </FormControl>
+
+        <FormControl className={classes.inputField}>
+          <Typography variant='h5'>
+            Define the rules of your event.
+          </Typography>
+          <RulesList rules={event.rules} edit={newVal => edit('rules', newVal)} />
+          { isNewRuleOpen
+            ? <NewRule closeDialogs={() => this.closeDialogs()} addRule={(title, description) => this.addRule(title, description)} />
+            : ''}
+          <FormHelperText className={classes.clickable} onClick={() => { this.setState({ isNewRuleOpen: true }); }} >
+            To add a new rule, click here
+          </FormHelperText>
+        </FormControl>
+
+        <FormControl className={classes.inputField}>
+          <Typography variant='h5'>
+            Define the prizes of your event.
+          </Typography>
+          <PrizesList prizes={event.prizes} edit={newVal => edit('prizes', newVal)} />
+          { isNewPrizeOpen
+            ? <NewPrize closeDialogs={() => this.closeDialogs()} addPrize={prize => this.addPrize(prize)} />
+            : ''}
+          <FormHelperText className={classes.clickable} onClick={() => { this.setState({ isNewPrizeOpen: true }); }} >
+            To add a new prize, click here
+          </FormHelperText>
+        </FormControl>
+
+        <Grid container justify='center' >
+          <Grid item>
+            <Button className={classes.bottomButton} onClick={() => create()} variant='contained' color='secondary'>
+              Create the event
+            </Button>
+          </Grid>
+        </Grid>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Technical);

src/Components/Event/Show/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,
+};

src/Components/Event/Show/index.js

@@ -1,39 +1,76 @@
 import React from 'react';
 import { Query } from 'react-apollo';
 
-import Typography from '@material-ui/core/Typography';
+import {
+  Paper,
+  Typography,
+} from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
-
 import styles from './styles';
 
+import { toLocalTime } from '../../../utils';
+
+import BannerTopBar from '../../BannerTopBar';
+
 import { showEventCalls } from '../../../GraphQL/Calls/index';
 
 class Show extends React.Component {
   render() {
+    const { classes } = this.props;
     return (
       <React.Fragment>
-        <Typography
-          variant='display1'
-          align='center'
-          color='textPrimary'
-          gutterBottom
-        >
-          Enroll in an competition {this.props.match.params.slug}
-        </Typography>
-        <Query
-          query={showEventCalls.EVENTS_EVENT}
-          variables={{ eventId: this.props.match.params.slug }}
-        >
-          {({ loading, error, data }) => {
-            if (loading) return 'Loading...';
-            if (error) return `Error! ${error.message}`;
-            return (
-              <p>
-                {data.events_Event.description}
-              </p>
-            );
-          }}
-        </Query>
+        <BannerTopBar backgroundUrl='https://superalgos.org/img/photos/events.jpg' />
+        <div className='container'>
+          <Paper className={classes.paperRoot}>
+            <Typography className={classes.typography} variant='h4' gutterBottom>
+              Event Details :
+            </Typography>
+
+            <Query
+              query={showEventCalls.EVENTS_EVENT}
+              variables={{ eventId: this.props.match.params.slug }}
+            >
+              {({ loading, error, data }) => {
+                if (loading) return 'Loading...';
+                if (error) return `Error! ${error.message}`;
+                return (
+                  <React.Fragment>
+                    <Typography className={classes.typography} variant='h5' gutterBottom>
+                      Title :
+                    </Typography>
+                    <Typography className={classes.typography} variant='h6' gutterBottom>
+                      {data.events_Event.title}
+                    </Typography>
+                    <Typography className={classes.typography} variant='h5' gutterBottom>
+                      Subtitle :
+                    </Typography>
+                    <Typography className={classes.typography} variant='h6' gutterBottom>
+                      {data.events_Event.subtitle}
+                    </Typography>
+                    <Typography className={classes.typography} variant='h5' gutterBottom>
+                      Dates :
+                    </Typography>
+                    <Typography className={classes.typography} variant='h6' gutterBottom>
+                      From {toLocalTime(data.events_Event.startDatetime)} to {toLocalTime(data.events_Event.endDatetime)}
+                    </Typography>
+                    <Typography className={classes.typography} variant='h5' gutterBottom>
+                      Formula :
+                    </Typography>
+                    <Typography className={classes.typography} variant='h6' gutterBottom>
+                      {data.events_Event.formula.name}
+                    </Typography>
+                    <Typography className={classes.typography} variant='h5' gutterBottom>
+                      Plotter :
+                    </Typography>
+                    <Typography className={classes.typography} variant='h6' gutterBottom>
+                      {data.events_Event.plotter.name}
+                    </Typography>
+                  </React.Fragment>
+                );
+              }}
+            </Query>
+          </Paper>
+        </div>
       </React.Fragment>
     );
   }

src/Components/Event/Show/styles.js

@@ -1,4 +1,51 @@
-const styles = () => ({
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+    padding: 0,
+    margin: 0,
+  },
+  tabTitle: {
+    width: '25%',
+    maxWidth: 'none',
+  },
+  clickable: {
+    cursor: 'pointer',
+  },
+  buttonList: {
+    margin: theme.spacing.unit,
+    float: 'right',
+  },
+  buttonGrid: {
+    marginTop: -20,
+  },
+  title: {
+    marginTop: 20,
+  },
+  paperRoot: {
+    flexGrow: 1,
+    padding: 10,
+    marginTop: 25,
+    marginBottom: 25,
+  },
+  inputField: {
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: 25,
+  },
+  typography: {
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: 40,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing.unit * 2,
+  },
+  bottomButton: {
+    padding: 15,
+    margin: 20,
+  },
 });
 
 export default styles;

src/index.js

@@ -7,6 +7,7 @@ import LuxonUtils from 'material-ui-pickers/utils/luxon-utils';
 import Search from './Components/Search';
 import HostedEvents from './Components/HostedEvents';
 import EditEvent from './Components/Event/Edit';
+import ShowEvent from './Components/Event/Show';
 import CreateEvent from './Components/Event/Create';
 
 import './styles.scss';
@@ -18,7 +19,7 @@ const App = () => (
         <Route exact path='/events/' component={Search} />
         <Route path='/events/create' component={CreateEvent} />
         <Route path='/events/edit/:slug' component={EditEvent} />
-        <Route path='/events/show/:slug' component={EditEvent} />
+        <Route path='/events/show/:slug' component={ShowEvent} />
         <Route path='/events/host' component={HostedEvents} />
       </Switch>
     </div>