Merge remote-tracking branch 'EventsClientModule/develop' into develop

.eslintignore

@@ -0,0 +1 @@
+postcss.config.js

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  parser: 'babel-eslint',
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+  ],
+  rules: {
+    'max-len': ['error', 140, 2],
+    'no-underscore-dangle': 'off',
+    'no-param-reassign': 'off',
+    'react/prop-types': 0,
+    'react/jsx-indent': ['error', 2],
+    'import/prefer-default-export': 'off',
+  },
+  settings: {
+    'react': {
+      'pragma': 'React',
+      'version': '16.5',
+    },
+  },
+  env: {
+    'browser': true,
+  },
+};

.gitignore

@@ -0,0 +1,16 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Visual Studio Code
+.vscode
+
+#Mac specific files
+.DS_Store

.npmignore

@@ -0,0 +1,3 @@
+build
+node_modules
+.DS_Store

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team using the online form in the contacts page of the superalgos.org website. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -0,0 +1,45 @@
+# Contributing
+
+We are thrilled you are interested in contributing to this repository. Your help may be essential to the project's success and we want you in! 
+
+Superalgos is a collective project, currently at a very early stage. Although this repository is not open source software yet, we do welcome contributions from the community.
+
+Contributions are deemed _voluntary work_. There might be incentives in place for certain kinds of contributions. Contact us for more information in this regard.
+
+In any case, contributors agree to provide an express grant of patent rights for their contributions. Submitting Pull Requests to this repository represents an express agreement with the terms of our Balanced Contributor Intellectual Property Agreement. This agreement is a direct implementation of GitHub's [Balanced Employee Intellectual Property Agreement 1.0.1](https://github.com/github/balanced-employee-ip-agreement/blob/master/Balanced_Employee_IP_Agreement.md).
+
+# Balanced Contributor Intellectual Property Agreement 1.0.1
+
+This BALANCED CONTRIBUTOR INTELLECTUAL PROPERTY AGREEMENT is between person or team submitting Pull Requests to this repository and Superalgos.org ("Project").
+
+**What is this?** This is the Project's Intellectual Property Agreement ("Agreement"). If you've worked in the technology space before, there's a good chance that you've run across one or more of these in the past. This document is the official, entire and exclusive agreement on what intellectual property ("IP") is yours, and what belongs to the Project.
+
+**Why is this?** The Project needs to be clear on what IP it owns and has rights to. Its customers, contributors, and investors depend on the Project having the legal rights to the products and services it is providing so that the Project can continue operating and doing business.
+
+The Project also believes that it's important to be clear on what it doesn't own. The Project doesn't want you looking over your shoulder every time you work on something personal or worrying that the Project will someday seize your open source non-lethal mousetrap simulation software. In other words, the Project isn't interested in appropriating your personal projects.
+
+**Read this.** Please read this document and be sure you understand it before you submit any Pull Requests. Due to legal risk and corporate obligations, the Project cannot, by and large, negotiate its terms. If you feel you have a particular circumstance that keeps you from signing, please let the Project's legal department ("Legal") know. And, of course, you're always free and encouraged to get your own legal counsel to explain anything you're not clear on.
+
+Cool? Then, by submitting your first Pull Request, and as a condition of your contribution, you agree to the following:
+
+1. **What the Project owns.** The Project owns any IP ("Project IP") that you create, or help create _as its contributor_, but only if it meets one or more of these additional conditions: The IP was (i) related to an existing or prospective Project product or service at the time you developed, invented, or created it, (ii) developed for use by the Project, or (iii) developed or promoted with existing Project IP or with the Project's endorsement. You hereby grant and assign, and will grant and assign, to the Project all rights and interests in all Project IP.
+
+   "Project IP" includes concepts, designs, developments, discoveries, ideas, improvements, inventions, trade secrets, trademarks, and works of authorship.
+
+2. **What the Project doesn't own.** If you create IP that doesn't fit into one of the categories listed above, the Project doesn't own it. In other words, the Project doesn't own concepts, designs, developments, discoveries, ideas, improvements, inventions, trade secrets, trademarks, or works of authorship that you develop, invent, or create that do not meet any of the conditions in Section 1. 
+
+3. **Contribution of your IP to Project projects.** If you include your own IP – such as IP you created prior to working for the Project – into a Project product or service, it's still yours, of course, but you grant the Project a non-exclusive, irrevocable, fully paid-up, royalty-free, perpetual, sublicensable, transferable, worldwide license to use it without restriction in any way or implementation, in modified form, or as is, by itself, or incorporated into another product or service ("License"). If you include your name in any project over which the Project would have rights under this Agreement, such as in a copyright notice or a comment in code or documentation, then the License covers the rights associated with that use of your name as well.
+
+4. **Your contributions to non-Project projects.** The Project recognizes that you may be engaged in work that requires you to submit IP to entities other than the Project, such as open source projects used by the Project. Please make sure that Legal is aware of what you're working on so that Legal can help with any licensing issues. If any project asks you to sign a contribution agreement, you should check with Legal before doing so. These agreements may be legally binding on the Project and so should be run through Legal first.
+
+5. **Voluntary Works** All Project IP that you are involved with or create as part of your work for the Project is voluntary work which does not require compensation. There might be incentives in place for certain kinds of contributions. Feel free to contact the Project to learn more.
+
+6. **No conflicts.** You agree that you don't have any outstanding agreements or obligations that conflict with those in this Agreement, and that you won't enter into conflicting agreements in the future.
+
+7. **IP protection.** The Project might someday need to show the work that went into the development of IP that it uses or has used, or to make government filings to establish that it owns the IP or has rights over it. To help in those situations, you agree not to destroy any records you maintain relating to the development of any Project IP or IP under License (together, "All IP"), and, if the Project asks, to provide those records to the Project. You agree to help the Project secure and defend its rights in All IP. For your help the Project will compensate you at a reasonable rate. If the Project is unable to secure your help, you authorize the Project to act on your behalf (as your agent and attorney-in-fact) in securing all rights related to All IP.
+
+8. **Confidentiality.** As an contributor or contractor of the Project, you will have access to sensitive confidential information that is important to the Project's business. You are responsible for keeping this information confidential, including after you end your work for the Project.
+
+   "Confidential Information" includes non-public technical details about our products or services, financial information, business strategies and forecasts, customer data, or any other information, data or know-how that is valuable to the Project because it is not publicly known.
+
+   The Project's Confidential Information is sensitive and we expect that you'll treat it as such. You agree to only use the Project's Confidential Information for the purpose of performing your contribution and for the benefit of the Project. You will do your best to keep Confidential Information secret. If you are not sure if something is Confidential Information, you should assume that it is, until you can confirm otherwise.

