Client Add Manage Actions

api/src/index.js

@@ -101,14 +101,14 @@ const resolvers = {
         })
     },
     async updateTeamProfile(parent, { slug, owner, description, motto, avatar }, ctx, info) {
-      return ctx.db.mutation.updateTeam({data:{profile: {update: {description: description, motto: motto, avatar: avatar}}}, where:{slug: slug}}), TEAMS_FRAGMENT)
+      return ctx.db.mutation.updateTeam({data:{profile: {update: {description: description, motto: motto, avatar: avatar}}}, where:{slug: slug}}, TEAMS_FRAGMENT)
         .catch((err) => {
           console.log('createTeam error: ', err)
           return err
         })
     },
-    async deleteTeam(parent, { id }, ctx, info) {
-      return ctx.db.mutation.deleteTeam({ where: { id } }, info)
+    async deleteTeam(parent, { slug }, ctx, info) {
+      return ctx.db.mutation.deleteTeam({ where: { slug } }, info)
         .catch((res) => {
           console.log('deleteTeam error: ', res)
           const errors = res.graphQLErrors.map((error) => {

api/src/schema.graphql

@@ -20,7 +20,7 @@ type Mutation {
   authenticate(idToken: String!): Member
   createTeam(name: String!, slug: String!, owner: String!): Team @isAuthenticated
   updateTeamProfile(slug: String!, owner: String!, description: String, motto: String, avatar: String): Team @isAuthenticated
-  deleteTeam(id: ID!): Team @isAuthenticated @isOwner(type: "Team")
+  deleteTeam(slug: String!): Team @isAuthenticated @isOwner(type: "Team")
 }
 
 input MemberProfileInput {

client/src/graphql/teams/UpdateTeamProfileMutation.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-unused-vars */
 import gql from 'graphql-tag'
 
-const CREATE_TEAM = gql`
-  mutation UpdateTeamMutation($slug: String!, $owner: String!, $description: String, $motto: String) {
-    createTeam(slug: $slug, owner: $owner, description: $description, motto: $motto) {
+const UPDATE_TEAM_PROFILE = gql`
+  mutation UpdateTeamProfileMutation($slug: String!, $owner: String!, $description: String, $motto: String) {
+    updateTeamProfile(slug: $slug, owner: $owner, description: $description, motto: $motto) {
       id
       name
       slug
@@ -31,4 +31,4 @@ const CREATE_TEAM = gql`
   }
 `
 
-export default CREATE_TEAM
+export default UPDATE_TEAM_PROFILE

client/src/views/dashboard/ManageTeams.js

@@ -17,9 +17,7 @@ const ManageTeams = ({ classes }) => (
     <Typography variant='display1' gutterBottom>
       Manage Your Teams
     </Typography>
-    <div className={classes.tableContainer}>
-      <ManageTeamsList />
-    </div>
+    <ManageTeamsList />
   </div>
 )
 

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

@@ -3,19 +3,16 @@ import PropTypes from 'prop-types'
 
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card'
-import CardActionArea from '@material-ui/core/CardActionArea'
 import CardActions from '@material-ui/core/CardActions'
 import CardContent from '@material-ui/core/CardContent'
 import CardMedia from '@material-ui/core/CardMedia'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 
-import { Link } from 'react-router-dom'
-
 export const ManageTeamsItem = ({ classes, team }) => (
-  <Grid item sm={6} md={4} lg={3}>
+  <Grid item xs={12}>
     <Card className={classes.card}>
-      <CardActionArea>
+      <div className={classes.cardDetails}>
         <CardMedia
           className={classes.cardMedia}
           image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' // eslint-disable-line max-len
@@ -26,23 +23,21 @@ export const ManageTeamsItem = ({ classes, team }) => (
             {team.name}
           </Typography>
           <Typography variant='caption' color='textSecondary'>
-            {team.createdAt}
-          </Typography>
-          <Typography variant='caption' paragraph gutterBottom>
-            Members: 1
-          </Typography>
-          <Typography variant='subheading' color='primary'>
-            Now recruiting!
+            {team.createdAt} | Members: {team.members.length}
           </Typography>
         </CardContent>
-      </CardActionArea>
-      <CardActions>
-        <Link to={`/teams/${team.slug}`} >
+        <CardActions>
           <Button size='small' color='primary' className={classes.buttonRight}>
             Details
           </Button>
-        </Link>
-      </CardActions>
+          <Button size='small' color='primary' className={classes.buttonRight}>
+            Edit
+          </Button>
+          <Button size='small' color='primary' className={classes.buttonRight}>
+            Delete
+          </Button>
+        </CardActions>
+      </div>
     </Card>
   </Grid>
 )

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

@@ -1,17 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Query } from 'react-apollo'
+import { withStateHandlers, lifecycle, compose } from 'recompose'
 
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
 import { withStyles } from '@material-ui/core/styles'
 
+import { isDefined, isString } from '../../../utils/js-helpers'
+import { getItem } from '../../../utils/local-storage'
+
 import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
 
-import { isEmpty } from '../../../utils/js-helpers'
-
 import ManageTeamsItem from './ManageTeamsItem'
-import ManageTeamsDetails from './ManageTeamsDetails'
 
 const styles = theme => ({
   heroContent: {
@@ -22,107 +23,107 @@ const styles = theme => ({
   cardGrid: {
     padding: `${theme.spacing.unit * 8}px 0`
   },
-  card: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  cardMedia: {
-    paddingTop: '56.25%' // 16:9
-  },
-  cardContent: {
-    flexGrow: 1
-  },
   buttonRight: {
     justifyContent: 'flex-end'
+  },
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 100,
+    height: 100,
+    maxWidth: 100,
+    justifyContent: 'flex-start'
   }
 })
 
-export const ManageTeamsList = ({ classes, match }) => (
-  <Query query={GET_TEAMS_BY_OWNER} fetchPolicy='cache-and-network' >
-    {({ loading, error, data }) => {
-      console.log('GET_TEAMS_BY_OWNER: ', loading, error, data, match)
-      let slug = null
-      if (!isEmpty(match.params) && match.params.slug) slug = match.params.slug
+export const ManageTeamsList = ({ classes, user = null }) => {
+  let owner
+  let authId = null
+  console.log('ManageTeamsList: ', user)
+  if (user !== null && isString(user)) {
+    owner = JSON.parse(user)
+    if (isDefined(owner.authId)) authId = owner.authId
+  }
+  console.log('ManageTeamsList 2: ', owner, authId)
 
-      let errors
-      let queryLoader
-      if (error) {
-        errors = error.graphQLErrors.map(({ message }, i) => {
-          return (
-            <Typography key={i} variant='caption'>
-              {message}
-            </Typography>
-          )
-        })
-      }
-      if (!loading && !error) {
-        if (data.teams.edges.length > 0) {
-          if (slug !== null) {
+  return (
+    <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
+        if (error) {
+          errors = error.graphQLErrors.map(({ message }, i) => {
             return (
-              <Grid container spacing={40}>
-                {!loading &&
-                  data.teams.edges.map(team => {
-                    if (team.node.slug === slug) {
-                      return (
-                        <ManageTeamsDetails
-                          key={team.node.id}
-                          team={team.node}
-                        />
-                      )
-                    }
-                  })}
-                {queryLoader}
-                {errors}
-              </Grid>
+              <Typography key={i} variant='caption'>
+                {message}
+              </Typography>
             )
-          } else {
+          })
+        }
+        if (!loading && !error) {
+          if (data.teamsByOwner.length > 0) {
             return (
               <React.Fragment>
-                <div className={classes.heroContent}>
-                  <Typography
-                    variant='display3'
-                    align='center'
-                    color='textPrimary'
-                    gutterBottom
-                  >
-                    Teams
-                  </Typography>
-                </div>
                 <Grid container spacing={40}>
                   {!loading &&
-                    data.teams.edges.map(team => (
+                    data.teamsByOwner.map(team => (
                       <ManageTeamsItem
-                        key={team.node.id}
-                        team={team.node}
+                        key={team.id}
+                        team={team}
                         classes={classes}
                       />
                     ))}
-                  {queryLoader}
                   {errors}
                 </Grid>
               </React.Fragment>
             )
           }
+        } else {
+          return (
+            <Grid container spacing={40}>
+              <Typography variant='subheading' gutterBottom>
+                Loading...
+              </Typography>
+              {errors}
+            </Grid>
+          )
         }
-      } else {
-        return (
-          <Grid container spacing={40}>
-            <Typography variant='subheading' gutterBottom>
-              Loading...
-            </Typography>
-            {queryLoader}
-            {errors}
-          </Grid>
-        )
-      }
-    }}
-  </Query>
-)
-
-ManageTeamsList.propTypes = {
-  classes: PropTypes.object.isRequired,
-  match: PropTypes.object
+      }}
+    </Query>
+  )
 }
 
-export default withStyles(styles)(ManageTeamsList)
+ManageTeamsList.propTypes = {
+  user: PropTypes.any,
+  classes: PropTypes.object.isRequired
+}
+
+const getUserOnMount = lifecycle({
+  componentDidMount () {
+    getItem('user').then(user => {
+      this.setState({ user })
+    }) // Set user to state
+  }
+})
+
+const mapStateToProps = withStateHandlers(() => ({ user: null }), {
+  user: ({ user }) => () => ({ user })
+})
+
+const ManageTeamsListAuthId = compose(
+  mapStateToProps,
+  getUserOnMount
+)(ManageTeamsList)
+
+export default withStyles(styles)(ManageTeamsListAuthId)