Cleaning the tab system a bit

client/src/Components/Search/Tabs/Future.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+
+import { withStyles } from '@material-ui/core/styles'
+import styles from '../styles'
+
+class Future extends React.Component {
+  render () {
+    const classes = this.props.classes
+    return (
+      <Typography
+        className={classes.title}
+        variant='display1'
+        align='center'
+        color='textPrimary'
+        gutterBottom
+      >
+        Future competitions
+      </Typography>
+    )
+  }
+}
+
+export default withStyles(styles)(Future)

client/src/Components/Search/Tabs/History.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+
+import { withStyles } from '@material-ui/core/styles'
+import styles from '../styles'
+
+class History extends React.Component {
+  render () {
+    const classes = this.props.classes
+    return (
+      <Typography
+        className={classes.title}
+        variant='display1'
+        align='center'
+        color='textPrimary'
+        gutterBottom
+      >
+        Your old competitions (maybe here, maybe not, who knows)
+      </Typography>
+    )
+  }
+}
+
+export default withStyles(styles)(History)

client/src/Components/Search/Tabs/Incoming.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+
+import { withStyles } from '@material-ui/core/styles'
+import styles from '../styles'
+
+class Incoming extends React.Component {
+  render () {
+    const classes = this.props.classes
+    return (
+      <Typography
+        className={classes.title}
+        variant='display1'
+        align='center'
+        color='textPrimary'
+        gutterBottom
+      >
+        Ongoing and incoming competitions
+      </Typography>
+    )
+  }
+}
+
+export default withStyles(styles)(Incoming)

client/src/Components/Search/Tabs/Past.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+
+import { withStyles } from '@material-ui/core/styles'
+import styles from '../styles'
+
+class Past extends React.Component {
+  render () {
+    const classes = this.props.classes
+    return (
+      <Typography
+        className={classes.title}
+        variant='display1'
+        align='center'
+        color='textPrimary'
+        gutterBottom
+      >
+        This will come later
+      </Typography>
+    )
+  }
+}
+
+export default withStyles(styles)(Past)

client/src/Components/Search/Tabs/index.js

@@ -0,0 +1,11 @@
+import Future from './Future'
+import History from './History'
+import Incoming from './Incoming'
+import Past from './Past'
+
+export {
+  Future,
+  History,
+  Incoming,
+  Past
+}

client/src/Components/Search/index.js

@@ -16,6 +16,12 @@ import styles from './styles'
 
 import { listEventsCalls } from '../../GraphQL/Calls/index'
 
+import {
+  Future,
+  History,
+  Incoming,
+  Past
+} from './Tabs'
 import Event from './Event'
 
 function TabContainer (props) {
@@ -27,8 +33,11 @@ function TabContainer (props) {
 }
 
 class Search extends React.Component {
-  state = {
-    value: 0
+  constructor (props) {
+    super(props)
+    this.state = {
+      value: 0
+    }
   }
 
   handleChange = (event, value) => {
@@ -39,72 +48,61 @@ class Search extends React.Component {
     const classes = this.props.classes
     const { value } = this.state
     return (
-      <React.Fragment>
-        <div className={classes.root}>
-          <AppBar position='static' color='default'>
-            <Tabs
-              value={value}
-              onChange={this.handleChange}
-              scrollable
-              scrollButtons='off'
-              indicatorColor='primary'
-              textColor='primary'
-            >
-              <Tab
-                className={classes.tabTitle}
-                label='Profile Sheet'
-                icon={<ProfileSheetIcon />}
-              />
-              <Tab
-                className={classes.tabTitle}
-                label='Profile Images'
-                icon={<ProfileImagesIcon />}
-              />
-              <Tab
-                className={classes.tabTitle}
-                label='Your Referrer'
-                icon={<YourReferrerIcon />}
-              />
-              <Tab
-                className={classes.tabTitle}
-                label='Your Descendents'
-                icon={<DescendentsIcon />}
-              />
-            </Tabs>
-          </AppBar>
-          {value === 0 && <TabContainer><p> hahah </p></TabContainer>}
-          {value === 1 && <TabContainer><p> hoho </p></TabContainer>}
-          {value === 2 && <TabContainer><p> hihi </p></TabContainer>}
-          {value === 3 && <TabContainer><p> hehe </p></TabContainer>}
-        </div>
-        <Typography
-          className={classes.title}
-          variant='display1'
-          align='center'
-          color='textPrimary'
-          gutterBottom
-        >
-          Enroll in an competition
-        </Typography>
-        <Query
-          query={listEventsCalls.HOSTS_EVENTS}
-        >
-          {({ 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} />
-              )
-            })
+      <Query
+        query={listEventsCalls.HOSTS_EVENTS}
+      >
+        {({ loading, error, data }) => {
+          if (loading) return 'Loading...'
+          if (error) return `Error! ${error.message}`
+          const list = data.hosts_Events.map((event, index) => {
             return (
-              <React.Fragment>
-                { list }
-              </React.Fragment>
+              <Event key={index} event={event} />
             )
-          }}
-        </Query>
-      </React.Fragment>
+          })
+          return (
+            <React.Fragment>
+              <div className={classes.root}>
+                <AppBar position='static' color='default'>
+                  <Tabs
+                    value={value}
+                    onChange={this.handleChange}
+                    scrollable
+                    scrollButtons='off'
+                    indicatorColor='primary'
+                    textColor='primary'
+                  >
+                    <Tab
+                      className={classes.tabTitle}
+                      label='Ongoing &amp; Incoming'
+                      icon={<ProfileSheetIcon />}
+                    />
+                    <Tab
+                      className={classes.tabTitle}
+                      label='Future'
+                      icon={<ProfileImagesIcon />}
+                    />
+                    <Tab
+                      className={classes.tabTitle}
+                      label='Your history'
+                      icon={<YourReferrerIcon />}
+                    />
+                    <Tab
+                      className={classes.tabTitle}
+                      label='Past'
+                      icon={<DescendentsIcon />}
+                    />
+                  </Tabs>
+                </AppBar>
+                {value === 0 && <TabContainer><Incoming /></TabContainer>}
+                {value === 1 && <TabContainer><Future /></TabContainer>}
+                {value === 2 && <TabContainer><History /></TabContainer>}
+                {value === 3 && <TabContainer><Past /></TabContainer>}
+              </div>
+              { list }
+            </React.Fragment>
+          )
+        }}
+      </Query>
     )
   }
 }