LICENSE

@@ -0,0 +1,39 @@
+COPYRIGHT NOTICE
+
+© Copyright 2018 Superalgos.org
+
+
+LICENSE NOTICE
+
+Superalgos is a collaborative project currently at a very early stage. Because certain aspects of 
+the project are still not clearly defined, we have chosen to --temporarily-- grant a restrictive 
+license for the use of this repository, until those aspects are clarified and a proper open source 
+license can be granted.
+
+Superalgos.org is publishing the code of this software for several reasons. However, it shall not be considered free software yet. Superalgos is a collaborative project in the crypto space and this 
+software is still proprietary software.
+
+The reasons for opening up the code of this software at this stage are the following:
+
+  * We believe that transparency is paramount to achieving our goals, so we want everyone to 
+    be able to understand what this software does and how. Opening up the code of this software 
+    allows anyone to take a close look.
+
+  * We welcome contributions from the community. Contributions are regarded as voluntary work. 
+    There may be incentives in place for certain kinds of contributions. Contact us to learn more.
+    Contributors agree to provide an express grant of patent rights for their contributions.
+
+
+LICENSE WORDING
+
+Superalgos.org grants a limited license for the following uses:
+
+1. CODE REVIEW AND AUDITS. You are granted permission to clone this repository to analyze, 
+   review or audit the code.
+
+2. COLLABORATING WITH Superalgos.org. You are granted permission to fork this repository 
+   with the sole purpose of correcting bugs and developing functionality in agreement with 
+   Superalgos.org. By contributing to this repository you explicitely agree to the terms 
+   detailed in CONTRIBUTING.MD.
+
+PLEASE SEE CONTRIBUTING.MD FOR MORE DETAILS ON THE IMPLICATIONS SURROUNDING YOUR CONTRIBUTIONS TO THIS REPOSITORY.

README.md

@@ -0,0 +1 @@
+EventsClient

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@superalgos/events-client",
+  "version": "0.0.2",
+  "description": "SuperAlgos Event client-side web app",
+  "author": "",
+  "license": "",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Superalgos/EventsClientModule.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "standard": {
+    "parser": "babel-eslint"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.2.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-react": "^7.11.1",
+    "react-hot-loader": "^4.3.11"
+  },
+  "dependencies": {
+    "@material-ui/core": "^3.2.0",
+    "@material-ui/icons": "^3.0.1",
+    "apollo-client": "^2.4.4",
+    "graphql": "^14.0.2",
+    "graphql-tag": "^2.10.0",
+    "luxon": "^1.4.4",
+    "material-ui-pickers": "^1.0.1",
+    "react": "^16.5.2",
+    "react-apollo": "^2.2.4",
+    "react-dom": "^16.6.0",
+    "react-router-dom": "^4.3.1",
+    "react-sortable-hoc": "^0.8.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+  ],
+};

src/Components/BannerTopBar/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+
+const BannerTopBar = ({
+  size,
+  backgroundUrl,
+  title,
+  text,
+}) => (
+  <div className={`bannerTopBar ${size}`} style={backgroundUrl ? { backgroundImage: `url(${backgroundUrl})` } : {}}>
+    <div className='caption'>
+      <Typography className='title' variant='h1' align='center'>{title}</Typography>
+      <Typography className='text' variant='h2' align='center'>{text}</Typography>
+    </div>
+  </div>
+);
+
+export default BannerTopBar;

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

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);

src/Components/Event/Create/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/Create/Tabs/Technical/Formula/index.js

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

src/Components/Event/Create/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/Create/Tabs/Technical/Plotter/index.js

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

src/Components/Event/Create/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/Create/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/Create/Tabs/Technical/Prizes/index.js

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

src/Components/Event/Create/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/Create/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/Create/Tabs/Technical/Rules/index.js

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

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

src/Components/Event/Create/index.js

