Minimal listing setup for you own competitions

client/src/Components/HostedEvent/Event.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import {
+  Grid, Paper,
+  Typography,
+  Button
+} from '@material-ui/core'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    padding: 20,
+    margin: 10
+  },
+  image: {
+    width: 128,
+    height: '100%',
+    cursor: 'default'
+  },
+  img: {
+    margin: 'auto',
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: '100%'
+
+  },
+  buttonList: {
+    margin: theme.spacing.unit,
+    float: 'right'
+  },
+  buttonGrid: {
+    marginTop: -20
+  }
+
+})
+
+class Event extends React.Component {
+  render () {
+    const classes = this.props.classes
+    const {
+      name,
+      designator,
+      startDatetime,
+      finishDatetime,
+      hostId,
+      description
+    } = this.props.event
+    return (
+      <Paper className={classes.root}>
+        <Grid container spacing={16}>
+          <Grid item xs>
+            <Typography gutterBottom variant='headline'> {name} </Typography>
+            <Typography gutterBottom>From : {startDatetime} </Typography>
+            <Typography gutterBottom>To : {finishDatetime} </Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography gutterBottom>Hosted by: {hostId} </Typography>
+            <Typography gutterBottom>Formula: </Typography>
+            <Typography gutterBottom>First prize: </Typography>
+          </Grid>
+          <Grid item xs={12} sm container>
+            <Grid item xs container direction='column' spacing={16}>
+              <Grid item xs>
+                <Typography gutterBottom variant='headline'> Description : </Typography>
+                <Typography gutterBottom> {description} </Typography>
+              </Grid>
+              <Grid item className={classes.buttonGrid}>
+                <Button
+                  className={classes.buttonList}
+                  variant='outlined'
+                  color='primary'
+                  size='small'
+                  component={Link}
+                  to={'/hosted-events/' + designator}
+                >
+                  Edit
+                </Button>
+                <Button
+                  className={classes.buttonList}
+                  variant='outlined'
+                  color='primary'
+                  size='small'
+                  component={Link}
+                  to={'/events/' + designator}
+                >
+                  Show
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    )
+  }
+}
+
+export default withStyles(styles)(Event)

client/src/Components/HostedEvent/graphql.js

@@ -2,6 +2,11 @@ import gql from 'graphql-tag'
 
 const fragments = `
   name
+  designator
+  startDatetime
+  finishDatetime
+  hostId
+  description
 `
 
 export const HOSTS_HOSTEVENT = gql`

client/src/Components/HostedEvent/index.js

@@ -14,6 +14,7 @@ import { withStyles } from '@material-ui/core/styles'
 import styles from './styles'
 
 import New from './New'
+import Event from './Event'
 
 class HostedEvent extends React.Component {
   constructor (props) {
@@ -43,9 +44,7 @@ class HostedEvent extends React.Component {
             if (error) return `Error! ${error.message}`
             const list = data.hosts_EventsByHost.map((event, index) => {
               return (
-                <div key={index}>
-                  {event.name}
-                </div>
+                <Event key={index} event={event} />
               )
             })
             return (