fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filtering and arranging evens into tabs

Browse Source
This commit is contained in:
Nikola Bjelo committed 2018-10-30 16:01:48 +01:00
1 parent aa820be4f6
commit 2a90b9aa8c
5 files changed
+97 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Components/Search/Tabs/Future.js
+21 -9
View File
@@ -4,19 +4,31 @@ import { Typography } from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'
import styles from '../styles'
import Event from '../Event'
class Future extends React.Component {
render () {
const classes = this.props.classes
const { FutureEvents } = this.props
const futureEvents = FutureEvents.map((event, index) => {
return (
<Event key={index} event={event} />
)
})
return (
<Typography
className={classes.title}
variant='display1'
align='center'
color='textPrimary'
gutterBottom
>
Future competitions
</Typography>
<React.Fragment>
<Typography
className={classes.title}
variant='h4'
align='center'
color='textPrimary'
gutterBottom
>
Future events
</Typography>
{futureEvents}
</React.Fragment>
)
}
}
client/src/Components/Search/Tabs/History.js
+2 -2
View File
@@ -10,12 +10,12 @@ class History extends React.Component {
return (
<Typography
className={classes.title}
variant='display1'
variant='h4'
align='center'
color='textPrimary'
gutterBottom
>
Your old competitions (maybe here, maybe not, who knows)
Your old events (maybe here, maybe not, who knows)
</Typography>
)
}
client/src/Components/Search/Tabs/Incoming.js
+41 -9
View File
@@ -4,19 +4,51 @@ import { Typography } from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'
import styles from '../styles'
import Event from '../Event'
class Incoming extends React.Component {
render () {
const classes = this.props.classes
const { IncomingEvents, OngoingEvents } = this.props
const incomingEvents = IncomingEvents.map((event, index) => {
return (
<Event key={index} event={event} />
)
})
const ongoingEvents = OngoingEvents.map((event, index) => {
return (
<Event key={index} event={event} />
)
})
return (
<Typography
className={classes.title}
variant='display1'
align='center'
color='textPrimary'
gutterBottom
>
Ongoing and incoming competitions
</Typography>
<React.Fragment>
<Typography
className={classes.title}
variant='h4'
align='center'
color='textPrimary'
gutterBottom
>
Ongoing and incoming competitions
</Typography>
<Typography
variant='h5'
color='textPrimary'
gutterBottom
>
Ongoing events:
</Typography>
{ongoingEvents}
<Typography
variant='h5'
color='textPrimary'
gutterBottom
>
Incoming events:
</Typography>
{incomingEvents}
</React.Fragment>
)
}
}
client/src/Components/Search/Tabs/Past.js
+21 -9
View File
@@ -4,19 +4,31 @@ import { Typography } from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'
import styles from '../styles'
import Event from '../Event'
class Past extends React.Component {
render () {
const classes = this.props.classes
const { PastEvents } = this.props
const pastEvents = PastEvents.map((event, index) => {
return (
<Event key={index} event={event} />
)
})
return (
<Typography
className={classes.title}
variant='display1'
align='center'
color='textPrimary'
gutterBottom
>
This will come later
</Typography>
<React.Fragment>
<Typography
className={classes.title}
variant='display1'
align='center'
color='textPrimary'
gutterBottom
>
A list of passed events
</Typography>
{pastEvents}
</React.Fragment>
)
}
}
client/src/Components/Search/index.js
+12 -10
View File
@@ -1,5 +1,6 @@
import React from 'react'
import { Query } from 'react-apollo'
import { DateTime } from 'luxon'
import {
Typography,
@@ -24,7 +25,6 @@ import {
Incoming,
Past
} from './Tabs'
import Event from './Event'
function TabContainer (props) {
return (
@@ -56,11 +56,14 @@ class Search extends React.Component {
{({ loading, error, data }) => {
if (loading) return 'Loading...'
if (error) return `Error! ${error.message}`
const list = data.hosts_Events.map((event, index) => {
return (
<Event key={index} event={event} />
)
})
const now = ~~(DateTime.local().valueOf() / 1000)
const inTwoWeeks = ~~(DateTime.local().plus({ weeks: 2 }).valueOf() / 1000)
const IncomingEvents = data.hosts_Events.filter(event => event.startDatetime > now && event.startDatetime < inTwoWeeks)
const OngoingEvents = data.hosts_Events.filter(event => event.finishDatetime > now && event.startDatetime < now)
const FutureEvents = data.hosts_Events.filter(event => event.startDatetime > now)
const PastEvents = data.hosts_Events.filter(event => event.finishDatetime < now)
return (
<React.Fragment>
<div className={classes.root}>
@@ -95,12 +98,11 @@ class Search extends React.Component {
/>
</Tabs>
</AppBar>
{value === 0 && <TabContainer><Incoming /></TabContainer>}
{value === 1 && <TabContainer><Future /></TabContainer>}
{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 /></TabContainer>}
{value === 3 && <TabContainer><Past PastEvents={PastEvents} /></TabContainer>}
</div>
{ list }
</React.Fragment>
)
}}