@@ -0,0 +1,212 @@
+import React from 'react';
+import { Mutation } from 'react-apollo';
+import { DateTime } from 'luxon';
+
+import {
+  Paper,
+  Typography,
+  AppBar,
+  Tabs,
+  Tab,
+} from '@material-ui/core';
+import {
+  Face as BasicIcon,
+  Alarm as TechnicalIcon,
+  Group as TeamAndServerIcon,
+  PresentToAll as PresentationIcon,
+} from '@material-ui/icons';
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+
+import BannerTopBar from '../../BannerTopBar';
+
+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,
+      title: '',
+      subtitle: '',
+      description: '',
+      startDatetime: DateTime.local().plus({ days: 1 }).startOf('day'),
+      endDatetime: DateTime.local().plus({ days: 8 }).startOf('day'),
+      formulaId: '',
+      plotterId: '',
+      prizes: [],
+      rules: [],
+    };
+  }
+
+  handleTabChange = (event, value) => {
+    this.setState({ value });
+  }
+
+  handleEventChange = (newType, newVal) => {
+    this.setState({ [newType]: newVal });
+  }
+
+  remapPrizes = (prizes) => {
+    const remappedPrizes = [];
+
+    prizes.forEach((prize) => {
+      remappedPrizes.push({
+        condition: {
+          from: parseInt(prize.from, 10),
+          to: parseInt(prize.to, 10),
+          additional: prize.additional,
+        },
+        pool: {
+          amount: parseInt(prize.amount, 10),
+          asset: prize.asset,
+        },
+      });
+    });
+    return remappedPrizes;
+  }
+
+  render() {
+    const {
+      title,
+      subtitle,
+      description,
+      startDatetime,
+      endDatetime,
+      value,
+      formulaId,
+      plotterId,
+      prizes,
+      rules,
+    } = this.state;
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <BannerTopBar backgroundUrl='https://superalgos.org/img/photos/events.jpg' />
+        <Mutation mutation={hostedEventsCalls.EVENTS_CREATEEVENT}
+          update={(store, { data }) => {
+            this.props.history.push(`/events/edit/${data.events_CreateEvent.id}`);
+          }
+          }
+        >
+          {hostEvent => (
+            <div className={classes.root}>
+              <AppBar position='static' color='default'>
+                <Tabs
+                value={value}
+                onChange={this.handleTabChange}
+                scrollable
+                scrollButtons='off'
+                indicatorColor='primary'
+                textColor='primary'
+              >
+                  <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>
+              <div className='container'>
+                <Paper className={classes.paperRoot}>
+                  <Typography className={classes.typography} variant='h5' gutterBottom>
+                    Create a new event
+                  </Typography>
+                  {value === 0 && <TabContainer>
+                    <Basic
+                      event={{
+                        title,
+                        subtitle,
+                        description,
+                        startDatetime,
+                        endDatetime,
+                      }}
+                      edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
+                      create={() => hostEvent({
+                        variables: {
+                          event: {
+                            title,
+                            subtitle,
+                            description,
+                            startDatetime: startDatetime.valueOf() / 1000,
+                            endDatetime: endDatetime.valueOf() / 1000,
+                            formulaId,
+                            plotterId,
+                            prizes: this.remapPrizes(prizes),
+                            rules,
+                          },
+                        },
+                      })}
+                    />
+                  </TabContainer>}
+                  {value === 1 && <TabContainer>
+                    <Technical
+                      event={{
+                        formulaId,
+                        plotterId,
+                        prizes,
+                        rules,
+                      }}
+                      edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
+                      create={() => hostEvent({
+                        variables: {
+                          event: {
+                            title,
+                            subtitle,
+                            description,
+                            startDatetime: startDatetime.valueOf() / 1000,
+                            endDatetime: endDatetime.valueOf() / 1000,
+                            formulaId,
+                            plotterId,
+                            prizes: this.remapPrizes(prizes),
+                            rules,
+                          },
+                        },
+                      })}
+                    />
+                  </TabContainer>}
+                  {value === 2 && <TabContainer><TeamsServer /></TabContainer>}
+                  {value === 3 && <TabContainer><PresentationPage /></TabContainer>}
+                </Paper>
+              </div>
+            </div>
+          )}
+        </Mutation>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Create);

src/Components/Event/Create/styles.js

@@ -0,0 +1,51 @@
+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/Components/Event/Edit/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, saveChanges,
+    } = 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 edit 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={`${event.id}(your public ID is generated automatically and unmutable)`}
+          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={() => saveChanges()} variant='contained' color='secondary'>
+              Or Edit event
+            </Button>
+          </Grid>
+        </Grid>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Basic);

src/Components/Event/Edit/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/Edit/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/Edit/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/Edit/Tabs/Technical/Formula/index.js

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

src/Components/Event/Edit/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/Edit/Tabs/Technical/Plotter/index.js

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

src/Components/Event/Edit/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/Edit/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/Edit/Tabs/Technical/Prizes/index.js

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

src/Components/Event/Edit/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/Edit/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/Edit/Tabs/Technical/Rules/index.js

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

src/Components/Event/Edit/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, saveChanges,
+    } = 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={ () => saveChanges() } variant='contained' color='secondary'>
+              Edit the event
+            </Button>
+          </Grid>
+        </Grid>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Technical);

src/Components/Event/Edit/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/Edit/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+import Queried from './queried';
+
+import BannerTopBar from '../../BannerTopBar';
+
+import { showEventCalls } from '../../../GraphQL/Calls/index';
+
+class Edit extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <BannerTopBar backgroundUrl='https://superalgos.org/img/photos/events.jpg' />
+
+        <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 (<Queried event={data.events_Event} />);
+          }}
+        </Query>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Edit);

