80 lines
3.0 KiB
JavaScript
80 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { Query } from 'react-apollo';
|
|
|
|
import {
|
|
Paper,
|
|
Typography,
|
|
} from '@material-ui/core';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import styles from './styles';
|
|
|
|
import { toLocalTime } from '../../../utils';
|
|
|
|
import BannerTopBar from '../../BannerTopBar';
|
|
|
|
import { showEventCalls } from '../../../GraphQL/Calls/index';
|
|
|
|
class Show extends React.Component {
|
|
render() {
|
|
const { classes } = this.props;
|
|
return (
|
|
<React.Fragment>
|
|
<BannerTopBar backgroundUrl='https://superalgos.org/img/photos/events.jpg' />
|
|
<div className='container'>
|
|
<Paper className={classes.paperRoot}>
|
|
<Typography className={classes.typography} variant='h4' gutterBottom>
|
|
Event Details :
|
|
</Typography>
|
|
|
|
<Query
|
|
query={showEventCalls.EVENTS_EVENT}
|
|
variables={{ eventId: this.props.match.params.slug }}
|
|
>
|
|
{({ loading, error, data }) => {
|
|
if (loading) return 'Loading...';
|
|
if (error) return `Error! ${error.message}`;
|
|
return (
|
|
<React.Fragment>
|
|
<Typography className={classes.typography} variant='h5' gutterBottom>
|
|
Title :
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h6' gutterBottom>
|
|
{data.events_Event.title}
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h5' gutterBottom>
|
|
Subtitle :
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h6' gutterBottom>
|
|
{data.events_Event.subtitle}
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h5' gutterBottom>
|
|
Dates :
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h6' gutterBottom>
|
|
From {toLocalTime(data.events_Event.startDatetime)} to {toLocalTime(data.events_Event.endDatetime)}
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h5' gutterBottom>
|
|
Formula :
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h6' gutterBottom>
|
|
{data.events_Event.formula.name}
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h5' gutterBottom>
|
|
Plotter :
|
|
</Typography>
|
|
<Typography className={classes.typography} variant='h6' gutterBottom>
|
|
{data.events_Event.plotter.name}
|
|
</Typography>
|
|
</React.Fragment>
|
|
);
|
|
}}
|
|
</Query>
|
|
</Paper>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(Show);
|