Exporting the create action out of the modaal into a dedicated button

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

@@ -8,9 +8,12 @@ import {
 } from '@material-ui/core';
 import { ChevronLeft, ChevronRight } from '@material-ui/icons';
 import { DateTimePicker } from 'material-ui-pickers';
-import { hostedEventsCalls } from '../../GraphQL/Calls/index';
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
 
-class New extends React.Component {
+import { hostedEventsCalls } from '../../../GraphQL/Calls';
+
+class Create extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -28,14 +31,7 @@ class New extends React.Component {
     return (
       <Mutation mutation={hostedEventsCalls.EVENTS_CREATEEVENT}
         update={(store, { data }) => {
-          const { events_EventsByHost: hostedEvents } = store.readQuery({
-            query: hostedEventsCalls.EVENTS_EVENTSBYHOST,
-          });
-          store.writeQuery({
-            query: hostedEventsCalls.EVENTS_EVENTSBYHOST,
-            data: { events_EventsByHost: hostedEvents.concat([data.events_CreateEvent]) },
-          });
-          this.props.handleNewEvent(data.events_CreateEvent);
+          this.props.history.push(`/edit/${data.events_CreateEvent.id}`);
         }
         }
       >
@@ -103,4 +99,4 @@ class New extends React.Component {
   }
 }
 
-export default New;
+export default withStyles(styles)(Create);

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

@@ -0,0 +1,4 @@
+const styles = () => ({
+});
+
+export default styles;

client/src/Components/HostedEvents/index.js

@@ -1,80 +1,30 @@
 import React from 'react';
 import { Query } from 'react-apollo';
 
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@material-ui/core';
-
-import { withStyles } from '@material-ui/core/styles';
-import styles from './styles';
-
 import { hostedEventsCalls } from '../../GraphQL/Calls/index';
 
-import New from './New';
 import Event from './Event';
 
-class HostedEvent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isNewEventOpen: false,
-    };
-  }
+const HostedEvent = () => (
+  <React.Fragment>
+    <Query
+      query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
+    >
+      {({ loading, error, data }) => {
+        if (loading) return 'Loading...';
+        if (error) return `Error! ${error.message}`;
+        const list = data.events_EventsByHost.map((event, index) => (
+            <Event key={index} event={event} />
+        ));
+        return (
+          <React.Fragment>
+            { list }
+          </React.Fragment>
+        );
+      }}
+    </Query>
+  </React.Fragment>
+);
 
-  handleNewEvent = (event) => {
-    this.props.history.push(`/edit/${event.id}`);
-  };
 
-  render() {
-    const { classes } = this.props;
-    return (
-      <React.Fragment>
-        <Button variant='contained' color='secondary'
-          aria-label='addNewEvent' className={classes.addButton}
-          onClick={() => { this.setState({ isNewEventOpen: true }); }} >
-              Host a new event
-        </Button>
-
-        <Query
-          query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
-        >
-          {({ loading, error, data }) => {
-            if (loading) return 'Loading...';
-            if (error) return `Error! ${error.message}`;
-            const list = data.events_EventsByHost.map((event, index) => (
-                <Event key={index} event={event} />
-            ));
-            return (
-              <React.Fragment>
-                { list }
-              </React.Fragment>
-            );
-          }}
-        </Query>
-
-        <Dialog
-          open={this.state.isNewEventOpen}
-          onClose={() => { this.setState({ isNewEventOpen: false }); }}
-          aria-labelledby='addEvent-dialog-title'
-        >
-          <DialogTitle id='addEvent-dialog-title'>
-                Host an event
-          </DialogTitle>
-          <DialogContent>
-            <DialogContentText>
-              Here you will add just the minimal information,
-              will be settable in the edit page of your event.
-            </DialogContentText>
-            <New handleNewEvent={this.handleNewEvent} classes={classes} />
-          </DialogContent>
-        </Dialog>
-      </React.Fragment>
-    );
-  }
-}
-
-export default withStyles(styles)(HostedEvent);
+export default HostedEvent;

client/src/Components/HostedEvents/styles.js

@@ -14,13 +14,6 @@ const styles = theme => ({
   buttonGrid: {
     marginTop: -20,
   },
-  addButton: {
-    display: 'block',
-    padding: 20,
-    marginTop: 20,
-    marginRight: 20,
-    marginLeft: 'auto',
-  },
 });
 
 export default styles;

client/src/Components/TopBar/data.js

@@ -1,16 +1,22 @@
-import GamesIcon from '@material-ui/icons/Games';
-import SearchIcon from '@material-ui/icons/Search';
-import LibraryAddIcon from '@material-ui/icons/LibraryAdd';
+import {
+  Search,
+  GamepadRounded,
+  AccessibilityNew,
+  LibraryAdd,
+} from '@material-ui/icons';
 
 const data = [
   {
-    title: 'Look for an event', to: '/', icon: SearchIcon, text: '',
+    title: 'Look for an event', to: '/', icon: Search, text: '',
   },
   {
-    title: 'Events you are enrolled in', to: '/my', icon: GamesIcon, text: '',
+    title: 'Events you are enrolled in', to: '/my', icon: GamepadRounded, text: '',
   },
   {
-    title: 'Host your own competition', to: '/host', icon: LibraryAddIcon, text: '',
+    title: 'Your hosted competition', to: '/host', icon: AccessibilityNew, text: '',
+  },
+  {
+    title: 'Host a new competition', to: '/create', icon: LibraryAdd, text: '',
   },
 ];
 

client/src/index.js

@@ -11,6 +11,7 @@ import Search from './Components/Search';
 import Events from './Components/Events';
 import HostedEvents from './Components/HostedEvents';
 import EditEvent from './Components/Event/Edit';
+import CreateEvent from './Components/Event/Create';
 
 class App extends Component {
   constructor(props) {
@@ -44,6 +45,7 @@ class App extends Component {
             <Switch>
               <Route exact path='/' component={Search} />
               <Route path='/my' component={Events} />
+              <Route path='/create' component={CreateEvent} />
               <Route path='/edit/:slug' component={EditEvent} />
               <Route path='/show/:slug' component={EditEvent} />
               <Route path='/host' component={HostedEvents} />