src/Components/Event/Edit/queried.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import { Mutation } from 'react-apollo';
+
+import {
+  Paper,
+  Typography,
+  AppBar,
+  Tabs,
+  Tab,
+} from '@material-ui/core';
+import {
+  Face as BasicIcon,
+  Alarm as TechnicalIcon,
+  Group as TeamAndServerIcon,
+  PresentToAll as PresentationIcon,
+} from '@material-ui/icons';
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+
+import {
+  Basic,
+  PresentationPage,
+  TeamsServer,
+  Technical,
+} from './Tabs';
+
+import { hostedEventsCalls } from '../../../GraphQL/Calls/index';
+
+function TabContainer(props) {
+  return (
+    <Typography component='div' style={{ padding: 8 * 3 }}>
+      {props.children}
+    </Typography>
+  );
+}
+
+class Queried extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0,
+      id: this.props.event.id,
+      title: this.props.event.title,
+      subtitle: this.props.event.subtitle,
+      description: this.props.event.description,
+      startDatetime: this.props.event.startDatetime * 1000,
+      endDatetime: this.props.event.endDatetime * 1000,
+      formulaId: this.props.event.formula.id,
+      plotterId: this.props.event.plotter.id,
+      prizes: this.counterremapPrizes(this.props.event.prizes),
+      rules: this.props.event.rules,
+    };
+  }
+
+  handleTabChange = (event, value) => {
+    this.setState({ value });
+  }
+
+  handleEventChange = (newType, newVal) => {
+    this.setState({ [newType]: newVal });
+  }
+
+  counterremapPrizes = (prizes) => {
+    const counterremapPrizes = [];
+    prizes.forEach((prize) => {
+      counterremapPrizes.push({
+        from: parseInt(prize.condition.from, 10),
+        to: parseInt(prize.condition.to, 10),
+        additional: prize.condition.additional,
+        amount: parseInt(prize.pool.amount, 10),
+        asset: prize.pool.asset,
+      });
+    });
+    return counterremapPrizes;
+  }
+
+  remapPrizes = (prizes) => {
+    const remappedPrizes = [];
+
+    prizes.forEach((prize) => {
+      remappedPrizes.push({
+        condition: {
+          from: parseInt(prize.from, 10),
+          to: parseInt(prize.to, 10),
+          additional: prize.additional,
+        },
+        pool: {
+          amount: parseInt(prize.amount, 10),
+          asset: prize.asset,
+        },
+      });
+    });
+    return remappedPrizes;
+  }
+
+  render() {
+    const {
+      id,
+      title,
+      subtitle,
+      description,
+      startDatetime,
+      endDatetime,
+      value,
+      formulaId,
+      plotterId,
+      prizes,
+      rules,
+    } = this.state;
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Mutation mutation={hostedEventsCalls.EVENTS_EDITEVENT}
+          update={(store, { data }) => {
+            this.props.history.push(`/events/edit/${data.events_EditEvent.id}`);
+          }}
+        >
+          {editHosted => (
+            <div className={classes.root}>
+              <AppBar position='static' color='default'>
+                <Tabs
+                value={value}
+                onChange={this.handleTabChange}
+                scrollable
+                scrollButtons='off'
+                indicatorColor='primary'
+                textColor='primary'
+              >
+                  <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>
+              <div className='container'>
+                <Paper className={classes.paperRoot}>
+                  <Typography className={classes.typography} variant='h5' gutterBottom>
+                    Edit an event
+                  </Typography>
+                  {value === 0 && <TabContainer>
+                    <Basic
+                      event={{
+                        id,
+                        title,
+                        subtitle,
+                        description,
+                        startDatetime,
+                        endDatetime,
+                        prizes,
+                        rules,
+                      }}
+                      edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
+                      saveChanges={() => editHosted({
+                        variables: {
+                          eventId: id,
+                          event: {
+                            title,
+                            subtitle,
+                            description,
+                            startDatetime: startDatetime.valueOf() / 1000,
+                            endDatetime: endDatetime.valueOf() / 1000,
+                            formulaId,
+                            plotterId,
+                            prizes: this.remapPrizes(prizes),
+                            rules,
+                          },
+                        },
+                      })}
+                    />
+                  </TabContainer>}
+                  {value === 1 && <TabContainer>
+                    <Technical
+                      event={{
+                        formulaId,
+                        plotterId,
+                        prizes,
+                        rules,
+                      }}
+                      edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
+                      saveChanges={() => editHosted({
+                        variables: {
+                          eventId: id,
+                          event: {
+                            title,
+                            subtitle,
+                            description,
+                            startDatetime: startDatetime.valueOf() / 1000,
+                            endDatetime: endDatetime.valueOf() / 1000,
+                            formulaId,
+                            plotterId,
+                            prizes: this.remapPrizes(prizes),
+                            rules,
+                          },
+                        },
+                      })}
+                    />
+                  </TabContainer>}
+                  {value === 2 && <TabContainer><TeamsServer /></TabContainer>}
+                  {value === 3 && <TabContainer><PresentationPage /></TabContainer>}
+                </Paper>
+              </div>
+            </div>
+          )}
+        </Mutation>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Queried);

src/Components/Event/Edit/styles.js

@@ -0,0 +1,51 @@
+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/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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+
+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>
+        <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>
+    );
+  }
+}
+
+export default withStyles(styles)(Show);

src/Components/Event/Show/styles.js

