Sorting events

src/Components/Search/Event.js

@@ -23,6 +23,7 @@ class Event extends React.Component {
       host,
       formula,
       description,
+      participatingAs,
     } = event;
     return (
       <Paper className={classes.card}>
@@ -44,6 +45,7 @@ class Event extends React.Component {
                   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}>
                 <Button

src/Components/Search/Tabs/Future.js

@@ -9,9 +9,9 @@ import Event from '../Event';
 class Future extends React.Component {
   render() {
     const { classes } = this.props;
-    const { FutureEvents } = this.props;
+    const { Events } = this.props;
 
-    const futureEvents = FutureEvents.map((event, index) => (
+    const events = Events.map((event, index) => (
       <Event key={index} event={event} />
     ));
     return (
@@ -25,7 +25,7 @@ class Future extends React.Component {
         >
         Future events
         </Typography>
-        {futureEvents}
+        {events}
       </div>
     );
   }

src/Components/Search/Tabs/History.js

@@ -16,7 +16,7 @@ class History extends React.Component {
           color='textPrimary'
           gutterBottom
         >
-          Your old events (maybe here, maybe not, who knows)
+          Your old events (comming soon)
         </Typography>
       </div>
     );

src/Components/Search/Tabs/Ongoing.js

@@ -8,9 +8,9 @@ import Event from '../Event';
 
 class Ongoing extends React.Component {
   render() {
-    const { OngoingEvents, classes } = this.props;
+    const { Events, classes } = this.props;
 
-    const ongoingEvents = OngoingEvents.map((event, index) => (
+    const events = Events.map((event, index) => (
       <Event key={index} event={event} />
     ));
     return (
@@ -24,7 +24,7 @@ class Ongoing extends React.Component {
         >
           Ongoing events:
         </Typography>
-        {ongoingEvents}
+        {events}
       </div>
     );
   }

src/Components/Search/index.js

@@ -19,7 +19,7 @@ import styles from './styles';
 
 import BannerTopBar from '../BannerTopBar';
 
-import { listEventsCalls } from '../../GraphQL/Calls/index';
+import { hostedEventsCalls } from '../../GraphQL/Calls/index';
 
 import {
   Future,
@@ -51,6 +51,7 @@ class Search extends React.Component {
   render() {
     const { classes } = this.props;
     const { value } = this.state;
+    const time = { now: Math.floor(DateTime.local().valueOf() / 1000) };
     return (
       <React.Fragment>
         <BannerTopBar
@@ -59,64 +60,95 @@ class Search extends React.Component {
           text='All the events are going to be listed here'
           backgroundUrl='https://superalgos.org/img/photos/events.jpg'
         />
-        <Query
-          query={listEventsCalls.EVENTS_EVENTS}
-        >
-          {({ loading, error, data }) => {
-            if (loading) return 'Loading...';
-            if (error) return `Error! ${error.message}`;
-            const now = Math.floor(DateTime.local().valueOf() / 1000);
-
-            const OngoingEvents = data.events_Events.filter(event => event.endDatetime > now
-              && event.startDatetime < now);
-            const FutureEvents = data.events_Events.filter(event => event.startDatetime > now);
-            const PastEvents = data.events_Events.filter(event => event.endDatetime < now);
-
-            return (
-              <React.Fragment>
-                <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>
-                  {value === 0 && <TabContainer>
-                    <Ongoing OngoingEvents={OngoingEvents} />
-                  </TabContainer>}
-                  {value === 1 && <TabContainer><Future FutureEvents={FutureEvents} /></TabContainer>}
-                  {value === 2 && <TabContainer><History /></TabContainer>}
-                  {value === 3 && <TabContainer><Past PastEvents={PastEvents} /></TabContainer>}
-                </div>
-              </React.Fragment>
-            );
-          }}
-        </Query>
+        <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_EVENTSBYHOST}
+            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} /></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>
     );
   }

src/GraphQL/Calls/hostedEvents.js

@@ -20,8 +20,22 @@ const EVENTS_EDITEVENT = gql`
 `;
 
 const EVENTS_EVENTSBYHOST = gql`
-  query Events_Events($hostId: String!, $state: events_EventStateEnum, $maxEndDate: Int, $minEndDate: Int){
-    events_Events(hostId: $hostId, state: $state, maxEndDate: $maxEndDate, minEndDate: $minEndDate) {
+  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
     }
   }

src/GraphQL/Fragments/event.js

@@ -66,6 +66,14 @@ export const eventFullInfo = gql`
         botId
       }
     }
+    participatingAs{
+      id
+      name
+    }
+    canParticipateAs{
+      id
+      name
+    }
     invitations {
       inviteeId
       invitee {