From 6ddfb7d0af951aee308af4ed0e6a8aa73925ce78 Mon Sep 17 00:00:00 2001
From: Barry Low <barrylow@gmail.com>
Date: Mon, 17 Sep 2018 12:40:02 -0700
Subject: [PATCH] Client: simplify to pass user info via props

---
 .../teams/UpdateTeamProfileMutation.js        | 14 +++++-
 client/src/views/common/MessageCard.js        |  4 +-
 client/src/views/dashboard/TeamMembers.js     |  2 +-
 .../dashboard/components/CreateTeamDialog.js  | 41 ++++++++++------
 .../views/dashboard/components/DashTeam.js    |  5 +-
 .../dashboard/components/DashTeamItem.js      |  9 ++--
 .../views/dashboard/components/DrawerLinks.js | 12 ++++-
 .../dashboard/components/ManageTeamDelete.js  | 48 ++++++++++++-------
 .../dashboard/components/ManageTeamDetails.js | 23 +++++----
 .../dashboard/components/ManageTeamEdit.js    | 34 ++++++++++---
 .../dashboard/components/ManageTeamsList.js   | 12 +++--
 client/src/views/footer/index.js              | 12 ++++-
 client/src/views/index.js                     | 12 ++++-
 client/src/views/navbar/index.js              | 13 +++--
 .../views/teams/components/TeamsDetails.js    | 20 ++++----
 .../src/views/teams/components/TeamsItem.js   |  2 +-
 .../src/views/teams/components/TeamsList.js   |  7 +--
 17 files changed, 186 insertions(+), 84 deletions(-)