@@ -0,0 +1,51 @@
+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/Components/HostedEvents/Event.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Mutation } from 'react-apollo';
+
+
+import {
+  Grid, Paper,
+  Typography,
+  Button,
+} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+
+import { hostedEventsCalls } from '../../GraphQL/Calls/index';
+
+import { toLocalTime } from '../../utils';
+
+class Event extends React.Component {
+  render() {
+    const { classes, showOnly, event } = this.props;
+    const {
+      id,
+      title,
+      subtitle,
+      startDatetime,
+      endDatetime,
+      host,
+      formula,
+      description,
+    } = event;
+    return (
+      <Paper className={classes.card}>
+        <Grid container spacing={16}>
+          <Grid item xs>
+            <Typography gutterBottom variant='h5'> {title} </Typography>
+            <Typography gutterBottom variant='h6'> {subtitle} </Typography>
+            <Typography gutterBottom>From : {toLocalTime(startDatetime)} </Typography>
+            <Typography gutterBottom>To : {toLocalTime(endDatetime)} </Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography gutterBottom variant='h6'> Description : </Typography>
+            <Typography gutterBottom> {description} </Typography>
+          </Grid>
+          <Grid item xs={12} sm container>
+            <Grid item xs container direction='column' spacing={16}>
+              <Grid item xs>
+                <Typography gutterBottom>
+                  Hosted by: {host.alias} ({host.lastName} {host.firstName})
+                </Typography>
+                <Typography gutterBottom>Formula: {formula.name} </Typography>
+              </Grid>
+              <Grid item className={classes.buttonGrid}>
+                { !showOnly
+                  ? <React.Fragment>
+                    <Mutation mutation={hostedEventsCalls.EVENTS_PUBLISHEVENT}
+                      update={() => {
+                        window.location.reload();
+                      }}
+                    >
+                      {publishEvent => (
+                        <Button
+                          className={classes.buttonList}
+                          variant='outlined'
+                          color='secondary'
+                          size='small'
+                          onClick={() => publishEvent({ variables: { eventId: id, state: 'PUBLISHED' } })}
+                        >
+                          Publish
+                        </Button>
+                      )}
+                    </Mutation>
+                    <Button
+                      className={classes.buttonList}
+                      variant='outlined'
+                      color='primary'
+                      size='small'
+                      component={Link}
+                      to={`/events/edit/${id}`}
+                    >
+                      Edit
+                    </Button>
+                  </React.Fragment>
+                  : ''
+                }
+                <Button
+                  className={classes.buttonList}
+                  variant='outlined'
+                  color='primary'
+                  size='small'
+                  component={Link}
+                  to={`/events/show/${id}`}
+                >
+                  Show
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(styles)(Event);

src/Components/HostedEvents/index.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import { Typography } from '@material-ui/core';
+import { DateTime } from 'luxon';
+
+import BannerTopBar from '../BannerTopBar';
+
+import { hostedEventsCalls } from '../../GraphQL/Calls/index';
+
+import Event from './Event';
+
+
+const HostedEvent = () => (
+  <React.Fragment>
+    <BannerTopBar
+      size='medium'
+      title='Your hosted events'
+      text='You are one of the pillars of this community, thank you'
+      backgroundUrl='https://superalgos.org/img/photos/events.jpg'
+    />
+
+    <Query
+      query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+      variables={{ hostId: 'self', state: 'UNPUBLISHED' }}
+    >
+      {({ loading, error, data }) => {
+        if (loading) return 'Loading...';
+        if (error) return `Error! ${error.message}`;
+        const list = data.events_Events.map((event, index) => (
+          <Event showOnly={false} key={index} event={event} />
+        ));
+        return (
+          <div className='container'>
+            <Typography variant='h3'> Unpublished : </Typography>
+            { list }
+          </div>
+        );
+      }}
+    </Query>
+
+    <Query
+      query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+      variables={{ hostId: 'self', minEndDate: Math.floor(DateTime.local().valueOf() / 1000) }}
+    >
+      {({ loading, error, data }) => {
+        if (loading) return 'Loading...';
+        if (error) return `Error! ${error.message}`;
+        const list = data.events_Events.map((event, index) => (
+          <Event showOnly={true} key={index} event={event} />
+        ));
+        return (
+          <div className='container'>
+            <Typography variant='h3'> Published : </Typography>
+            { list }
+          </div>
+        );
+      }}
+    </Query>
+
+    <Query
+      query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+      variables={{ hostId: 'self', maxEndDate: Math.floor(DateTime.local().valueOf() / 1000) }}
+    >
+      {({ loading, error, data }) => {
+        if (loading) return 'Loading...';
+        if (error) return `Error! ${error.message}`;
+        const list = data.events_Events.map((event, index) => (
+          <Event showOnly={true} key={index} event={event} />
+        ));
+        return (
+          <div className='container'>
+            <Typography variant='h3'> Old : </Typography>
+            { list }
+          </div>
+        );
+      }}
+    </Query>
+  </React.Fragment>
+);
+
+
+export default HostedEvent;

src/Components/HostedEvents/styles.js

@@ -0,0 +1,17 @@
+const styles = theme => ({
+  card: {
+    flexGrow: 1,
+    padding: 20,
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  buttonList: {
+    margin: theme.spacing.unit,
+    float: 'right',
+  },
+  buttonGrid: {
+    marginTop: -20,
+  },
+});
+
+export default styles;

src/Components/Search/Event.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Mutation } from 'react-apollo';
+
+import {
+  Grid, Paper,
+  Typography,
+  Button,
+  Select,
+  MenuItem,
+} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+import { hostedEventsCalls } from '../../GraphQL/Calls/index';
+
+import { toLocalTime } from '../../utils';
+
+class Event extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      keyId: '',
+      participantId: '',
+      botId: '',
+    };
+  }
+
+  render() {
+    const { keyId, participantId, botId } = this.state;
+    const {
+      classes,
+      event,
+      availableKey = [],
+      enrollable = false,
+    } = this.props;
+    const {
+      id,
+      title,
+      subtitle,
+      startDatetime,
+      endDatetime,
+      host,
+      formula,
+      description,
+      participatingAs,
+      canParticipateAs,
+    } = event;
+
+    const fbs = [];
+
+    canParticipateAs.forEach((team) => {
+      team.fb.forEach((finb) => {
+        fbs.push({
+          value: `${team.id}|${finb.id}`,
+          text: `${team.name} > ${finb.name}`,
+        });
+      });
+    });
+
+    return (
+      <Paper className={classes.card}>
+        <Grid container spacing={16}>
+          <Grid item xs>
+            <Typography gutterBottom variant='h5'> {title} </Typography>
+            <Typography gutterBottom variant='h6'> {subtitle} </Typography>
+            <Typography gutterBottom>From : {toLocalTime(startDatetime)} </Typography>
+            <Typography gutterBottom>To : {toLocalTime(endDatetime)} </Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography gutterBottom variant='h6'> Description : </Typography>
+            <Typography gutterBottom> {description} </Typography>
+          </Grid>
+          <Grid item xs={12} sm container>
+            <Grid item xs container direction='column' spacing={16}>
+              <Grid item xs>
+                <Typography gutterBottom>
+                  Hosted by: {host.alias} ({host.lastName} {host.firstName})
+                </Typography>
+                <Typography gutterBottom>Formula: {formula.name} </Typography>
+                <Typography gutterBottom>You are participating as : { participatingAs.map(team => `${team.name}, `) } </Typography>
+              </Grid>
+              <Grid item className={classes.buttonGrid}>
+                { enrollable && fbs.length
+                  ? <Mutation mutation={hostedEventsCalls.REGISTER_EVENT}
+                      update={() => {
+                        window.location.reload();
+                      }}
+                    >
+                    {enrollToEvent => (
+                      <React.Fragment>
+                        <Select
+                          value={`${participantId}|${botId}`}
+                          onChange={(val) => {
+                            this.setState({
+                              participantId: val.target.value.split('|')[0],
+                              botId: val.target.value.split('|')[1],
+                            });
+                          }}
+                          name='bot'
+                          displayEmpty
+                          className={classes.selectEmpty}
+                        >
+                          <MenuItem value='|' disabled>
+                            Enroll as :
+                          </MenuItem>
+                          { fbs.map(finb => <MenuItem
+                            key={finb.value}
+                            value={finb.value}>{finb.text}</MenuItem>) }
+                        </Select>
+                        <Select
+                          value={keyId}
+                          onChange={(val) => { this.setState({ keyId: val.target.value }); }}
+                          name='key'
+                          displayEmpty
+                          className={classes.selectEmpty}
+                        >
+                          <MenuItem value='' disabled>
+                            Select key
+                          </MenuItem>
+                          { availableKey.map(akey => <MenuItem
+                            key={akey.id}
+                            value={akey.id}>{akey.key}</MenuItem>) }
+                        </Select>
+                        <Button
+                          className={classes.buttonList}
+                          variant='outlined'
+                          color='secondary'
+                          size='small'
+                          onClick={() => enrollToEvent({
+                            variables: {
+                              eventId: id,
+                              keyId,
+                              participantId,
+                              botId,
+                            },
+                          })}
+                        >
+                          Enroll
+                        </Button>
+                      </React.Fragment>
+                    )}
+                  </Mutation>
+                  : ''
+                }
+                <Button
+                  className={classes.buttonList}
+                  variant='outlined'
+                  color='primary'
+                  size='small'
+                  component={Link}
+                  to={`/events/show/${id}`}
+                >
+                  Show
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(styles)(Event);

src/Components/Search/Tabs/Future.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+import Event from '../Event';
+
+class Future extends React.Component {
+  render() {
+    const { classes } = this.props;
+    const { Events, AKey } = this.props;
+
+    const events = Events.map((event, index) => (
+      <Event key={index} event={event} availableKey={AKey} enrollable={true} />
+    ));
+    return (
+      <div className='container'>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        Future events
+        </Typography>
+        {events}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(Future);

src/Components/Search/Tabs/History.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+class History extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className='container'>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          Your old events (comming soon)
+        </Typography>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(History);

src/Components/Search/Tabs/Ongoing.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+import Event from '../Event';
+
+class Ongoing extends React.Component {
+  render() {
+    const { Events, classes } = this.props;
+
+    const events = Events.map((event, index) => (
+      <Event key={index} event={event} />
+    ));
+    return (
+      <div className='container'>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          Ongoing events:
+        </Typography>
+        {events}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(Ongoing);

src/Components/Search/Tabs/Past.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+import Event from '../Event';
+
+class Past extends React.Component {
+  render() {
+    const { classes } = this.props;
+    const { PastEvents } = this.props;
+
+    const pastEvents = PastEvents.map((event, index) => (
+      <Event key={index} event={event} />
+    ));
+    return (
+      <div className='container'>
+        <Typography
+          className={classes.title}
+          variant='display1'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          A list of passed events
+        </Typography>
+        {pastEvents}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(Past);

src/Components/Search/Tabs/index.js

@@ -0,0 +1,11 @@
+import Future from './Future';
+import History from './History';
+import Ongoing from './Ongoing';
+import Past from './Past';
+
+export {
+  Future,
+  History,
+  Ongoing,
+  Past,
+};

src/Components/Search/index.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import { DateTime } from 'luxon';
+
+import {
+  Typography,
+  AppBar,
+  Tabs,
+  Tab,
+} from '@material-ui/core';
+import {
+  GetApp as OngoingIcon,
+  AlarmAdd as FutureIcon,
+  History as HistoryIcon,
+} from '@material-ui/icons';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+
+import BannerTopBar from '../BannerTopBar';
+
+import { hostedEventsCalls } from '../../GraphQL/Calls/index';
+
+import {
+  Future,
+  History,
+  Ongoing,
+  Past,
+} from './Tabs';
+
+function TabContainer(props) {
+  return (
+    <Typography component='div' style={{ padding: 8 * 3 }}>
+      {props.children}
+    </Typography>
+  );
+}
+
+class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0,
+    };
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+    const time = { now: Math.floor(DateTime.local().valueOf() / 1000) };
+    return (
+      <React.Fragment>
+        <BannerTopBar
+          size='medium'
+          title='Events'
+          text='All the events are going to be listed here'
+          backgroundUrl='https://superalgos.org/img/photos/events.jpg'
+        />
+        <div className={classes.root}>
+          <AppBar position='static' color='default'>
+            <Tabs
+              value={value}
+              onChange={this.handleChange}
+              scrollable
+              scrollButtons='off'
+              indicatorColor='primary'
+              textColor='primary'
+            >
+              <Tab
+                className={classes.tabTitle}
+                label='Ongoing'
+                icon={<OngoingIcon />}
+              />
+              <Tab
+                className={classes.tabTitle}
+                label='Future'
+                icon={<FutureIcon />}
+              />
+              <Tab
+                className={classes.tabTitle}
+                label='Your history'
+                icon={<HistoryIcon />}
+              />
+              <Tab
+                className={classes.tabTitle}
+                label='Past'
+                icon={<HistoryIcon />}
+              />
+            </Tabs>
+          </AppBar>
+          <Query
+            query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+            variables={{ maxStartDate: time.now, minEndDate: time.now }}
+          >
+            {({ loading, error, data }) => {
+              if (loading) return 'Loading...';
+              if (error) return `Error! ${error.message}`;
+              return (
+                <React.Fragment>
+                  {value === 0 && <TabContainer><Ongoing Events={data.events_Events} /></TabContainer>}
+                </React.Fragment>
+              );
+            }}
+          </Query>
+          <Query
+            query={hostedEventsCalls.EVENTS_EVENT_AND_AKEY}
+            variables={{ minStartDate: time.now }}
+          >
+            {({ loading, error, data }) => {
+              if (loading) return 'Loading...';
+              if (error) return `Error! ${error.message}`;
+              return (
+                <React.Fragment>
+                  {value === 1 && <TabContainer><Future Events={data.events_Events} AKey={data.keyVault_AvailableKeys} /></TabContainer>}
+                </React.Fragment>
+              );
+            }}
+          </Query>
+          <Query
+            query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+            variables={{ maxEndDate: time.now }}
+          >
+            {({ loading, error, data }) => {
+              if (loading) return 'Loading...';
+              if (error) return `Error! ${error.message}`;
+              return (
+                <React.Fragment>
+                  {value === 2 && <TabContainer><History Events={data.events_Events} /></TabContainer>}
+                </React.Fragment>
+              );
+            }}
+          </Query>
+          <Query
+            query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+            variables={{ maxEndDate: time.now }}
+          >
+            {({ loading, error, data }) => {
+              if (loading) return 'Loading...';
+              if (error) return `Error! ${error.message}`;
+              return (
+                <React.Fragment>
+                  {value === 3 && <TabContainer><Past PastEvents={data.events_Events} /></TabContainer>}
+                </React.Fragment>
+              );
+            }}
+          </Query>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Search);

src/Components/Search/styles.js

@@ -0,0 +1,31 @@
+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,
+  },
+  buttonList: {
+    margin: theme.spacing.unit,
+    float: 'right',
+  },
+  buttonGrid: {
+    marginTop: -20,
+  },
+  title: {
+    marginTop: 20,
+  },
+});
+
+export default styles;

src/GraphQL/Calls/getOptions.js

@@ -0,0 +1,45 @@
+import gql from 'graphql-tag';
+import { formulaInfo, plotterInfo } from '../Fragments';
+
+const EVENTS_FORMULAS = gql`
+  query Events_Formulas{
+    events_Formulas {
+      ...FormulaInfo
+    }
+  }
+  ${formulaInfo}
+`;
+
+const EVENTS_PLOTTERS = gql`
+  query Events_Plotters{
+    events_Plotters {
+      ...PlotterInfo
+    }
+  }
+  ${plotterInfo}
+`;
+
+const EVENTS_CREATEFORMULA = gql`
+  mutation Events_CreateFormula($formula: events_FormulaInput!) {
+    events_CreateFormula(formula: $formula) {
+      ...FormulaInfo
+    }
+  }
+  ${formulaInfo}
+`;
+
+const EVENTS_CREATEPLOTTER = gql`
+  mutation Events_CreatePlotter($plotter: events_PlotterInput!) {
+    events_CreatePlotter(plotter: $plotter) {
+      ...PlotterInfo
+    }
+  }
+  ${plotterInfo}
+`;
+
+export default {
+  EVENTS_PLOTTERS,
+  EVENTS_FORMULAS,
+  EVENTS_CREATEFORMULA,
+  EVENTS_CREATEPLOTTER,
+};

src/GraphQL/Calls/hostedEvents.js

@@ -0,0 +1,100 @@
+import gql from 'graphql-tag';
+import { eventFullInfo } from '../Fragments';
+
+const EVENTS_CREATEEVENT = gql`
+  mutation Events_CreateEvent($event: events_EventInput!) {
+    events_CreateEvent(event: $event) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+const EVENTS_EDITEVENT = gql`
+  mutation Events_EditEvent($eventId:  ID!, $event: events_EventInput!) {
+    events_EditEvent(eventId: $eventId, event: $event) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+const EVENTS_EVENTSBYHOST = gql`
+  query Events_Events(
+    $hostId: String,
+    $state: events_EventStateEnum,
+    $minStartDate: Int,
+    $maxStartDate: Int,
+    $minEndDate: Int,
+    $maxEndDate: Int
+  ){
+    events_Events(
+      hostId: $hostId,
+      state: $state,
+      minStartDate: $minStartDate,
+      maxStartDate: $maxStartDate,
+      minEndDate: $minEndDate,
+      maxEndDate: $maxEndDate
+    ) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+const EVENTS_EVENT_AND_AKEY = gql`
+  query Events_Events(
+    $hostId: String,
+    $state: events_EventStateEnum,
+    $minStartDate: Int,
+    $maxStartDate: Int,
+    $minEndDate: Int,
+    $maxEndDate: Int
+  ){
+    events_Events(
+      hostId: $hostId,
+      state: $state,
+      minStartDate: $minStartDate,
+      maxStartDate: $maxStartDate,
+      minEndDate: $minEndDate,
+      maxEndDate: $maxEndDate
+    ) {
+      ...EventFullInfo
+    }
+    keyVault_AvailableKeys{
+      id
+      key
+    }
+  }
+  ${eventFullInfo}
+`;
+
+const EVENTS_PUBLISHEVENT = gql`
+  mutation Events_ChangeEventState($eventId:  ID!, $state: events_EventStateEnum) {
+    events_ChangeEventState(eventId: $eventId, state: $state) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+const REGISTER_EVENT = gql`
+  mutation Events_RegisterToEvent($eventId: ID!, $keyId: String!, $participantId: String!, $botId: String!) {
+    events_RegisterToEvent(
+      eventId: $eventId
+      participant: { keyId: $keyId, participantId: $participantId, botId: $botId }
+    ) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+export default {
+  EVENTS_CREATEEVENT,
+  EVENTS_EDITEVENT,
+  EVENTS_EVENTSBYHOST,
+  EVENTS_EVENT_AND_AKEY,
+  EVENTS_PUBLISHEVENT,
+  REGISTER_EVENT,
+};

src/GraphQL/Calls/index.js

@@ -0,0 +1,11 @@
+import hostedEventsCalls from './hostedEvents';
+import listEventsCalls from './listEvents';
+import showEventCalls from './showEvent';
+import getOptionsCalls from './getOptions';
+
+export {
+  hostedEventsCalls,
+  listEventsCalls,
+  showEventCalls,
+  getOptionsCalls,
+};

src/GraphQL/Calls/listEvents.js

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag';
+import { eventFullInfo } from '../Fragments';
+
+const EVENTS_EVENTS = gql`
+  query Events_Events($minStartDate: Int, $maxStartDate: Int, $minEndDate: Int, $maxEndDate: Int){
+    events_Events(minStartDate: $minStartDate, maxStartDate: $maxStartDate, minEndDate: $minEndDate, maxEndDate: $maxEndDate) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+export default {
+  EVENTS_EVENTS,
+};

src/GraphQL/Calls/showEvent.js

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag';
+import { eventFullInfo } from '../Fragments';
+
+const EVENTS_EVENT = gql`
+  query Events_Event($eventId: ID!) {
+    events_Event(eventId: $eventId) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+export default {
+  EVENTS_EVENT,
+};

src/GraphQL/Fragments/event.js

@@ -0,0 +1,138 @@
+import gql from 'graphql-tag';
+
+export const eventMinimalInfo = gql`
+  fragment EventMinimalInfo on events_Event {
+    id
+    state
+    title
+    startDatetime
+    endDatetime
+    host {
+      alias
+      firstName
+      lastName
+    }
+    description
+    formula{
+      name
+    }
+    plotter{
+      name
+    }
+  }
+`;
+
+export const eventFullInfo = gql`
+  fragment EventFullInfo on events_Event {
+    id
+    title
+    subtitle
+    hostId
+    host {
+      id
+      email
+      firstName
+      middleName
+      lastName
+    }
+    description
+    startDatetime
+    endDatetime
+    state
+    rules {
+      title
+      description
+    }
+    prizes {
+      condition {
+        from
+        to
+        additional
+      }
+      pool {
+        amount
+        asset
+      }
+    }
+    participants {
+      participantId
+      participant {
+        id
+        name
+      }
+      state
+      operationId
+      clone{
+        botId
+      }
+    }
+    participatingAs{
+      id
+      name
+    }
+    canParticipateAs{
+      id
+      name
+      fb{
+        id
+        name
+      }
+    }
+    invitations {
+      inviteeId
+      invitee {
+        id
+        name
+      }
+      acceptedDate
+      refusedDate
+      by {
+        date
+        inviterId
+        inviter {
+          id
+          email
+          firstName
+          middleName
+          lastName
+        }
+      }
+    }
+    presentation {
+      banner
+      profile
+      page
+    }
+    formula {
+      id
+      ownerId
+
+      owner {
+        id
+        email
+        firstName
+        middleName
+        lastName
+      }
+      isTemplate
+      name
+    }
+
+    plotter {
+      id
+      ownerId
+      owner {
+        id
+        email
+        firstName
+        middleName
+        lastName
+      }
+      isTemplate
+      name
+      host
+      repo
+      moduleName
+    }
+  }
+`;

src/GraphQL/Fragments/index.js

@@ -0,0 +1,15 @@
+import {
+  eventMinimalInfo,
+  eventFullInfo,
+} from './event';
+import {
+  formulaInfo,
+  plotterInfo,
+} from './options';
+
+export {
+  eventMinimalInfo,
+  eventFullInfo,
+  formulaInfo,
+  plotterInfo,
+};

src/GraphQL/Fragments/options.js

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag';
+
+export const plotterInfo = gql`
+  fragment PlotterInfo on events_Plotter {
+    id
+    ownerId
+    isTemplate
+    name
+    host
+    repo
+    moduleName
+  }
+`;
+
+export const formulaInfo = gql`
+  fragment FormulaInfo on events_Formula {
+    id
+    ownerId
+    isTemplate
+    name
+  }
+`;

src/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { MuiPickersUtilsProvider } from 'material-ui-pickers';
+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';
+
+const App = () => (
+  <MuiPickersUtilsProvider utils={LuxonUtils}>
+    <div className='eventsModule'>
+      <Switch>
+        <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={ShowEvent} />
+        <Route path='/events/host' component={HostedEvents} />
+      </Switch>
+    </div>
+  </MuiPickersUtilsProvider>
+);
+
+export default App;

src/styles.scss

@@ -0,0 +1,22 @@
+.eventsModule{
+  .sortableListItem{
+    padding-top: 15px;
+    margin-right: 15px;
+    padding-bottom: 15px;
+    margin-left: 15px;
+    border-bottom: 1px solid rgba(142, 144, 146, 0.3);
+  }
+}
+
+.dragHandle{
+  position: relative;
+  top: 1px;
+  display: block;
+  width: 18px;
+  height: 11px;
+  opacity: .25;
+  margin-right: 20px;
+  cursor: row-resize;
+  background: -webkit-linear-gradient(top,#000,#000 20%,#fff 0,#fff 40%,#000 0,#000 60%,#fff 0,#fff 80%,#000 0,#000);
+  background: linear-gradient(180deg,#000,#000 20%,#fff 0,#fff 40%,#000 0,#000 60%,#fff 0,#fff 80%,#000 0,#000);
+}

src/utils/index.js

@@ -0,0 +1,12 @@
+export const toLocalTime = (epoch) => {
+  const localDate = new Date(0);
+  localDate.setUTCSeconds(epoch);
+  const options = { year: 'numeric', month: 'long', day: '2-digit' };
+  return (
+    `${localDate.toLocaleDateString(options)
+    } at ${
+      localDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}`
+  );
+};
+
+export const temporaryFunction = input => input;

src/utils/local-storage.js

@@ -0,0 +1,9 @@
+const getItem = async name => window.localStorage.getItem(name);
+const setItem = async (name, value) => window.localStorage.setItem(name, value);
+const removeItem = async name => window.localStorage.removeItem(name);
+
+export {
+  getItem,
+  setItem,
+  removeItem,
+};