Merge pull request #16 from nikolabjelo/master

Frontend according to the new nav bar of the master app

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@advancedalgos/events-client",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Advanced Algos Event client-side web app",
   "author": "",
   "license": "",

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>
     );
   }
 }

client/src/Components/TopBar/data.js

@@ -1,23 +0,0 @@
-import {
-  Search,
-  GamepadRounded,
-  AccessibilityNew,
-  LibraryAdd,
-} from '@material-ui/icons';
-
-const data = [
-  {
-    title: 'Look for an event', to: '/events/', icon: Search, text: '',
-  },
-  {
-    title: 'Events you are enrolled in', to: '/events/my', icon: GamepadRounded, text: '',
-  },
-  {
-    title: 'Your hosted competition', to: '/events/host', icon: AccessibilityNew, text: '',
-  },
-  {
-    title: 'Host a new competition', to: '/events/create', icon: LibraryAdd, text: '',
-  },
-];
-
-export default data;

client/src/Components/TopBar/index.js

@@ -1,43 +1,42 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
 
-import {
-  AppBar, Toolbar, Typography, Button,
-} from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
-import datas from './data';
 import styles from './styles';
 
-const TopBar = ({ classes }) => {
-  const buttons = datas.map((data, index) => {
-    const Icon = data.icon;
+class TopBar extends React.Component {
+  render() {
+    const {
+      classes,
+      size,
+      title,
+      text,
+    } = this.props;
+    if (size === 'big') {
+      return (
+        <div className={classes.rootBig}>
+          <div className={classes.captions}>
+            <Typography className={classes.title} variant='headline' align='center'>{title}</Typography>
+            <Typography className={classes.text} variant='subheading' align='center'>{text}</Typography>
+          </div>
+        </div>
+      );
+    }
+    if (size === 'medium') {
+      return (
+        <div className={classes.rootMedium}>
+          <div className={classes.captions}>
+            <Typography className={classes.title} variant='headline' align='center'>{title}</Typography>
+            <Typography className={classes.text} variant='subheading' align='center'>{text}</Typography>
+          </div>
+        </div>
+      );
+    }
     return (
-      <Button
-        key={index}
-        variant='text'
-        size='small'
-        className={classNames(classes.button, classes.cssRoot)}
-        title={data.title}
-        component={Link}
-        to={data.to}>
-        <Icon className={classNames(classes.leftIcon, classes.iconSmall)} />
-        {data.text}
-      </Button>);
-  });
-  return (
-    <div className={classes.root}>
-      <AppBar position='static' color='secondary'>
-        <Toolbar>
-          <Typography variant='h5' color='inherit' className={classes.flex}>
-            Manage competition
-          </Typography>
-          {buttons}
-        </Toolbar>
-      </AppBar>
-    </div>
-  );
-};
+      <div className={classes.rootSmall} />
+    );
+  }
+}
 
 export default withStyles(styles)(TopBar);

client/src/Components/TopBar/styles.js

@@ -1,26 +1,38 @@
-const styles = theme => ({
-  root: {
-    flexGrow: 1,
+const styles = () => ({
+  rootBig: {
+    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
+    width: '100%',
+    height: '100vh',
   },
-  flex: {
-    flexGrow: 1,
-    marginLeft: 30,
+  rootMedium: {
+    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
+    width: '100%',
+    height: '50vh',
   },
-  cssRoot: {
-    color: '#FFFFFF',
-    backgroundColor: theme.palette.secondary,
-    '&:hover': {
-      backgroundColor: theme.palette.dark,
-    },
-    whiteSpace: 'nowrap',
-    paddingRight: 2 * theme.spacing.unit,
-    paddingLeft: 2 * theme.spacing.unit,
+  rootSmall: {
+    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
+    width: '100%',
+    height: '220px',
   },
-  leftIcon: {
-    marginRight: theme.spacing.unit,
+  captions: {
+    position: 'relative',
+    top: '50%',
+    transform: 'translateY(-50%)',
   },
-  iconSmall: {
-    fontSize: 20,
+  title: {
+    fontFamily: 'Saira',
+    color: 'white',
+    fontSize: '64px',
+    lineHeight: '78px',
+    fontWeight: 100,
+  },
+  text: {
+    fontFamily: 'Saira',
+    color: 'white',
+    fontSize: '20px',
+    lineHeight: '30px',
+    fontWeight: 600,
+    padding: '20px 0 0.5em 0',
   },
 });
 

client/src/index.js

@@ -1,56 +1,26 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { MuiPickersUtilsProvider } from 'material-ui-pickers';
 import LuxonUtils from 'material-ui-pickers/utils/luxon-utils';
 
-import { getItem } from './utils/local-storage';
-
-import TopBar from './Components/TopBar';
 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) {
-    super(props);
-    this.state = {
-      user: null,
-    };
-  }
-
-  async componentDidMount() {
-    let user = await getItem('user');
-
-    if (user !== null && user !== undefined && user !== 'undefined') {
-      user = JSON.parse(user);
-      this.setState({ user });
-    }
-  }
-
-  render() {
-    let loggedIn;
-    if (this.state.user !== null) {
-      loggedIn = (<TopBar match={this.props.match} user={this.state.user} />);
-    } else {
-      loggedIn = '';
-    }
-    return (
-      <MuiPickersUtilsProvider utils={LuxonUtils}>
-        {loggedIn}
-        <Switch>
-          <Route exact path='/events/' component={Search} />
-          <Route path='/events/my' component={Events} />
-          <Route path='/events/create' component={CreateEvent} />
-          <Route path='/events/edit/:slug' component={EditEvent} />
-          <Route path='/events/show/:slug' component={EditEvent} />
-          <Route path='/events/host' component={HostedEvents} />
-        </Switch>
-      </MuiPickersUtilsProvider>
-    );
-  }
-}
+const App = () => (
+  <MuiPickersUtilsProvider utils={LuxonUtils}>
+    <Switch>
+      <Route exact path='/events/' component={Search} />
+      <Route path='/events/my' component={Events} />
+      <Route path='/events/create' component={CreateEvent} />
+      <Route path='/events/edit/:slug' component={EditEvent} />
+      <Route path='/events/show/:slug' component={EditEvent} />
+      <Route path='/events/host' component={HostedEvents} />
+    </Switch>
+  </MuiPickersUtilsProvider>
+);
 
 export default App;