a minimal event creation system and list

client/src/Components/HostedEvent/graphql.js

@@ -0,0 +1,20 @@
+import gql from 'graphql-tag'
+
+const fragments = `
+  name
+`
+
+export const HOSTS_HOSTEVENT = gql`
+  mutation Hosts_HostEvent($name: String!, $description: String!, $startDatetime: Int!, $finishDatetime: Int!) {
+    hosts_HostEvent(name: $name, description: $description, startDatetime: $startDatetime, finishDatetime: $finishDatetime) {
+      ${fragments}
+    }
+  }
+`
+export const HOSTS_EVENTSBYHOST = gql`
+  query Hosts_EventsByHost{
+    hosts_EventsByHost {
+      ${fragments}
+    }
+  }
+`

client/src/Components/HostedEvent/index.js

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import { HOSTS_EVENTSBYHOST } from './graphql'
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+} from '@material-ui/core'
+
+import { withStyles } from '@material-ui/core/styles'
+import styles from './styles'
+
+import New from './new'
+
+class HostedEvent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isNewEventOpen: false
+    }
+  }
+
+  handleNewEventOpen = () => {
+    this.setState({ isNewEventOpen: true })
+  };
+
+  handleNewEventClose = () => {
+    this.setState({ isNewEventOpen: false })
+  };
+
+  render () {
+    const { classes } = this.props
+    return (
+      <React.Fragment>
+        <Query
+          query={HOSTS_EVENTSBYHOST}
+        >
+          {({ loading, error, data }) => {
+            if (loading) return 'Loading...'
+            if (error) return `Error! ${error.message}`
+            const list = data.hosts_EventsByHost.map((event, index) => {
+              return (
+                <div key={index}>
+                  {event.name}
+                </div>
+              )
+            })
+            return (
+              <React.Fragment>
+                { list }
+              </React.Fragment>
+            )
+          }}
+        </Query>
+
+        <React.Fragment>
+          <Button variant='contained' color='secondary'
+            aria-label='addNewEvent' className={classes.centered}
+            onClick={this.handleNewEventOpen} >
+                Host another event
+          </Button>
+          <Dialog
+            open={this.state.isNewEventOpen}
+            onClose={this.handleNewEventClose}
+            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 handleNewEventClose={this.handleNewEventClose} classes={classes} />
+            </DialogContent>
+          </Dialog>
+        </React.Fragment>
+      </React.Fragment>
+    )
+  }
+}
+
+export default withStyles(styles)(HostedEvent)

client/src/Components/HostedEvent/new.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import { Mutation } from 'react-apollo'
+import { HOSTS_HOSTEVENT, HOSTS_EVENTSBYHOST } from './graphql'
+
+/*
+import classNames from 'classnames'
+import {
+  Button,
+  TextField
+} from '@material-ui/core'
+*/
+
+class New extends React.Component {
+  render () {
+    let name
+    let description
+    let startDatetime
+    let finishDatetime
+    // const { classes } = this.props
+    return (
+      <Mutation mutation={HOSTS_HOSTEVENT}
+        update={(store, { data }) => {
+          const { hosts_EventsByHost: hostedEvents } = store.readQuery({ query: HOSTS_EVENTSBYHOST })
+          store.writeQuery({
+            query: HOSTS_EVENTSBYHOST,
+            data: { hosts_EventsByHost: hostedEvents.concat([data.hosts_HostEvent]) }
+          })
+        }
+        }
+      >
+        {(hostEvent, { data }) => (
+          <div className='container'>
+            <form
+              onSubmit={e => {
+                e.preventDefault()
+                hostEvent({ variables: {
+                  name: name.value,
+                  description: description.value,
+                  startDatetime: parseInt(startDatetime.value, 10),
+                  finishDatetime: parseInt(finishDatetime.value, 10)
+                } })
+                this.props.handleNewEventClose()
+              }}
+            >
+              <input
+                ref={node => {
+                  name = node
+                }}
+              />
+              <input
+                ref={node => {
+                  description = node
+                }}
+              />
+              <input
+                type='number'
+                ref={node => {
+                  startDatetime = node
+                }}
+              />
+              <input
+                type='number'
+                ref={node => {
+                  finishDatetime = node
+                }}
+              />
+              <button type='submit'>Create New Project</button>
+            </form>
+            <div className='form-close' onClick={() => this.clearTempStates()} />
+          </div>
+        )}
+      </Mutation>
+    )
+  }
+}
+
+export default New

client/src/Components/HostedEvent/styles.js

@@ -0,0 +1,10 @@
+
+const styles = theme => ({
+  centered: {
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto'
+  }
+})
+
+export default styles

client/src/Components/TopBar/data.js

@@ -3,9 +3,9 @@ import SearchIcon from '@material-ui/icons/Search'
 import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 
 const data = [
-  { title: 'Look for competitions', to: '/', icon: SearchIcon, text: '' },
-  { title: 'Competitions you applied for', to: '/competitions', icon: GamesIcon, text: '' },
-  { title: 'Host your own competition', to: '/host-your-own', icon: LibraryAddIcon, text: '' }
+  { title: 'Look for an event', to: '/', icon: SearchIcon, text: '' },
+  { title: 'Events you are enrolled in', to: '/events', icon: GamesIcon, text: '' },
+  { title: 'Host your own competition', to: '/hosted-events', icon: LibraryAddIcon, text: '' }
 ]
 
 export default data

client/src/index.js

@@ -1,26 +1,11 @@
 import React, { Component } from 'react'
 import { Route, BrowserRouter, Switch } from 'react-router-dom'
 
-import { MessageCard } from '@advancedalgos/web-components'
 import { getItem } from './utils/local-storage'
 
 import TopBar from './Components/TopBar'
 import Search from './Components/Search'
-
-const Base = () => (
-  <div>
-    <p>Base component</p>
-    <MessageCard message='That can also wrap other components' >
-      <div className='loader'>Loading...</div>
-    </MessageCard>
-  </div>
-)
-
-const Added = () => (
-  <p>
-    Added component
-  </p>
-)
+import HostedEvent from './Components/HostedEvent'
 
 class App extends Component {
   constructor (props) {
@@ -35,7 +20,7 @@ class App extends Component {
 
     if (user !== null && user !== undefined && user !== 'undefined') {
       user = JSON.parse(user)
-      this.setState({ user: user })
+      this.setState({ user })
     }
   }
 
@@ -52,7 +37,7 @@ class App extends Component {
           {loggedIn}
           <Switch>
             <Route exact path='/' component={Search} />
-            <Route path='/added' component={Added} />
+            <Route path='/hosted-events' component={HostedEvent} />
           </Switch>
         </div>
       </BrowserRouter>