Setting up a query to get information for edit page

client/src/Components/Event/Edit/index.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import gql from 'graphql-tag'
+import { Query } from 'react-apollo'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+import styles from './styles'
+
+const HOSTS_EVENT = gql`
+  query Hosts_Event($designator: ID!){
+    hosts_Event(designator: $designator) {
+      name
+      designator
+      startDatetime
+      finishDatetime
+      host {
+        alias
+        firstName
+        lastName
+      }
+      description
+    }
+  }
+`
+
+class Edit extends React.Component {
+  render () {
+    return (
+      <React.Fragment>
+        <Typography
+          variant='display1'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          Enroll in an competition {this.props.match.params.slug}
+        </Typography>
+        <Query
+          query={HOSTS_EVENT}
+          variables={{ designator: this.props.match.params.slug }}
+        >
+          {({ loading, error, data }) => {
+            if (loading) return 'Loading...'
+            if (error) return `Error! ${error.message}`
+            return (
+              <p>
+                {data.hosts_Event.description}
+              </p>
+            )
+          }}
+        </Query>
+      </React.Fragment>
+    )
+  }
+}
+
+export default withStyles(styles)(Edit)

client/src/Components/Event/Edit/styles.js

@@ -0,0 +1,4 @@
+const styles = theme => ({
+})
+
+export default styles

client/src/index.js

@@ -9,6 +9,7 @@ import { getItem } from './utils/local-storage'
 import TopBar from './Components/TopBar'
 import Search from './Components/Search'
 import HostedEvents from './Components/HostedEvents'
+import EditEvent from './Components/Event/Edit'
 
 class App extends Component {
   constructor (props) {
@@ -41,6 +42,7 @@ class App extends Component {
             {loggedIn}
             <Switch>
               <Route exact path='/' component={Search} />
+              <Route path='/event/:slug/edit' component={EditEvent} />
               <Route path='/hosted-events' component={HostedEvents} />
             </Switch>
           </div>