diff --git a/client/src/graphql/teams/UpdateTeamProfileMutation.js b/client/src/graphql/teams/UpdateTeamProfileMutation.js
index 6da940d4c..4a63adffe 100644
--- a/client/src/graphql/teams/UpdateTeamProfileMutation.js
+++ b/client/src/graphql/teams/UpdateTeamProfileMutation.js
@@ -2,8 +2,18 @@
 import gql from 'graphql-tag'
 
 const UPDATE_TEAM_PROFILE = gql`
-  mutation UpdateTeamProfileMutation($slug: String!, $owner: String!, $description: String, $motto: String) {
-    updateTeamProfile(slug: $slug, owner: $owner, description: $description, motto: $motto) {
+  mutation UpdateTeamProfileMutation(
+    $slug: String!
+    $owner: String!
+    $description: String
+    $motto: String
+  ) {
+    updateTeamProfile(
+      slug: $slug
+      owner: $owner
+      description: $description
+      motto: $motto
+    ) {
       id
       name
       slug
diff --git a/client/src/views/common/MessageCard.js b/client/src/views/common/MessageCard.js
index 9c45891d0..fff952915 100644
--- a/client/src/views/common/MessageCard.js
+++ b/client/src/views/common/MessageCard.js
@@ -27,7 +27,9 @@ export const MessageCard = ({ classes, message, children }) => (
   <Card className={classes.card}>
     <div className={classes.cardDetails}>
       <CardContent className={classes.cardContent}>
-        <Typography variant='headline' align='center' gutterBottom>{message}</Typography>
+        <Typography variant='headline' align='center' gutterBottom>
+          {message}
+        </Typography>
         {children}
       </CardContent>
     </div>
diff --git a/client/src/views/dashboard/TeamMembers.js b/client/src/views/dashboard/TeamMembers.js
index 8b2b43aeb..8d86d4155 100644
--- a/client/src/views/dashboard/TeamMembers.js
+++ b/client/src/views/dashboard/TeamMembers.js
@@ -15,7 +15,7 @@ const styles = theme => ({
 const TeamMembers = ({ classes }) => (
   <div>
     <Typography variant='display1' gutterBottom>
-      Members
+      Team Members
     </Typography>
     <div className={classes.tableContainer}>
       <MessageCard message='Coming soon. Invite and manage team members' />
diff --git a/client/src/views/dashboard/components/CreateTeamDialog.js b/client/src/views/dashboard/components/CreateTeamDialog.js
index 4db5b5638..bd28c00cb 100644
--- a/client/src/views/dashboard/components/CreateTeamDialog.js
+++ b/client/src/views/dashboard/components/CreateTeamDialog.js
@@ -14,8 +14,6 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import Typography from '@material-ui/core/Typography'
-
-import { getItem } from '../../../utils/local-storage'
 import { isEmpty } from '../../../utils/js-helpers'
 
 import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation'
@@ -74,7 +72,9 @@ export class CreateTeamDialog extends Component {
           let errors
           let loader = null
           if (loading) {
-            loader = <Typography variant='subheading'>Submitting team...</Typography>
+            loader = (
+              <Typography variant='subheading'>Submitting team...</Typography>
+            )
           }
           if (error) {
             errors = error.graphQLErrors.map(({ message }, i) => {
@@ -88,7 +88,13 @@ export class CreateTeamDialog extends Component {
           }
           return (
             <div>
-              <Button variant='fab' color='primary' aria-label='Add' className={classes.buttonRight} onClick={this.handleClickOpen}>
+              <Button
+                variant='fab'
+                color='primary'
+                aria-label='Add'
+                className={classes.buttonRight}
+                onClick={this.handleClickOpen}
+              >
                 <AddIcon />
               </Button>
               <Dialog
@@ -99,7 +105,10 @@ export class CreateTeamDialog extends Component {
                 <DialogTitle id='form-dialog-title'>Create a Team</DialogTitle>
                 <DialogContent>
                   <DialogContentText>Team Name:</DialogContentText>
-                  <FormControl required error={e => (this.state.errors.name !== '' || error)}>
+                  <FormControl
+                    required
+                    error={this.state.errors.name !== '' || error}
+                  >
                     <TextField
                       autoFocus
                       margin='dense'
@@ -111,8 +120,10 @@ export class CreateTeamDialog extends Component {
                       onChange={this.handleChange}
                       error={this.state.errors.name !== '' || error}
                     />
-                    {this.state.errors.name !== '' && (<FormHelperText>{this.state.errors.name}</FormHelperText>)}
-                    {error && (<FormHelperText>{errors}</FormHelperText>)}
+                    {this.state.errors.name !== '' && (
+                      <FormHelperText>{this.state.errors.name}</FormHelperText>
+                    )}
+                    {error && <FormHelperText>{errors}</FormHelperText>}
                     {loader}
                   </FormControl>
                 </DialogContent>
@@ -120,9 +131,12 @@ export class CreateTeamDialog extends Component {
                   <Button onClick={this.handleClose} color='primary'>
                     Cancel
                   </Button>
-                  <Button onClick={e => {
-                    this.handleSubmit(e, createTeam, this.state.name)
-                  }} color='primary'>
+                  <Button
+                    onClick={e => {
+                      this.handleSubmit(e, createTeam, this.state.name, authId)
+                    }}
+                    color='primary'
+                  >
                     Create Team
                   </Button>
                 </DialogActions>
@@ -153,15 +167,12 @@ export class CreateTeamDialog extends Component {
     }
   }
 
-  async handleSubmit (e, createTeam, name) {
+  async handleSubmit (e, createTeam, name, authId) {
     e.preventDefault()
-    const currentUser = await getItem('user')
-    let authId = JSON.parse(currentUser)
-    authId = authId.authId
     console.log('createTeam submit: ', authId, name)
     const slug = this.slugify(name)
     await createTeam({ variables: { name, slug, owner: authId } })
-    this.setState({ name: '' })
+    this.setState({ name: '', open: false })
   }
 
   validate (data) {
diff --git a/client/src/views/dashboard/components/DashTeam.js b/client/src/views/dashboard/components/DashTeam.js
index 1213f7eb1..1f6fc42c7 100644
--- a/client/src/views/dashboard/components/DashTeam.js
+++ b/client/src/views/dashboard/components/DashTeam.js
@@ -42,7 +42,10 @@ export const DashTeam = ({ classes, user = null }) => {
   return (
     <Grid item md={6} style={{ position: 'relative' }}>
       <Typography variant='display1' gutterBottom>
-        Teams <Link to='/manage-teams' className={classes.dashLink}>Manage Teams</Link>
+        Teams{' '}
+        <Link to='/manage-teams' className={classes.dashLink}>
+          Manage Teams
+        </Link>
       </Typography>
       <Query query={GET_TEAMS_BY_OWNER} variables={{ authId }}>
         {({ loading, error, data }) => {
diff --git a/client/src/views/dashboard/components/DashTeamItem.js b/client/src/views/dashboard/components/DashTeamItem.js
index b5210e73c..e917b9006 100644
--- a/client/src/views/dashboard/components/DashTeamItem.js
+++ b/client/src/views/dashboard/components/DashTeamItem.js
@@ -9,7 +9,8 @@ import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import CardMedia from '@material-ui/core/CardMedia'
 import CardActions from '@material-ui/core/CardActions'
-import Button from '@material-ui/core/Button'
+
+import ManageTeamDetails from './ManageTeamDetails'
 
 const styles = theme => ({
   card: {
@@ -49,13 +50,11 @@ export const DashTeamItem = ({ classes, team }) => (
             {team.createdAt}
           </Typography>
           <Typography variant='subheading' paragraph>
-            Members:6
+            Members: {team.members.length}
           </Typography>
         </CardContent>
         <CardActions>
-          <Button size='small' color='primary' className={classes.buttonRight}>
-            Details
-          </Button>
+          <ManageTeamDetails team={team} />
         </CardActions>
       </div>
     </Card>
diff --git a/client/src/views/dashboard/components/DrawerLinks.js b/client/src/views/dashboard/components/DrawerLinks.js
index 29321211e..2109efb47 100644
--- a/client/src/views/dashboard/components/DrawerLinks.js
+++ b/client/src/views/dashboard/components/DrawerLinks.js
@@ -16,8 +16,16 @@ const DashboardLink = props => <Link to='/dashboard' {...props} />
 const TeamsLink = props => <Link to='/manage-teams' {...props} />
 const MembersLink = props => <Link to='/team-members' {...props} />
 const SettingsLink = props => <Link to='/settings' {...props} />
-const DocumentationLink = props => <a href='https://advancedalgos.net/documentation-quick-start.shtml' target='_blank' {...props} />
-const SupportLink = props => <a href='https://t.me/advancedalgoscommunity' target='_blank' {...props} />
+const DocumentationLink = props => (
+  <a
+    href='https://advancedalgos.net/documentation-quick-start.shtml'
+    target='_blank'
+    {...props}
+  />
+)
+const SupportLink = props => (
+  <a href='https://t.me/advancedalgoscommunity' target='_blank' {...props} />
+)
 
 export const MainDrawerItems = (
   <div>
diff --git a/client/src/views/dashboard/components/ManageTeamDelete.js b/client/src/views/dashboard/components/ManageTeamDelete.js
index 4cb3e3204..9f88ba9a3 100644
--- a/client/src/views/dashboard/components/ManageTeamDelete.js
+++ b/client/src/views/dashboard/components/ManageTeamDelete.js
@@ -37,9 +37,7 @@ export class ManageTeamDelete extends Component {
     this.handleSubmit = this.handleSubmit.bind(this)
 
     this.state = {
-      open: false,
-      motto: '',
-      description: ''
+      open: false
     }
   }
 
@@ -67,18 +65,14 @@ export class ManageTeamDelete extends Component {
             variables: { authId }
           }
         ]}
-        update={(cache, { data: { deleteTeam } }) => {
-          const data = cache.readQuery({ query: GET_TEAMS_BY_OWNER })
-          console.log('Mutation cache update: ', deleteTeam, data)
-          data.getTeamsByOwner.push(deleteTeam)
-          cache.writeQuery({ query: GET_TEAMS_BY_OWNER, data })
-        }}
       >
         {(deleteTeam, { loading, error, data }) => {
           let errors
           let loader
           if (loading) {
-            loader = <Typography variant='caption'>Submitting team...</Typography>
+            loader = (
+              <Typography variant='caption'>Submitting team...</Typography>
+            )
           }
           if (error) {
             errors = error.graphQLErrors.map(({ message }, i) => {
@@ -93,7 +87,12 @@ export class ManageTeamDelete extends Component {
           }
           return (
             <div>
-              <Button size='small' color='primary' className={classes.buttonRight} onClick={this.handleClickOpen}>
+              <Button
+                size='small'
+                color='primary'
+                className={classes.buttonRight}
+                onClick={this.handleClickOpen}
+              >
                 <DeleteIcon /> Delete
               </Button>
               <Dialog
@@ -102,10 +101,16 @@ export class ManageTeamDelete extends Component {
                 aria-labelledby='form-dialog-title'
               >
                 <div classes={classes.dialogContainer}>
-                  <DialogTitle id='form-dialog-title'>Delete Team Team</DialogTitle>
+                  <DialogTitle id='form-dialog-title'>
+                    Delete Team Team
+                  </DialogTitle>
                   <DialogContent>
-                    <Typography variant='subheading' color='primary'>DANGER - Deleting your team cannot be undone</Typography>
-                    <Typography variant='subheading'>Are you sure you want to delete this team?</Typography>
+                    <Typography variant='subheading' color='primary'>
+                      DANGER - Deleting your team cannot be undone
+                    </Typography>
+                    <Typography variant='subheading'>
+                      Are you sure you want to delete this team?
+                    </Typography>
                     {loader}
                     {errors}
                   </DialogContent>
@@ -113,9 +118,17 @@ export class ManageTeamDelete extends Component {
                     <Button onClick={this.handleClose} color='primary'>
                       Cancel
                     </Button>
-                    <Button onClick={e => {
-                      this.handleSubmit(e, deleteTeam, this.props.slug, authId)
-                    }} color='primary'>
+                    <Button
+                      onClick={e => {
+                        this.handleSubmit(
+                          e,
+                          deleteTeam,
+                          this.props.slug,
+                          authId
+                        )
+                      }}
+                      color='primary'
+                    >
                       Delete Team
                     </Button>
                   </DialogActions>
@@ -131,6 +144,7 @@ export class ManageTeamDelete extends Component {
   async handleSubmit (e, deleteTeam, slug, authId) {
     e.preventDefault()
     await deleteTeam({ variables: { slug, owner: authId } })
+    this.setState({ open: false })
   }
 }
 
diff --git a/client/src/views/dashboard/components/ManageTeamDetails.js b/client/src/views/dashboard/components/ManageTeamDetails.js
index 183db0ea8..dac382392 100644
--- a/client/src/views/dashboard/components/ManageTeamDetails.js
+++ b/client/src/views/dashboard/components/ManageTeamDetails.js
@@ -38,7 +38,12 @@ export class ManageTeamDetails extends Component {
     const { name, members, profile, createdAt } = this.props.team
     return (
       <div>
-        <Button size='small' color='primary' className={this.props.classes.buttonRight} onClick={this.handleClickOpen}>
+        <Button
+          size='small'
+          color='primary'
+          className={this.props.classes.buttonRight}
+          onClick={this.handleClickOpen}
+        >
           <DetailsIcon /> Details
         </Button>
         <Dialog
@@ -47,7 +52,9 @@ export class ManageTeamDetails extends Component {
           aria-labelledby='form-dialog-title'
         >
           <div classes={this.props.classes.dialogContainer}>
-            <DialogTitle id='form-dialog-title'>{name} Team Details</DialogTitle>
+            <DialogTitle id='form-dialog-title'>
+              {name} Team Details
+            </DialogTitle>
             <DialogContent>
               <Typography
                 variant='display3'
@@ -70,14 +77,14 @@ export class ManageTeamDetails extends Component {
                 Members: {members.length}
               </Typography>
               <Typography variant='subheading' color='primary'>
-                Team Admin:
-                {
-                  members.map(member => {
-                    if (member.role === 'OWNER' || member.role === 'ADMIN') {
+                Team Admin:&nbsp;
+                {members.map(member => {
+                  if (member.role === 'OWNER' || member.role === 'ADMIN') {
+                    if (member.member !== null && member.member.alias !== undefined && member.member.alias !== null) {
                       return member.member.alias
                     }
-                  })
-                }
+                  }
+                })}
               </Typography>
             </DialogContent>
             <DialogActions>
diff --git a/client/src/views/dashboard/components/ManageTeamEdit.js b/client/src/views/dashboard/components/ManageTeamEdit.js
index 7db8b46be..7d10e1a7a 100644
--- a/client/src/views/dashboard/components/ManageTeamEdit.js
+++ b/client/src/views/dashboard/components/ManageTeamEdit.js
@@ -66,7 +66,9 @@ export class ManageTeamEdit extends Component {
           let errors
           let loader
           if (loading) {
-            loader = <Typography variant='caption'>Submitting team...</Typography>
+            loader = (
+              <Typography variant='caption'>Submitting team...</Typography>
+            )
           }
           if (error) {
             errors = error.graphQLErrors.map(({ message }, i) => {
@@ -81,7 +83,12 @@ export class ManageTeamEdit extends Component {
           }
           return (
             <div>
-              <Button size='small' color='primary' className={classes.buttonRight} onClick={this.handleClickOpen}>
+              <Button
+                size='small'
+                color='primary'
+                className={classes.buttonRight}
+                onClick={this.handleClickOpen}
+              >
                 <EditIcon /> Edit
               </Button>
               <Dialog
@@ -90,7 +97,9 @@ export class ManageTeamEdit extends Component {
                 aria-labelledby='form-dialog-title'
               >
                 <div classes={classes.dialogContainer}>
-                  <DialogTitle id='form-dialog-title'>Edit Team Details</DialogTitle>
+                  <DialogTitle id='form-dialog-title'>
+                    Edit Team Details
+                  </DialogTitle>
                   <DialogContent>
                     <TextField
                       autoFocus
@@ -131,9 +140,12 @@ export class ManageTeamEdit extends Component {
                     <Button onClick={this.handleClose} color='primary'>
                       Cancel
                     </Button>
-                    <Button onClick={e => {
-                      this.handleSubmit(e, updateTeamProfile, this.props.slug)
-                    }} color='primary'>
+                    <Button
+                      onClick={e => {
+                        this.handleSubmit(e, updateTeamProfile, this.props.slug)
+                      }}
+                      color='primary'
+                    >
                       Update Team
                     </Button>
                   </DialogActions>
@@ -171,7 +183,15 @@ export class ManageTeamEdit extends Component {
     const currentUser = await getItem('user')
     let authId = JSON.parse(currentUser)
     authId = authId.authId
-    await updateTeamProfile({ variables: { slug, owner: authId, description: this.state.description, motto: this.state.motto } })
+    await updateTeamProfile({
+      variables: {
+        slug,
+        owner: authId,
+        description: this.state.description,
+        motto: this.state.motto
+      }
+    })
+    this.setState({ description: '', motto: '', open: false })
   }
 }
 
diff --git a/client/src/views/dashboard/components/ManageTeamsList.js b/client/src/views/dashboard/components/ManageTeamsList.js
index 5a5349e86..d72921486 100644
--- a/client/src/views/dashboard/components/ManageTeamsList.js
+++ b/client/src/views/dashboard/components/ManageTeamsList.js
@@ -66,16 +66,18 @@ export const ManageTeamsList = ({ classes, user = null }) => {
     )
   } else {
     return (
-      <Query query={GET_TEAMS_BY_OWNER} fetchPolicy='network-only' variables={{ authId }}>
+      <Query
+        query={GET_TEAMS_BY_OWNER}
+        fetchPolicy='network-only'
+        variables={{ authId }}
+      >
         {({ loading, error, data }) => {
           console.log('GET_TEAMS_BY_OWNER: ', loading, error, data)
 
           let errors = null
           if (error) {
             errors = error.graphQLErrors.map(({ message }, i) => {
-              return (
-                <MessageCard message={message} />
-              )
+              return <MessageCard message={message} />
             })
           }
           if (!loading && !error) {
@@ -115,7 +117,7 @@ export const ManageTeamsList = ({ classes, user = null }) => {
               <Grid container spacing={40}>
                 <Grid item xs={12}>
                   <MessageCard message='Loading...' />
-                  if (errors !== null) (<MessageCard message={errors} />)
+                  {errors !== null && <MessageCard message={errors} />}
                 </Grid>
               </Grid>
             )
diff --git a/client/src/views/footer/index.js b/client/src/views/footer/index.js
index ecbd0c594..2fb5b72e9 100644
--- a/client/src/views/footer/index.js
+++ b/client/src/views/footer/index.js
@@ -67,12 +67,20 @@ const Footer = ({ classes }) => {
           </NavLink>
         </Grid>
         <Grid item xs>
-          <a href='https://t.me/advancedalgoscommunity' target='_blank>' className={classNames(classes.footerLink)}>
+          <a
+            href='https://t.me/advancedalgoscommunity'
+            target='_blank>'
+            className={classNames(classes.footerLink)}
+          >
             <Typography variant='title' color='textPrimary' gutterBottom>
               Support
             </Typography>
           </a>
-          <a href='https://advancedalgos.net/documentation-quick-start.shtml' target='_blank>' className={classNames(classes.footerLink)}>
+          <a
+            href='https://advancedalgos.net/documentation-quick-start.shtml'
+            target='_blank>'
+            className={classNames(classes.footerLink)}
+          >
             <Typography variant='subheading' color='textSecondary'>
               Documentation
             </Typography>
diff --git a/client/src/views/index.js b/client/src/views/index.js
index 8ff455e85..195ec74ff 100644
--- a/client/src/views/index.js
+++ b/client/src/views/index.js
@@ -8,4 +8,14 @@ import Teams from './teams'
 
 import { theme, globalStyles } from './theme'
 
-export { NavBar, Footer, Callback, Home, About, Dashboard, Teams, theme, globalStyles }
+export {
+  NavBar,
+  Footer,
+  Callback,
+  Home,
+  About,
+  Dashboard,
+  Teams,
+  theme,
+  globalStyles
+}
diff --git a/client/src/views/navbar/index.js b/client/src/views/navbar/index.js
index ca33893d2..06531ebfe 100644
--- a/client/src/views/navbar/index.js
+++ b/client/src/views/navbar/index.js
@@ -82,7 +82,10 @@ class NavBar extends Component {
 
     return (
       <div className={classes.root}>
-        <AppBar position='static' classes={{ root: classes.appBar, colorDefault: classes.colorDefault }}>
+        <AppBar
+          position='static'
+          classes={{ root: classes.appBar, colorDefault: classes.colorDefault }}
+        >
           <Toolbar>
             <img className={classes.img} src={AALogo} alt='Advanced Algos' />
             <Typography
@@ -101,8 +104,12 @@ class NavBar extends Component {
             >
               <HomeIcon />
             </IconButton>
-            <Button component={TeamsLink} color='inherit'>Teams</Button>
-            <Button component={AboutLink} color='inherit'>About</Button>
+            <Button component={TeamsLink} color='inherit'>
+              Teams
+            </Button>
+            <Button component={AboutLink} color='inherit'>
+              About
+            </Button>
 
             {this.state.user !== undefined && this.state.user !== null ? (
               <React.Fragment>
diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js
index 5c590a54b..5383895b6 100644
--- a/client/src/views/teams/components/TeamsDetails.js
+++ b/client/src/views/teams/components/TeamsDetails.js
@@ -63,18 +63,22 @@ const TeamsDetails = ({ classes, team }) => (
           <Typography variant='subheading' color='textSecondary'>
             {team.createdAt}
           </Typography>
+          <Typography variant='subheading' color='textSecondary'>
+            Motto: {team.profile.motto}
+          </Typography>
+          <Typography variant='subheading' color='textSecondary'>
+            Description: {team.profile.description}
+          </Typography>
           <Typography variant='subheading' paragraph gutterBottom>
             Members: {team.members.length}
           </Typography>
           <Typography variant='subheading' color='primary'>
-            Team Admin:
-            {
-              team.members.map(member => {
-                if (member.role === 'OWNER' || member.role === 'ADMIN') {
-                  return member.member.alias
-                }
-              })
-            }
+            Team Admin:&nbsp;
+            {team.members.map(member => {
+              if (member.role === 'OWNER' || member.role === 'ADMIN') {
+                return member.member.alias
+              }
+            })}
           </Typography>
         </div>
       </Paper>
diff --git a/client/src/views/teams/components/TeamsItem.js b/client/src/views/teams/components/TeamsItem.js
index 6b2e20bb1..9f0d78bf9 100644
--- a/client/src/views/teams/components/TeamsItem.js
+++ b/client/src/views/teams/components/TeamsItem.js
@@ -37,7 +37,7 @@ export const TeamsItem = ({ classes, team }) => (
         </CardContent>
       </CardActionArea>
       <CardActions>
-        <Link to={`/teams/${team.slug}`} >
+        <Link to={`/teams/${team.slug}`}>
           <Button size='small' color='primary' className={classes.buttonRight}>
             Details
           </Button>
diff --git a/client/src/views/teams/components/TeamsList.js b/client/src/views/teams/components/TeamsList.js
index 64493cdff..8b628e2c3 100644
--- a/client/src/views/teams/components/TeamsList.js
+++ b/client/src/views/teams/components/TeamsList.js
@@ -39,7 +39,7 @@ const styles = theme => ({
 })
 
 export const TeamsList = ({ classes, match }) => (
-  <Query query={GET_ALL_TEAMS_QUERY} fetchPolicy='cache-and-network' >
+  <Query query={GET_ALL_TEAMS_QUERY} fetchPolicy='cache-and-network'>
     {({ loading, error, data }) => {
       console.log('GET_ALL_TEAMS: ', loading, error, data, match)
       let slug = null
@@ -65,10 +65,7 @@ export const TeamsList = ({ classes, match }) => (
                   data.teams.edges.map(team => {
                     if (team.node.slug === slug) {
                       return (
-                        <TeamsDetails
-                          key={team.node.id}
-                          team={team.node}
-                        />
+                        <TeamsDetails key={team.node.id} team={team.node} />
                       )
                     }
                   })}