diff --git a/client/package.json b/client/package.json index 2f3803efb..1e2ca46e7 100644 --- a/client/package.json +++ b/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": "", diff --git a/client/src/Components/Event/Create/index.js b/client/src/Components/Event/Create/index.js index f281854c0..06e3e74ee 100644 --- a/client/src/Components/Event/Create/index.js +++ b/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 ( - { - this.props.history.push(`/events/edit/${data.events_CreateEvent.id}`); - } - } - > - {hostEvent => ( -
- - - } - /> - } - /> - } - disabled - /> - } - disabled - /> - - - - - Create a new event - -
{ - e.preventDefault(); - hostEvent({ - variables: { - event: { + + + { + this.props.history.push(`/events/edit/${data.events_CreateEvent.id}`); + } + } + > + {hostEvent => ( +
+ + + } + /> + } + /> + } + disabled + /> + } + disabled + /> + + + + + Create a new event + + { + e.preventDefault(); + hostEvent({ + variables: { + event: { + name, + description, + startDatetime: startDatetime.valueOf() / 1000, + finishDatetime: finishDatetime.valueOf() / 1000, + formulaId, + plotterId, + }, + }, + }); + }} + > + {value === 0 && + this.handleEventChange(newType, newVal)} + /> + } + {value === 1 && + - {value === 0 && - this.handleEventChange(newType, newVal)} - /> - } - {value === 1 && - this.handleEventChange(newType, newVal)} - /> - } - {value === 2 && } - {value === 3 && } - - -
- )} - + }} + edit={(newType, newVal) => this.handleEventChange(newType, newVal)} + /> + } + {value === 2 && } + {value === 3 && } + +
+
+ )} + + ); } } diff --git a/client/src/Components/Event/Edit/index.js b/client/src/Components/Event/Edit/index.js index f63874df6..0ed096d23 100644 --- a/client/src/Components/Event/Edit/index.js +++ b/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 ( +

Here will come a list the competitions you applied for

; +const Index = () => ( + +); export default Index; diff --git a/client/src/Components/HostedEvents/index.js b/client/src/Components/HostedEvents/index.js index 32989e655..d3a67dd94 100644 --- a/client/src/Components/HostedEvents/index.js +++ b/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 = () => ( + diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index d1799aa7f..945248476 100644 --- a/client/src/Components/Search/index.js +++ b/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 ( - - {({ 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); + + + + {({ 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 ( - -
- - - } - /> - } - /> - } - /> - } - /> - - - {value === 0 && - - } - {value === 1 && } - {value === 2 && } - {value === 3 && } -
- - ); - }} - + return ( + +
+ + + } + /> + } + /> + } + /> + } + /> + + + {value === 0 && + + } + {value === 1 && } + {value === 2 && } + {value === 3 && } +
+ + ); + }} + + ); } } diff --git a/client/src/Components/TopBar/data.js b/client/src/Components/TopBar/data.js deleted file mode 100644 index 89c775f60..000000000 --- a/client/src/Components/TopBar/data.js +++ /dev/null @@ -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; diff --git a/client/src/Components/TopBar/index.js b/client/src/Components/TopBar/index.js index c3ac67581..82e6b319f 100644 --- a/client/src/Components/TopBar/index.js +++ b/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 ( +
+
+ {title} + {text} +
+
+ ); + } + if (size === 'medium') { + return ( +
+
+ {title} + {text} +
+
+ ); + } return ( - ); - }); - return ( -
- - - - Manage competition - - {buttons} - - -
- ); -}; +
+ ); + } +} export default withStyles(styles)(TopBar); diff --git a/client/src/Components/TopBar/styles.js b/client/src/Components/TopBar/styles.js index 675c55cab..ef12ddf5f 100644 --- a/client/src/Components/TopBar/styles.js +++ b/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', }, }); diff --git a/client/src/index.js b/client/src/index.js index 778b76313..cdcd36eb2 100644 --- a/client/src/index.js +++ b/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 = (); - } else { - loggedIn = ''; - } - return ( - - {loggedIn} - - - - - - - - - - ); - } -} +const App = () => ( + + + + + + + + + + +); export default App;