fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: simplify to pass user info via props

Browse Source
This commit is contained in:
Barry Low committed 2018-09-17 12:40:02 -07:00
1 parent 54b735f9d5
commit 6ddfb7d0af
17 files changed
+186 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/graphql/teams/UpdateTeamProfileMutation.js
+12 -2
View File
@@ -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
client/src/views/common/MessageCard.js
+3 -1
View File
@@ -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>
client/src/views/dashboard/TeamMembers.js
+1 -1
View File
@@ -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' />
client/src/views/dashboard/components/CreateTeamDialog.js
+26 -15
View File
@@ -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) {
client/src/views/dashboard/components/DashTeam.js
+4 -1
View File
@@ -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 }) => {
client/src/views/dashboard/components/DashTeamItem.js
+4 -5
View File
@@ -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>
client/src/views/dashboard/components/DrawerLinks.js
+10 -2
View File
@@ -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>
client/src/views/dashboard/components/ManageTeamDelete.js
+31 -17
View File
@@ -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 })
}
}
client/src/views/dashboard/components/ManageTeamDetails.js
+15 -8
View File
@@ -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>
client/src/views/dashboard/components/ManageTeamEdit.js
+27 -7
View File
@@ -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 })
}
}
client/src/views/dashboard/components/ManageTeamsList.js
+7 -5
View File
@@ -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>
)
client/src/views/footer/index.js
+10 -2
View File
@@ -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>
client/src/views/index.js
+11 -1
View File
@@ -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
}
client/src/views/navbar/index.js
+10 -3
View File
@@ -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>
client/src/views/teams/components/TeamsDetails.js
+12 -8
View File
@@ -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>
client/src/views/teams/components/TeamsItem.js
+1 -1
View File
@@ -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>
client/src/views/teams/components/TeamsList.js
+2 -5
View File
@@ -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} />
)
}
})}