Integration of the new topbar

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

@@ -18,6 +18,8 @@ import {
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
+import TopBar from '../../TopBar';
+
 import {
   Basic,
   PresentationPage,
@@ -69,95 +71,98 @@ class Create extends React.Component {
     } = this.state;
     const { classes } = this.props;
     return (
-      <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>
-            <Paper className={classes.paperRoot}>
-              <Typography className={classes.typography} variant='headline' gutterBottom>
-                Create a new event
-              </Typography>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  hostEvent({
-                    variables: {
-                      event: {
+      <React.Fragment>
+        <TopBar />
+        <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>
+              <Paper className={classes.paperRoot}>
+                <Typography className={classes.typography} variant='headline' gutterBottom>
+                  Create a new event
+                </Typography>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    hostEvent({
+                      variables: {
+                        event: {
+                          name,
+                          description,
+                          startDatetime: startDatetime.valueOf() / 1000,
+                          finishDatetime: finishDatetime.valueOf() / 1000,
+                          formulaId,
+                          plotterId,
+                        },
+                      },
+                    });
+                  }}
+                >
+                  {value === 0 && <TabContainer>
+                    <Basic
+                      event={{
                         name,
                         description,
-                        startDatetime: startDatetime.valueOf() / 1000,
-                        finishDatetime: finishDatetime.valueOf() / 1000,
+                        startDatetime,
+                        finishDatetime,
+                      }}
+                      edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
+                    />
+                  </TabContainer>}
+                  {value === 1 && <TabContainer>
+                    <Technical
+                      event={{
                         formulaId,
                         plotterId,
-                      },
-                    },
-                  });
-                }}
-              >
-                {value === 0 && <TabContainer>
-                  <Basic
-                    event={{
-                      name,
-                      description,
-                      startDatetime,
-                      finishDatetime,
-                    }}
-                    edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
-                  />
-                </TabContainer>}
-                {value === 1 && <TabContainer>
-                  <Technical
-                    event={{
-                      formulaId,
-                      plotterId,
-                    }}
-                    edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
-                  />
-                </TabContainer>}
-                {value === 2 && <TabContainer><TeamsServer /></TabContainer>}
-                {value === 3 && <TabContainer><PresentationPage /></TabContainer>}
-              </form>
-            </Paper>
-          </div>
-        )}
-      </Mutation>
+                      }}
+                      edit={(newType, newVal) => this.handleEventChange(newType, newVal)}
+                    />
+                  </TabContainer>}
+                  {value === 2 && <TabContainer><TeamsServer /></TabContainer>}
+                  {value === 3 && <TabContainer><PresentationPage /></TabContainer>}
+                </form>
+              </Paper>
+            </div>
+          )}
+        </Mutation>
+      </React.Fragment>
     );
   }
 }

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

@@ -6,12 +6,15 @@ import { withStyles } from '@material-ui/core/styles';
 
 import styles from './styles';
 
+import TopBar from '../../TopBar';
+
 import { showEventCalls } from '../../../GraphQL/Calls/index';
 
 class Edit extends React.Component {
   render() {
     return (
       <React.Fragment>
+        <TopBar />
         <Typography
           variant='display1'
           align='center'

client/src/Components/Events/index.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import TopBar from '../TopBar';
 
-const Index = () => <p>Here will come a list the competitions you applied for</p>;
+const Index = () => (
+  <TopBar size='big' title='Your events' text='Here will be the list of YOUR events' />
+);
 
 export default Index;

client/src/Components/HostedEvents/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { Query } from 'react-apollo';
 
+import TopBar from '../TopBar';
+
 import { hostedEventsCalls } from '../../GraphQL/Calls/index';
 
 import Event from './Event';
 
 const HostedEvent = () => (
   <React.Fragment>
+    <TopBar size='medium' title='Your hosted events' text='You are one of the pillars of this community, thank you' />
     <Query
       query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
     >

client/src/Components/Search/index.js

@@ -17,6 +17,8 @@ import {
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
+import TopBar from '../TopBar';
+
 import { listEventsCalls } from '../../GraphQL/Calls/index';
 
 import {
@@ -50,67 +52,70 @@ class Search extends React.Component {
     const { classes } = this.props;
     const { value } = this.state;
     return (
-      <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 inTwoWeeks = Math.floor(DateTime.local().plus({ weeks: 2 }).valueOf() / 1000);
+      <React.Fragment>
+        <TopBar size='medium' title='Events' text='All the events are going to be listed here' />
+        <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 inTwoWeeks = Math.floor(DateTime.local().plus({ weeks: 2 }).valueOf() / 1000);
 
-          const IncomingEvents = data.events_Events.filter(event => event.startDatetime > now
-            && event.startDatetime < inTwoWeeks);
-          const OngoingEvents = data.events_Events.filter(event => event.finishDatetime > now
-            && event.startDatetime < now);
-          const FutureEvents = data.events_Events.filter(event => event.startDatetime > now);
-          const PastEvents = data.events_Events.filter(event => event.finishDatetime < now);
+            const IncomingEvents = data.events_Events.filter(event => event.startDatetime > now
+              && event.startDatetime < inTwoWeeks);
+            const OngoingEvents = data.events_Events.filter(event => event.finishDatetime > now
+              && event.startDatetime < now);
+            const FutureEvents = data.events_Events.filter(event => event.startDatetime > now);
+            const PastEvents = data.events_Events.filter(event => event.finishDatetime < 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 &amp; Incoming'
-                      icon={<IncomingIcon />}
-                    />
-                    <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>
-                  <Incoming IncomingEvents={IncomingEvents} 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>
+            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 &amp; Incoming'
+                        icon={<IncomingIcon />}
+                      />
+                      <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>
+                    <Incoming IncomingEvents={IncomingEvents} 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>
+      </React.Fragment>
     );
   }
 }