Making a minimal list page

client/src/Components/HostedEvents/Event.js

@@ -83,7 +83,7 @@ class Event extends React.Component {
                   color='primary'
                   size='small'
                   component={Link}
-                  to={'/events/' + designator}
+                  to={'/event/' + designator}
                 >
                   Show
                 </Button>

client/src/Components/Search/Competition.js

@@ -1,124 +0,0 @@
-import React from 'react'
-
-import { toLocalTime } from '../../utils'
-
-import {
-  Grid, Paper, Typography, Button,
-  Dialog, DialogContent, DialogContentText, DialogTitle
-} 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 Competition extends React.Component {
-  render () {
-    const classes = this.props.classes
-    const { displayName,
-      startDatetime,
-      finishDatetime,
-      host,
-      description,
-      formula,
-      prizes
-    } = this.props.competition
-    const firstPrice = prizes.find(prize => {
-      return prize.position === 1
-    })
-    return (
-      <Paper className={classes.root}>
-        <Grid container spacing={16}>
-          <Grid item xs>
-            <Typography gutterBottom variant='headline'> { displayName } </Typography>
-            <Typography gutterBottom>From : {toLocalTime(startDatetime)} </Typography>
-            <Typography gutterBottom>To : {toLocalTime(finishDatetime)} </Typography>
-          </Grid>
-          <Grid item xs>
-            <Typography gutterBottom>Hosted by: { host }</Typography>
-            <Typography gutterBottom>Formula: { formula }</Typography>
-            <Typography gutterBottom>First prize: { firstPrice ? firstPrice.algoPrize + ' ALGOS' : 'none' }</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'
-                  onClick={() => this.auditLog()}
-                >Apply</Button>
-                <Button
-                  className={classes.buttonList}
-                  variant='outlined' color='primary' size='small'
-                  onClick={() => this.editKey()}
-                >Get details</Button>
-                <Button
-                  className={classes.buttonList}
-                  variant='outlined' color='primary' size='small'
-                  onClick={() => this.editKey()}
-                >Edit</Button>
-
-                <Dialog
-                  aria-labelledby='addKey-dialog-title'
-                >
-                  <DialogTitle id='addKey-dialog-title'>
-                      Edit Key
-                  </DialogTitle>
-                  <DialogContent>
-                    <DialogContentText>
-                        You will need to complete this form with the information from
-                        the exchange.
-                    </DialogContentText>
-
-                    <p> some stuff </p>
-
-                  </DialogContent>
-                </Dialog>
-
-                <Dialog
-                  aria-labelledby='auditLog-dialog-title'
-                >
-                  <DialogTitle id='auditLog-dialog-title'>
-                        Audit Log History
-                  </DialogTitle>
-                  <DialogContent>
-                    <p> some stuff </p>
-                  </DialogContent>
-                </Dialog>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Paper>
-    )
-  }
-}
-export default withStyles(styles)(Competition)

client/src/Components/Search/Event.js

@@ -0,0 +1,89 @@
+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,
+      host,
+      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: {host.alias} ({host.lastName} {host.firstName}) </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={'/event/' + designator}
+                >
+                  Show
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    )
+  }
+}
+
+export default withStyles(styles)(Event)

client/src/Components/Search/index.js

@@ -1,33 +1,14 @@
 import React from 'react'
-import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
 
-import Typography from '@material-ui/core/Typography'
+import { Typography } from '@material-ui/core'
+
 import { withStyles } from '@material-ui/core/styles'
-
-import Competition from './Competition'
-
 import styles from './styles'
 
-const HOST_COMPETITIONS = gql`
-  query Hosts_Competitions{
-    hosts_Competitions {
-      displayName
-      host
-      startDatetime
-      finishDatetime
-      description
-      formula
-      participants {
-        devTeam
-      }
-      prizes {
-        position
-        algoPrize
-      }
-    }
-  }
-`
+import { listEventsCalls } from '../../GraphQL/Calls/index'
+
+import Event from './Event'
 
 class Search extends React.Component {
   render () {
@@ -42,14 +23,14 @@ class Search extends React.Component {
           Enroll in an competition
         </Typography>
         <Query
-          query={HOST_COMPETITIONS}
+          query={listEventsCalls.HOSTS_EVENTS}
         >
           {({ loading, error, data }) => {
             if (loading) return 'Loading...'
             if (error) return `Error! ${error.message}`
-            const list = data.hosts_Competitions.map((competition, index) => {
+            const list = data.hosts_Events.map((event, index) => {
               return (
-                <Competition key={index} competition={competition} />
+                <Event key={index} event={event} />
               )
             })
             return (

client/src/GraphQL/Calls/index.js

@@ -1,7 +1,9 @@
 import hostedEventsCalls from './hostedEvents'
+import listEventsCalls from './listEvents'
 import showEventCalls from './showEvent'
 
 export {
   hostedEventsCalls,
+  listEventsCalls,
   showEventCalls
 }

client/src/GraphQL/Calls/listEvents.js

@@ -0,0 +1,14 @@
+import gql from 'graphql-tag'
+import { eventMinimalInfo } from '../Fragments'
+
+const HOSTS_EVENTS = gql`
+  query Hosts_Events{
+    hosts_Events {
+      ...EventMinimalInfo
+    }
+  }
+  ${eventMinimalInfo}
+`
+export default {
+  HOSTS_EVENTS
+}