Client: create DashCreateTeamWrapper

api/src/index.js

@@ -51,26 +51,24 @@ const resolvers = {
             id
             name
             slug
+            owner
+            status {
+              status
+              reason
+              createdAt
+            }
+            createdAt
             profile {
               avatar
               description
               motto
-            }
-            owner {
-              nickname
-              visible
-              profile {
-                avatar
-              }
+              updatedAt
             }
             members {
               role
               member {
-                nickname
-                visible
-                profile {
-                  avatar
-                }
+                alias
+                authId
               }
             }
           }

client/src/auth/index.js

@@ -102,7 +102,11 @@ class Auth {
       this.signinOrCreateAccount({ ...data })
       this.cb(data)
       console.log(authResult.idTokenPayload)
-      setItem('user', JSON.stringify(authResult.idTokenPayload))
+      const user = {
+        authID: authResult.idTokenPayload.sub,
+        alias: authResult.idTokenPayload.nickname
+      }
+      setItem('user', JSON.stringify(user))
       if (window.location.href.includes(`callback`)) {
         // window.location.href = '/dashboard'
       }
@@ -126,11 +130,13 @@ class Auth {
       })
 
       console.log('signinOrCreateAccount auth: ', await data)
-      setItem('user', JSON.stringify(data.data.authenticate))
+      const user = {
+        authID: data.data.authenticate.authId,
+        alias: data.data.authenticate.authId.alias
+      }
+      setItem('user', JSON.stringify(user))
       if (window.location.href.includes(`callback`)) {
         window.location.href = '/dashboard'
-      } else {
-        window.location.reload()
       }
       return data
     } catch (err) {
@@ -157,10 +163,11 @@ class Auth {
   async isAuthenticated () {
     // check session and run Auth0 SS0
     const getUser = await getItem('user')
+    const getExpires = await getItem('expires_at')
     let user = JSON.parse(getUser)
 
-    if (validObject(user, 'exp') && new Date().getTime() < user.exp * 1000) {
-      console.log('handleAuth.user exp: ', user, window.location.href)
+    if (new Date().getTime() < getExpires * 1000) {
+      console.log('handleAuth.user exp: ', user, getExpires, window.location.href)
 
       return user
     }
@@ -168,7 +175,11 @@ class Auth {
     const checkSSO = await this.checkSession()
       .then(result => {
         console.log('handleAuth.checksessions: ', result)
-        setItem('user', result.idTokenPayload.sub)
+        const user = {
+          authID: result.idTokenPayload.sub,
+          alias: result.idTokenPayload.nickname
+        }
+        setItem('user', JSON.stringify(user))
         // user confirmed, log into client
         this.setSession(result)
         return result.idTokenPayload
@@ -180,13 +191,6 @@ class Auth {
         }
         return err
       })
-    if (
-      (window.location.href.includes(`manage`) ||
-        window.location.href.includes(`profile`)) &&
-      !user
-    ) {
-      window.location.href = '/'
-    }
 
     if (/manage|profile|create|dashboard/.test(window.location.href) && !user) {
       this.login()

client/src/graphql/teams/GetAllTeamsQuery.js

@@ -9,26 +9,24 @@ export const GetAllTeamsQuery = gql`
           id
           name
           slug
+          owner
+          status {
+            status
+            reason
+            createdAt
+          }
+          createdAt
           profile {
             avatar
             description
             motto
-          }
-          owner {
-            nickname
-            visible
-            profile {
-              avatar
-            }
+            updatedAt
           }
           members {
             role
             member {
-              nickname
-              visible
-              profile {
-                avatar
-              }
+              alias
+              authId
             }
           }
         }

client/src/graphql/teams/Teams.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+import gql from 'graphql-tag'
+
+export const TEAMS_FRAGMENT = gql`
+  fragment TeamsRespons on teamsConnection {
+    edges {
+      node {
+        id
+        name
+        slug
+        owner
+        status {
+          status
+          reason
+          createdAt
+        }
+        createdAt
+        profile {
+          avatar
+          description
+          motto
+          updatedAt
+        }
+        members {
+          role
+          member {
+            alias
+            authId
+          }
+        }
+      }
+    }
+  }
+`
+
+export default TEAMS_FRAGMENT

client/src/utils/graphql-errors.js

@@ -0,0 +1,13 @@
+const ErrorResponse = {
+  'unique constraint': 'Sorry, already taken! Please create a unique '
+}
+
+export const checkGraphQLError = (error) => {
+  console.log('checkGraphQLError ', ErrorResponse)
+  if (error.search(/unique constraint/)) {
+    const field = error.substring(error.indexOf('=') + 1)
+    console.log('unique constraint', field.replace(/ +/g, ''))
+  }
+}
+
+export default checkGraphQLError

client/src/views/dashboard/Overview.js

@@ -3,10 +3,7 @@ import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 
 import Grid from '@material-ui/core/Grid'
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
 
-import CreateTeam from './components/CreateTeam'
 import DashTeam from './components/DashTeam'
 import DashEditor from './components/DashEditor'
 
@@ -45,23 +42,13 @@ export class Overview extends Component {
     const { classes } = this.props
     return (
       <Grid container spacing={24}>
-        <Grid container spacing={24}>
-          <Grid item>
-            <Card className={classes.card}>
-              <div className={classes.cardDetails}>
-                <CardContent className={classes.createCardContent}>
-                  <CreateTeam classes={classes} />
-                </CardContent>
-              </div>
-            </Card>
-          </Grid>
-        </Grid>
         <DashTeam classes={classes} />
         <DashEditor classes={classes} />
       </Grid>
     )
   }
 }
+
 Overview.propTypes = {
   classes: PropTypes.object.isRequired
 }

client/src/views/dashboard/components/CreateTeamWrapper.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+
+import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+
+import CreateTeam from './CreateTeam'
+
+const styles = theme => ({
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  }
+})
+
+const CreateTeamWrapper = ({ classes }) => (
+  <Grid container spacing={24}>
+    <Grid item>
+      <Card className={classes.card}>
+        <div className={classes.cardDetails}>
+          <CardContent className={classes.createCardContent}>
+            <CreateTeam classes={classes} />
+          </CardContent>
+        </div>
+      </Card>
+    </Grid>
+  </Grid>
+)
+
+CreateTeamWrapper.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(CreateTeamWrapper)

client/src/views/dashboard/components/DashTeam.js

@@ -5,27 +5,29 @@ import { withStateHandlers, lifecycle, compose } from 'recompose'
 
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
 
 import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
 
 import DashTeamItem from './DashTeamItem'
+import CreateTeamWrapper from './CreateTeamWrapper'
 
+import { checkGraphQLError } from '../../../utils/graphql-errors'
 import { isDefined, isString } from '../../../utils/js-helpers'
 import { getItem } from '../../../utils/local-storage'
 
-export const DashTeam = ({ user = null }) => {
-  console.log('DashTeam 1: ', user)
+export const DashTeam = ({ classes, user = null }) => {
   let owner
   let loader
   let authId = null
   if (user !== null && isString(user)) {
     owner = JSON.parse(user)
-    if (isDefined(owner.sub)) authId = owner.sub
+    if (isDefined(owner.authId)) authId = owner.authId
   } else {
     loader = (<Typography variant='caption'>Loading...</Typography>)
   }
 
-  console.log('DashTeam 2: ', owner, authId)
   if (authId === null) {
     return (
       <Grid item md={6}>
@@ -47,21 +49,30 @@ export const DashTeam = ({ user = null }) => {
           let errors
           let queryLoader
           if (error) {
-            errors = error.graphQLErrors.map(({ message }, i) => (
-              <Typography key={i} variant='caption'>{message}</Typography>
-            ))
+            errors = error.graphQLErrors.map(({ message }, i) => {
+              const displayMessage = checkGraphQLError(message)
+              return (
+                <Typography key={i} variant='caption'>{displayMessage}</Typography>
+              )
+            })
           }
           if (!loading) {
-            return (
-              <Grid container spacing={24}>
-                {!loading && data.teamsByOwner.edges.map(team => (
-                  <DashTeamItem key={team.id} />
-                ))}
-                {queryLoader}
-                {errors}
-                {loader}
-              </Grid>
-            )
+            if (data.teamsByOwner.edges.length > 0) {
+              return (
+                <Grid container spacing={24}>
+                  {!loading && data.teamsByOwner.edges.map(team => (
+                    <DashTeamItem key={team.id} />
+                  ))}
+                  {queryLoader}
+                  {errors}
+                  {loader}
+                </Grid>
+              )
+            } else {
+              return (
+                <CreateTeamWrapper />
+              )
+            }
           } else {
             return (
               <Grid container spacing={24}>
@@ -80,7 +91,8 @@ export const DashTeam = ({ user = null }) => {
 }
 
 DashTeam.propTypes = {
-  user: PropTypes.any
+  user: PropTypes.any,
+  classes: PropTypes.object.isRequired
 }
 
 const getUserOnMount = lifecycle({