Setting up the "my hosted event page"

src/Components/Event/Edit/queried.js

@@ -81,8 +81,7 @@ class Queried extends React.Component {
         <Mutation mutation={hostedEventsCalls.EVENTS_EDITEVENT}
           update={(store, { data }) => {
             this.props.history.push(`/events/edit/${data.events_EditEvent.id}`);
-          }
-          }
+          }}
         >
           {editHosted => (
             <div className={classes.root}>

src/Components/HostedEvents/Event.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Mutation } from 'react-apollo';
+
 
 import {
   Grid, Paper,
@@ -9,51 +11,78 @@ import {
 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 } = this.props;
+    const { classes, showOnly } = this.props;
     const {
       id,
-      name,
+      title,
+      subtitle,
       startDatetime,
       finishDatetime,
       host,
+      formula,
       description,
     } = this.props.event;
     return (
       <Paper className={classes.card}>
         <Grid container spacing={16}>
           <Grid item xs>
-            <Typography gutterBottom variant='h5'> {name} </Typography>
+            <Typography gutterBottom variant='h5'> {title} </Typography>
+            <Typography gutterBottom variant='h6'> {subtitle} </Typography>
             <Typography gutterBottom>From : {toLocalTime(startDatetime)} </Typography>
             <Typography gutterBottom>To : {toLocalTime(finishDatetime)} </Typography>
           </Grid>
           <Grid item xs>
-            <Typography gutterBottom>
-              Hosted by: {host.alias} ({host.lastName} {host.firstName})
-            </Typography>
-            <Typography gutterBottom>Formula: </Typography>
-            <Typography gutterBottom>First prize: </Typography>
+            <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 variant='h5'> Description : </Typography>
-                <Typography gutterBottom> {description} </Typography>
+                <Typography gutterBottom>
+                  Hosted by: {host.alias} ({host.lastName} {host.firstName})
+                </Typography>
+                <Typography gutterBottom>Formula: {formula.name} </Typography>
               </Grid>
               <Grid item className={classes.buttonGrid}>
-                <Button
-                  className={classes.buttonList}
-                  variant='outlined'
-                  color='primary'
-                  size='small'
-                  component={Link}
-                  to={`/events/edit/${id}`}
-                >
-                  Edit
-                </Button>
+                { !showOnly
+                  ? <React.Fragment>
+                    <Mutation mutation={hostedEventsCalls.EVENTS_PUBLISHEVENT}
+                      update={() => {
+                        this.props.history.push(`/events/edit/${id}`);
+                      }}
+                    >
+                      {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'

src/Components/HostedEvents/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Query } from 'react-apollo';
+import { Typography } from '@material-ui/core';
+import { DateTime } from 'luxon';
 
 import BannerTopBar from '../BannerTopBar';
 
@@ -7,6 +9,7 @@ import { hostedEventsCalls } from '../../GraphQL/Calls/index';
 
 import Event from './Event';
 
+
 const HostedEvent = () => (
   <React.Fragment>
     <BannerTopBar
@@ -15,17 +18,58 @@ const HostedEvent = () => (
       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_EventsByHost.map((event, index) => (
-          <Event key={index} event={event} />
+        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>
         );

src/GraphQL/Calls/hostedEvents.js

@@ -20,8 +20,17 @@ const EVENTS_EDITEVENT = gql`
 `;
 
 const EVENTS_EVENTSBYHOST = gql`
-  query Events_EventsByHost{
-    events_EventsByHost {
+  query Events_Events($hostId: String!, $state: events_EventStateEnum){
+    events_Events(hostId: $hostId, state: $state) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`;
+
+const EVENTS_PUBLISHEVENT = gql`
+  mutation Events_ChangeEventState($eventId:  ID!, $state: events_EventStateEnum, $maxEndDate: Number, $minEndDate: Number) {
+    events_ChangeEventState(eventId: $eventId, state: $state, maxEndDate: $maxEndDate, minEndDate: $minEndDate ) {
       ...EventFullInfo
     }
   }
@@ -32,4 +41,5 @@ export default {
   EVENTS_CREATEEVENT,
   EVENTS_EDITEVENT,
   EVENTS_EVENTSBYHOST,
+  EVENTS_PUBLISHEVENT,
 };