Solidify Dash Panel Queries and Mutations

api/src/index.js

@@ -58,7 +58,7 @@ const resolvers = {
     },
     async teamsByOwner(parent, { ownerId }, ctx, info) {
       console.log('teamsByOwner: ', ctx.user)
-      return ctx.db.query.teams({where: { owner: ownerId }}, TEAMS_FRAGMENT)
+      return ctx.db.query.teams({where: { owner: ownerId }, orderBy:'updatedAt_DESC'}, TEAMS_FRAGMENT)
     },
     async owner(parent, args, ctx, info) {
       console.log('resolver.query.owner ctx: ', ctxMember(ctx))

client/src/graphql/teams/DeleteTeamMutation.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-unused-vars */
 import gql from 'graphql-tag'
 
-export const DeleteTeamMutation = gql`
+export const DELETE_TEAM = gql`
   mutation deleteTeam($id: ID!) {
     deleteTeam(id: $id) {
       id
     }
   }
 `
+
+export default DELETE_TEAM

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Mutation } from 'react-apollo'
 
 import Typography from '@material-ui/core/Typography'
@@ -9,18 +10,19 @@ import { checkGraphQLError } from '../../../utils/graphql-errors'
 import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation'
 import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
 
-const CreateTeam = () => {
+const CreateTeam = ({ authId }) => {
   let input
+  console.log('CreateTeam', authId)
 
   return (
     <Mutation
       mutation={CREATE_TEAM}
-      update={(cache, { data: { createTeam } }) => {
-        const data = cache.readQuery({ query: GET_TEAMS_BY_OWNER })
-        console.log('Mutation cache update: ', createTeam, data)
-        data.getTeamsByOwner.push(createTeam)
-        cache.writeQuery({ query: GET_TEAMS_BY_OWNER, data })
-      }}
+      refetchQueries={[
+        {
+          query: GET_TEAMS_BY_OWNER,
+          variables: { authId }
+        }
+      ]}
     >
       {(createTeam, { loading, error, data }) => {
         let errors
@@ -62,11 +64,16 @@ const CreateTeam = () => {
   )
 }
 
+CreateTeam.propTypes = {
+  authId: PropTypes.any
+}
+
 const handleSubmit = async (e, createTeam, input) => {
   e.preventDefault()
   const currentUser = await getItem('user')
   let authId = JSON.parse(currentUser)
   authId = authId.authId
+  console.log('createTeam submit: ', authId)
   const name = input.value
   const slug = slugify(name)
   await createTeam({ variables: { name, slug, owner: authId } })

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

@@ -28,13 +28,13 @@ const styles = theme => ({
   }
 })
 
-const CreateTeamWrapper = ({ classes }) => (
+const CreateTeamWrapper = ({ classes, authId }) => (
   <Grid container spacing={24}>
     <Grid item>
       <Card className={classes.card}>
         <div className={classes.cardDetails}>
           <CardContent className={classes.createCardContent}>
-            <CreateTeam classes={classes} />
+            <CreateTeam classes={classes} authId={authId} />
           </CardContent>
         </div>
       </Card>
@@ -43,7 +43,8 @@ const CreateTeamWrapper = ({ classes }) => (
 )
 
 CreateTeamWrapper.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
+  authId: PropTypes.string
 }
 
 export default withStyles(styles)(CreateTeamWrapper)

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

@@ -27,7 +27,7 @@ export const DashTeam = ({ classes, user = null }) => {
   }
   console.log('DashTeam 2: ', owner, authId)
 
-  if (authId === null) {
+  if (authId === undefined || authId === null) {
     return (
       <Grid item md={6}>
         <Typography variant='display1' gutterBottom>
@@ -42,7 +42,7 @@ export const DashTeam = ({ classes, user = null }) => {
       <Typography variant='display1' gutterBottom>
         Teams
       </Typography>
-      <CreateTeamWrapper />
+      <CreateTeamWrapper authId={authId} />
       <Query query={GET_TEAMS_BY_OWNER} variables={{ authId }}>
         {({ loading, error, data }) => {
           console.log('GET_TEAMS_BY_OWNER: ', loading, error, data)

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

@@ -9,6 +9,8 @@ import CardMedia from '@material-ui/core/CardMedia'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 
+import ManageTeamDelete from './ManageTeamDelete'
+
 export const ManageTeamsItem = ({ classes, team }) => (
   <Grid item xs={12}>
     <Card className={classes.card}>
@@ -30,9 +32,7 @@ export const ManageTeamsItem = ({ classes, team }) => (
           <Button size='small' color='primary' className={classes.buttonRight}>
             Details
           </Button>
-          <Button size='small' color='primary' className={classes.buttonRight}>
-            Edit
-          </Button>
+          <ManageTeamDelete classes={classes} slug={team.slug} />
           <Button size='small' color='primary' className={classes.buttonRight}>
             Delete
           </Button>