From 297fb407917df857298b5dd0beefbd2d6f89cba4 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Tue, 16 Oct 2018 08:50:18 -0700 Subject: [PATCH 1/8] Add TeamBar --- client/src/index.js | 26 +++++ client/src/views/common/components/TeamBar.js | 96 +++++++++++++++++++ client/src/views/common/index.js | 3 + client/src/views/index.js | 3 + 4 files changed, 128 insertions(+) create mode 100644 client/src/views/common/components/TeamBar.js create mode 100644 client/src/views/common/index.js diff --git a/client/src/index.js b/client/src/index.js index 9d4fb252a..69eae2f26 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -8,14 +8,40 @@ import { AcceptTeamInvite, Dashboard, Teams, + TeamBar, globalStyles } from './views' +import { getItem } from './utils/local-storage' + class App extends Component { + constructor (props) { + super(props) + this.state = { + user: null + } + } + + async componentDidMount () { + let user = await getItem('user') + + if (user !== null && user !== undefined && user !== 'undefined') { + user = JSON.parse(user) + this.setState({ user: user }) + } + } + render () { + let loggedIn + if (this.state.user !== null) { + loggedIn = () + } else { + loggedIn = '' + } return (
+ {loggedIn} diff --git a/client/src/views/common/components/TeamBar.js b/client/src/views/common/components/TeamBar.js new file mode 100644 index 000000000..ba3b0dce9 --- /dev/null +++ b/client/src/views/common/components/TeamBar.js @@ -0,0 +1,96 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles } from '@material-ui/core/styles' +import AppBar from '@material-ui/core/AppBar' +import Toolbar from '@material-ui/core/Toolbar' +import Typography from '@material-ui/core/Typography' +import IconButton from '@material-ui/core/IconButton' + +// icons +import UsersIcon from '@material-ui/icons/People' +import BrowseIcon from '@material-ui/icons/ImportContacts' +import SearchIcon from '@material-ui/icons/Search' +import ContactIcon from '@material-ui/icons/ContactMail' +import AboutIcon from '@material-ui/icons/FormatShapes' + +import { Link } from 'react-router-dom' + +const AboutLink = props => +const ContactLink = props => +const SearchLink = props => +const BrowseLink = props => +const HomeLink = props => + +const styles = { + root: { + flexGrow: 1 + }, + flex: { + flexGrow: 1, + marginLeft: 30 + }, + menuButton: { + marginLeft: -12, + marginRight: 20 + } +} + +class TeamBar extends Component { + render () { + const { classes, user } = this.props + console.log('TeamBar: ', user) + return ( +
+ + + + Manage Teams + + + + + + + + + + + + + + + + + + +
+ ) + } +} + +TeamBar.propTypes = { + classes: PropTypes.object.isRequired, + user: PropTypes.object +} + +export default withStyles(styles)(TeamBar) diff --git a/client/src/views/common/index.js b/client/src/views/common/index.js new file mode 100644 index 000000000..5c526115f --- /dev/null +++ b/client/src/views/common/index.js @@ -0,0 +1,3 @@ +import TeamBar from './components/TeamBar' + +export { TeamBar } diff --git a/client/src/views/index.js b/client/src/views/index.js index 07632c230..c4b272406 100644 --- a/client/src/views/index.js +++ b/client/src/views/index.js @@ -2,12 +2,15 @@ import Dashboard from './dashboard' import Teams from './teams' import AcceptTeamInvite from './teams/AcceptTeamInvite' +import { TeamBar } from './common' + import { theme, globalStyles } from './theme' export { AcceptTeamInvite, Dashboard, Teams, + TeamBar, theme, globalStyles } From 971bc163f36d8de54f3865805f8c9a97382e5b19 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Tue, 16 Oct 2018 08:52:57 -0700 Subject: [PATCH 2/8] Update graphql to teams namespace --- client/src/graphql/members/GetCurrentMemberQuery.js | 2 +- client/src/graphql/teams/CreateTeamMutation.js | 2 +- client/src/graphql/teams/DeleteTeamMutation.js | 2 +- client/src/graphql/teams/GetAzureSASMutation.js | 2 +- client/src/graphql/teams/GetTeamsByOwnerQuery.js | 2 +- client/src/graphql/teams/RemoveTeamMemberMutation.js | 2 +- client/src/graphql/teams/SendMemberInvite.js | 2 +- client/src/graphql/teams/SetTeamMemberRoleMutation.js | 2 +- client/src/graphql/teams/UniqueTeamnameQuery.js | 2 +- client/src/graphql/teams/UpdateFBMutation.js | 2 +- client/src/graphql/teams/UpdateTeamProfileMutation.js | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/client/src/graphql/members/GetCurrentMemberQuery.js b/client/src/graphql/members/GetCurrentMemberQuery.js index c92f74f17..18dfc7d6d 100644 --- a/client/src/graphql/members/GetCurrentMemberQuery.js +++ b/client/src/graphql/members/GetCurrentMemberQuery.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const GetCurrentMember = gql` query currentMember { - currentMember { + teams_CurrentMember { ...MemberInfo } } diff --git a/client/src/graphql/teams/CreateTeamMutation.js b/client/src/graphql/teams/CreateTeamMutation.js index da002d67a..66586982c 100644 --- a/client/src/graphql/teams/CreateTeamMutation.js +++ b/client/src/graphql/teams/CreateTeamMutation.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' const CREATE_TEAM = gql` mutation CreateTeamMutation($name: String!, $slug: String!, $botName: String!, $botSlug: String!) { - createTeam(name: $name, slug: $slug, botName: $botName, botSlug: $botSlug) { + teams_CreateTeam(name: $name, slug: $slug, botName: $botName, botSlug: $botSlug) { id name slug diff --git a/client/src/graphql/teams/DeleteTeamMutation.js b/client/src/graphql/teams/DeleteTeamMutation.js index 8e349c58a..0db2a7ad4 100644 --- a/client/src/graphql/teams/DeleteTeamMutation.js +++ b/client/src/graphql/teams/DeleteTeamMutation.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const DELETE_TEAM = gql` mutation deleteTeam($slug: String!) { - deleteTeam(slug: $slug) { + teams_DeleteTeam(slug: $slug) { id } } diff --git a/client/src/graphql/teams/GetAzureSASMutation.js b/client/src/graphql/teams/GetAzureSASMutation.js index abb9ffef3..506a53143 100644 --- a/client/src/graphql/teams/GetAzureSASMutation.js +++ b/client/src/graphql/teams/GetAzureSASMutation.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const GET_AZURE_SAS = gql` mutation getAzureSAS($teamSlug: String!) { - getAzureSAS(teamSlug: $teamSlug) + teams_GetAzureSAS(teamSlug: $teamSlug) } ` diff --git a/client/src/graphql/teams/GetTeamsByOwnerQuery.js b/client/src/graphql/teams/GetTeamsByOwnerQuery.js index f7f65cf42..adbb28c4a 100644 --- a/client/src/graphql/teams/GetTeamsByOwnerQuery.js +++ b/client/src/graphql/teams/GetTeamsByOwnerQuery.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const GET_TEAMS_BY_OWNER = gql` query teamsByOwnerQuery($authId: String!) { - teamsByOwner(ownerId: $authId) { + teams_TeamsByOwner(ownerId: $authId) { id name slug diff --git a/client/src/graphql/teams/RemoveTeamMemberMutation.js b/client/src/graphql/teams/RemoveTeamMemberMutation.js index 2abf62acd..26b9cda60 100644 --- a/client/src/graphql/teams/RemoveTeamMemberMutation.js +++ b/client/src/graphql/teams/RemoveTeamMemberMutation.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const REMOVE_TEAM_MEMBER = gql` mutation removeTeamMember($teamId: String!, $memberId: String!) { - removeTeamMember(teamId: $teamId, memberId: $memberId) { + teams_RemoveTeamMember(teamId: $teamId, memberId: $memberId) { id } } diff --git a/client/src/graphql/teams/SendMemberInvite.js b/client/src/graphql/teams/SendMemberInvite.js index 31f63a3fd..b18f0c93e 100644 --- a/client/src/graphql/teams/SendMemberInvite.js +++ b/client/src/graphql/teams/SendMemberInvite.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const SEND_MEMBER_INVITE = gql` mutation sendMemberInvite($email: String!, $teamId: String!) { - sendMemberInviteSG(email: $email, teamId: $teamId) + teams_SendMemberInviteSG(email: $email, teamId: $teamId) } ` diff --git a/client/src/graphql/teams/SetTeamMemberRoleMutation.js b/client/src/graphql/teams/SetTeamMemberRoleMutation.js index 283315275..560185ce9 100644 --- a/client/src/graphql/teams/SetTeamMemberRoleMutation.js +++ b/client/src/graphql/teams/SetTeamMemberRoleMutation.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const SET_TEAM_MEMBER_ROLE = gql` mutation setTeamMemberRole($teamId: String!, $memberId: String!, $role: String!) { - setTeamMemberRole(teamId: $teamId, memberId: $memberId, role: $role) { + teams_SetTeamMemberRole(teamId: $teamId, memberId: $memberId, role: $role) { id } } diff --git a/client/src/graphql/teams/UniqueTeamnameQuery.js b/client/src/graphql/teams/UniqueTeamnameQuery.js index c3be3ec8e..9f32df4f8 100644 --- a/client/src/graphql/teams/UniqueTeamnameQuery.js +++ b/client/src/graphql/teams/UniqueTeamnameQuery.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' export const UniqueTeamnameQuery = gql` query uniqueTeamname($name: String!) { - teamByName(name: $name) { + teams_TeamByName(name: $name) { name } } diff --git a/client/src/graphql/teams/UpdateFBMutation.js b/client/src/graphql/teams/UpdateFBMutation.js index c9ba2d8a2..b190dc2da 100644 --- a/client/src/graphql/teams/UpdateFBMutation.js +++ b/client/src/graphql/teams/UpdateFBMutation.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag' const UPDATE_FB = gql` mutation UpdateFBMutation($fbId: String!, $avatar: String) { - updateFB(fbId: $fbId, avatar: $avatar) { + teams_UpdateFB(fbId: $fbId, avatar: $avatar) { id name slug diff --git a/client/src/graphql/teams/UpdateTeamProfileMutation.js b/client/src/graphql/teams/UpdateTeamProfileMutation.js index 05a4ddb30..f26925aa7 100644 --- a/client/src/graphql/teams/UpdateTeamProfileMutation.js +++ b/client/src/graphql/teams/UpdateTeamProfileMutation.js @@ -9,7 +9,7 @@ const UPDATE_TEAM_PROFILE = gql` $avatar: String, $banner: String ) { - updateTeamProfile( + teams_UpdateTeamProfile( slug: $slug, description: $description, motto: $motto From c054855a1a3203e1b9f69b310601819144a58873 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Tue, 16 Oct 2018 23:33:27 -0700 Subject: [PATCH 3/8] Refactor dashboard to single views --- README.md | 1 + client/package-lock.json | 14 +- client/package.json | 2 +- client/src/index.js | 32 +- client/src/views/common/components/TeamBar.js | 127 +++++--- .../components/ManageFBEdit.js | 223 +++++++++++++ .../components/ManageFBItem.js | 53 ++++ .../components/ManageFBList.js | 139 ++++++++ client/src/views/financial-beings/index.js | 28 ++ client/src/views/index.js | 10 +- .../components/CreateTeamDialog.js | 262 +++++++++++++++ .../components/ManageTeamDelete.js | 156 +++++++++ .../components/ManageTeamDetails.js | 171 ++++++++++ .../manage-teams/components/ManageTeamEdit.js | 299 ++++++++++++++++++ .../components/ManageTeamMembersList.js | 142 +++++++++ .../components/ManageTeamsItem.js | 57 ++++ .../components/ManageTeamsList.js | 150 +++++++++ client/src/views/manage-teams/index.js | 28 ++ client/src/views/settings/index.js | 59 ++++ .../components/ManageMemberDelete.js | 152 +++++++++ .../components/ManageMemberRole.js | 169 ++++++++++ .../components/ManageMemberStatus.js | 99 ++++++ .../components/ManageMembersItem.js | 64 ++++ .../components/ManageMembersTeamItem.js | 116 +++++++ client/src/views/team-members/index.js | 30 ++ 25 files changed, 2515 insertions(+), 68 deletions(-) create mode 100644 client/src/views/financial-beings/components/ManageFBEdit.js create mode 100644 client/src/views/financial-beings/components/ManageFBItem.js create mode 100644 client/src/views/financial-beings/components/ManageFBList.js create mode 100644 client/src/views/financial-beings/index.js create mode 100644 client/src/views/manage-teams/components/CreateTeamDialog.js create mode 100644 client/src/views/manage-teams/components/ManageTeamDelete.js create mode 100644 client/src/views/manage-teams/components/ManageTeamDetails.js create mode 100644 client/src/views/manage-teams/components/ManageTeamEdit.js create mode 100644 client/src/views/manage-teams/components/ManageTeamMembersList.js create mode 100644 client/src/views/manage-teams/components/ManageTeamsItem.js create mode 100644 client/src/views/manage-teams/components/ManageTeamsList.js create mode 100644 client/src/views/manage-teams/index.js create mode 100644 client/src/views/settings/index.js create mode 100644 client/src/views/team-members/components/ManageMemberDelete.js create mode 100644 client/src/views/team-members/components/ManageMemberRole.js create mode 100644 client/src/views/team-members/components/ManageMemberStatus.js create mode 100644 client/src/views/team-members/components/ManageMembersItem.js create mode 100644 client/src/views/team-members/components/ManageMembersTeamItem.js create mode 100644 client/src/views/team-members/index.js diff --git a/README.md b/README.md index 2f6a73371..e63b81cc5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Advanced Algos Team Module +[![npm client version](https://badge.fury.io/js/%40advancedalgos%2Fteams-client.svg)](https://badge.fury.io/js/%40advancedalgos%2Fteams-client) ## Introduction diff --git a/client/package-lock.json b/client/package-lock.json index ed2d70581..ce7aff7cf 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@advancedalgos/web-components": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/@advancedalgos/web-components/-/web-components-0.0.10.tgz", - "integrity": "sha512-aYmA8HGkh+c2L1LuONfVQA2dHNHtKPctB0IdAOhElJBW4zaETrzQJkq0DHcZzDBGgbnafaX5ydq27Pm617K8Iw==", + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/@advancedalgos/web-components/-/web-components-0.0.12.tgz", + "integrity": "sha512-35VGOw4z+Bg8w8fJSjKpaucRSLcBhnlx2vQFOaZYYDPtyHeglqwbiFtWgksCcjEG4WrPO9HMnfc+WLJoFgm8Fg==", "requires": { "@azure/storage-blob": "^10.1.0-preview", "@material-ui/core": "^3.0.3", @@ -44,14 +44,6 @@ "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz", "integrity": "sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==" }, - "graphql": { - "version": "14.0.2", - "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.0.2.tgz", - "integrity": "sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==", - "requires": { - "iterall": "^1.2.2" - } - }, "ms-rest-js": { "version": "0.22.425", "resolved": "https://registry.npmjs.org/ms-rest-js/-/ms-rest-js-0.22.425.tgz", diff --git a/client/package.json b/client/package.json index 677c3a97e..5e17d159e 100644 --- a/client/package.json +++ b/client/package.json @@ -69,7 +69,7 @@ "workbox-cli": "^3.6.2" }, "dependencies": { - "@advancedalgos/web-components": "0.0.10", + "@advancedalgos/web-components": "0.0.12", "@azure/storage-blob": "^10.0.0-preview", "@material-ui/core": "^3.2.0", "@material-ui/icons": "^3.0.1", diff --git a/client/src/index.js b/client/src/index.js index 69eae2f26..efa96591d 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -6,7 +6,10 @@ import { hot } from 'react-hot-loader' import { withStyles } from '@material-ui/core/styles' import { AcceptTeamInvite, - Dashboard, + ManageTeams, + TeamMembers, + FinancialBeings, + Settings, Teams, TeamBar, globalStyles @@ -39,22 +42,37 @@ class App extends Component { loggedIn = '' } return ( - +
{loggedIn} - - + } + path='/teams/manage-teams' + render={props => } /> } + /> + } + /> + } + /> + } /> +
diff --git a/client/src/views/common/components/TeamBar.js b/client/src/views/common/components/TeamBar.js index ba3b0dce9..bc7bc405f 100644 --- a/client/src/views/common/components/TeamBar.js +++ b/client/src/views/common/components/TeamBar.js @@ -1,27 +1,28 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { withStyles } from '@material-ui/core/styles' +import classNames from 'classnames' import AppBar from '@material-ui/core/AppBar' import Toolbar from '@material-ui/core/Toolbar' import Typography from '@material-ui/core/Typography' -import IconButton from '@material-ui/core/IconButton' +import Button from '@material-ui/core/Button' // icons +import GroupIcon from '@material-ui/icons/Group' import UsersIcon from '@material-ui/icons/People' -import BrowseIcon from '@material-ui/icons/ImportContacts' import SearchIcon from '@material-ui/icons/Search' -import ContactIcon from '@material-ui/icons/ContactMail' -import AboutIcon from '@material-ui/icons/FormatShapes' +import AdbIcon from '@material-ui/icons/Adb' +import SettingsApplicationsIcon from '@material-ui/icons/SettingsApplications' import { Link } from 'react-router-dom' -const AboutLink = props => -const ContactLink = props => -const SearchLink = props => -const BrowseLink = props => -const HomeLink = props => +const SettingsLink = props => +const FBLink = props => +const MembersLink = props => +const ManageLink = props => +const ViewLink = props => -const styles = { +const styles = theme => ({ root: { flexGrow: 1 }, @@ -32,8 +33,30 @@ const styles = { menuButton: { marginLeft: -12, marginRight: 20 + }, + cssRoot: { + color: '#FFFFFF', + backgroundColor: theme.palette.secondary, + '&:hover': { + backgroundColor: theme.palette.dark + }, + whiteSpace: 'nowrap', + paddingRight: 2 * theme.spacing.unit, + paddingLeft: 2 * theme.spacing.unit + }, + button: { + margin: theme.spacing.unit + }, + leftIcon: { + marginRight: theme.spacing.unit + }, + rightIcon: { + marginLeft: theme.spacing.unit + }, + iconSmall: { + fontSize: 20 } -} +}) class TeamBar extends Component { render () { @@ -43,44 +66,54 @@ class TeamBar extends Component {
- + Manage Teams - - - - - - - - - - - - - - - + + + + +
diff --git a/client/src/views/financial-beings/components/ManageFBEdit.js b/client/src/views/financial-beings/components/ManageFBEdit.js new file mode 100644 index 000000000..ba150bc83 --- /dev/null +++ b/client/src/views/financial-beings/components/ManageFBEdit.js @@ -0,0 +1,223 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Mutation } from 'react-apollo' +import { withStyles } from '@material-ui/core/styles' + +import Button from '@material-ui/core/Button' +import EditIcon from '@material-ui/icons/Edit' +import TextField from '@material-ui/core/TextField' +import Dialog from '@material-ui/core/Dialog' +import DialogActions from '@material-ui/core/DialogActions' +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 { MessageCard, ImageUpload } from '@advancedalgos/web-components' + +import UPDATE_FB from '../../../graphql/teams/UpdateFBMutation' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' + +import { checkGraphQLError } from '../../../utils/graphql-errors' + +import GET_AZURE_SAS from '../../../graphql/teams/GetAzureSASMutation' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +export class ManageFBEdit extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.handleAvatar = this.handleAvatar.bind(this) + + const avatar = props.fb.avatar || '' + this.authId = props.authId + + this.state = { + open: false, + avatar: avatar + } + } + + render () { + console.log('ManageFBEdit ', this.props, this.props.slug, this.props.fb) + const { classes, fb, slug } = this.props + return ( + + {(updateFB, { loading, error, data }) => { + let errors + let loader + if (loading) { + loader = ( + Submitting team... + ) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + const displayMessage = checkGraphQLError(message) + console.log('updateTeamProfile error:', displayMessage) + return ( + + {message} + + ) + }) + } + return ( +
+ + +
+ + Edit Financial Being + + + + {(getAzureSAS, { loading, error, data }) => { + console.log('getAzureSAS: ', loading, error, data, fb) + const AzureStorageUrl = process.env.AZURE_STORAGE_URL + const containerName = slug + let AzureSASURL + if (!loading && data !== undefined) { + AzureSASURL = data.getAzureSAS + } else { + getAzureSAS({ variables: { teamSlug: containerName } }) + } + + let avatar = null + if (fb.avatar !== undefined && fb.avatar !== null) avatar = fb.avatar + if (this.state.avatar !== null) avatar = this.state.avatar + if (this.state.avatar === null && fb.avatar === undefined) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + + if (loading || data === undefined) { + return () + } else { + return ( + + Update Financial Beings's Avatar + + + ) + } + }} + + + {loader} + {errors} + + + + + +
+ +
+ ) + }} + + ) + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleAvatar (avatarUrl) { + console.log('handleAvatar: ', avatarUrl) + this.setState({ avatar: `${avatarUrl}?${Math.random()}` }) + } + + async handleSubmit (e, updateFB, fbId, slug) { + console.log('handleSubmit: ', this.state) + e.preventDefault() + + await updateFB({ + variables: { + fbId, + avatar: this.state.avatar + } + }) + this.setState({ open: false }) + } +} + +ManageFBEdit.propTypes = { + classes: PropTypes.object.isRequired, + slug: PropTypes.string.isRequired, + fb: PropTypes.object, + authId: PropTypes.string.isRequired +} + +export default withStyles(styles)(ManageFBEdit) diff --git a/client/src/views/financial-beings/components/ManageFBItem.js b/client/src/views/financial-beings/components/ManageFBItem.js new file mode 100644 index 000000000..26920ecff --- /dev/null +++ b/client/src/views/financial-beings/components/ManageFBItem.js @@ -0,0 +1,53 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Grid from '@material-ui/core/Grid' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import CardMedia from '@material-ui/core/CardMedia' +import Typography from '@material-ui/core/Typography' + +import ManageFBEdit from './ManageFBEdit' + +export const ManageFBItem = ({ classes, team, authId }) => { + console.log('ManageFBItem', team, team.fb[0], team.profile.avatar) + let avatar + if (team.fb[0].avatar !== undefined && team.fb[0].avatar !== 'a') { + avatar = team.fb[0].avatar + } else { + avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + } + return ( + + +
+ + + + {team.fb[0].name} + + + {team.fb[0].kind} + + + + + +
+ + + ) +} + +ManageFBItem.propTypes = { + classes: PropTypes.object.isRequired, + team: PropTypes.object.isRequired, + authId: PropTypes.string.isRequired +} + +export default ManageFBItem diff --git a/client/src/views/financial-beings/components/ManageFBList.js b/client/src/views/financial-beings/components/ManageFBList.js new file mode 100644 index 000000000..df0ab0d88 --- /dev/null +++ b/client/src/views/financial-beings/components/ManageFBList.js @@ -0,0 +1,139 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Query } from 'react-apollo' +import { withStateHandlers, lifecycle, compose } from 'recompose' + +import Grid from '@material-ui/core/Grid' +import { MessageCard } from '@advancedalgos/web-components' +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 ManageFBItem from './ManageFBItem' + +const styles = theme => ({ + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + 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 ManageFBList = ({ 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) + if (authId === undefined || authId === null) { + return ( + + + + + + ) + } else { + return ( + + {({ loading, error, data }) => { + console.log('GET_TEAMS_BY_OWNER: ', loading, error, data) + + let errors = null + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + return + }) + } + if (!loading && !error) { + if (data.teams_TeamsByOwner.length > 0) { + return ( + + + {!loading && + data.teams_TeamsByOwner.map(team => ( + + ))} + {errors} + + + ) + } + } else { + return ( + + + + {errors !== null && } + + + ) + } + }} + + ) + } +} + +ManageFBList.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 ManageFBListAuthId = compose( + mapStateToProps, + getUserOnMount +)(ManageFBList) + +export default withStyles(styles)(ManageFBListAuthId) diff --git a/client/src/views/financial-beings/index.js b/client/src/views/financial-beings/index.js new file mode 100644 index 000000000..fba9ce00d --- /dev/null +++ b/client/src/views/financial-beings/index.js @@ -0,0 +1,28 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Typography from '@material-ui/core/Typography' +import { withStyles } from '@material-ui/core/styles' + +import ManageFBList from './components/ManageFBList' + +const styles = theme => ({ + tableContainer: { + height: 320 + } +}) + +const FinancialBeings = ({ classes }) => ( +
+ + Financial Beings + + +
+) + +FinancialBeings.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(FinancialBeings) diff --git a/client/src/views/index.js b/client/src/views/index.js index c4b272406..13f2200ec 100644 --- a/client/src/views/index.js +++ b/client/src/views/index.js @@ -1,4 +1,7 @@ -import Dashboard from './dashboard' +import ManageTeams from './manage-teams' +import TeamMembers from './team-members' +import FinancialBeings from './financial-beings' +import Settings from './settings' import Teams from './teams' import AcceptTeamInvite from './teams/AcceptTeamInvite' @@ -8,7 +11,10 @@ import { theme, globalStyles } from './theme' export { AcceptTeamInvite, - Dashboard, + ManageTeams, + TeamMembers, + FinancialBeings, + Settings, Teams, TeamBar, theme, diff --git a/client/src/views/manage-teams/components/CreateTeamDialog.js b/client/src/views/manage-teams/components/CreateTeamDialog.js new file mode 100644 index 000000000..6da04291b --- /dev/null +++ b/client/src/views/manage-teams/components/CreateTeamDialog.js @@ -0,0 +1,262 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Mutation } from 'react-apollo' +import { withStyles } from '@material-ui/core/styles' + +import Button from '@material-ui/core/Button' +import AddIcon from '@material-ui/icons/Add' +import TextField from '@material-ui/core/TextField' +import FormControl from '@material-ui/core/FormControl' +import FormHelperText from '@material-ui/core/FormHelperText' +import Dialog from '@material-ui/core/Dialog' +import DialogActions from '@material-ui/core/DialogActions' +import DialogContent from '@material-ui/core/DialogContent' +import DialogTitle from '@material-ui/core/DialogTitle' +import Typography from '@material-ui/core/Typography' +import { isEmpty } from '../../../utils/js-helpers' + +import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' + +// import { checkGraphQLError } from '../../../utils/graphql-errors' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + dialogStyle: { + padding: '3em' + }, + textField: { + width: '60%', + marginLeft: '20%', + marginBottom: 10 + }, + buttonRight: { + // position: 'absolute', + // right: '3em' + marginTop: '1em', + marginRight: 'auto', + marginLeft: 'auto', + display: 'block', + lineHeight: '1em' + } +}) + +export class CreateTeamDialog extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.validate = this.validate.bind(this) + this.slugify = this.slugify.bind(this) + + this.state = { + open: false, + name: '', + botName: '', + nameError: '', + botNameError: '' + } + } + + render () { + const { classes, authId } = this.props + return ( + + {(createTeam, { loading, error, data }) => { + let errors + let loader = null + if (loading) { + loader = ( + Submitting team... + ) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + // const displayMessage = checkGraphQLError(message) + return ( + + {message} + + ) + }) + } + return ( +
+ + +
+ Create a Team + + + Create a name for your team + + {this.state.nameError !== '' && ( + {this.state.nameError} + )} +
+ Create a name for your teams bot. + + + (Temporary: In the future, creating multiple Financial Beings
+ will occur in a separate module) + + + {this.state.botNameError !== '' && ( + {this.state.botNameError} + )} + {error && {errors}} + {loader} + + + + + + +
+ +
+ ) + }} + + ) + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleChange (e) { + let id = e.target.id + let value = e.target.value + let error = this.validate({ id, value }) + switch (id) { + case 'name': + if (!isEmpty(error)) this.setState({ nameError: error }) + this.setState({ name: value }) + break + case 'botName': + if (!isEmpty(error)) this.setState({ botNameError: error }) + this.setState({ botName: value }) + break + default: + } + } + + async handleSubmit (e, createTeam, name, botName) { + e.preventDefault() + console.log('createTeam submit: ', name, botName) + const slug = this.slugify(name) + const botSlug = this.slugify(botName) + await createTeam({ variables: { name, slug, botName, botSlug } }) + this.setState({ name: '', open: false }) + } + + validate (data) { + const errors = {} + switch (data.id) { + case 'name': + if (data.value === '') { + this.setState({ nameError: 'Please enter a team name' }) + } else { + this.setState({ nameError: '' }) + } + break + case 'botName': + if (data.value === '') { + this.setState({ botNameError: 'Please enter a bot name' }) + } else { + this.setState({ botNameError: '' }) + } + break + default: + } + return errors + } + + slugify (string) { + const a = 'àáäâãåèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;' + const b = 'aaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------' + const p = new RegExp(a.split('').join('|'), 'g') + + return string + .toString() + .toLowerCase() + .replace(/\s+/g, '-') // Replace spaces with - + .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters + .replace(/&/g, '-and-') // Replace & with 'and' + .replace(/[^\w-]+/g, '') // Remove all non-word characters + .replace(/--+/g, '-') // Replace multiple - with single - + .replace(/^-+/, '') // Trim - from start of text + .replace(/-+$/, '') // Trim - from end of text + } +} + +CreateTeamDialog.propTypes = { + classes: PropTypes.object.isRequired, + authId: PropTypes.string +} + +export default withStyles(styles)(CreateTeamDialog) diff --git a/client/src/views/manage-teams/components/ManageTeamDelete.js b/client/src/views/manage-teams/components/ManageTeamDelete.js new file mode 100644 index 000000000..c4cb26614 --- /dev/null +++ b/client/src/views/manage-teams/components/ManageTeamDelete.js @@ -0,0 +1,156 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles } from '@material-ui/core/styles' +import { Mutation } from 'react-apollo' + +import Button from '@material-ui/core/Button' +import DeleteIcon from '@material-ui/icons/Delete' +import Dialog from '@material-ui/core/Dialog' +import DialogActions from '@material-ui/core/DialogActions' +import DialogContent from '@material-ui/core/DialogContent' +import DialogTitle from '@material-ui/core/DialogTitle' +import Typography from '@material-ui/core/Typography' + +import DELETE_TEAM from '../../../graphql/teams/DeleteTeamMutation' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' + +import { checkGraphQLError } from '../../../utils/graphql-errors' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +export class ManageTeamDelete extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + + this.state = { + open: false + } + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleChange (e) { + this.setState({ name: e.target.value }) + } + + render () { + console.log(this.props, this.props.slug) + const { classes, authId } = this.props + return ( + + {(deleteTeam, { loading, error, data }) => { + let errors + let loader + if (loading) { + loader = ( + Submitting team... + ) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + const displayMessage = checkGraphQLError(message) + console.log('createTeam error:', displayMessage) + return ( + + {message} + + ) + }) + } + return ( +
+ + +
+ + Delete Team Team + + + + DANGER - Deleting your team cannot be undone + + + Are you sure you want to delete this team? + + {loader} + {errors} + + + + + +
+ +
+ ) + }} + + ) + } + + async handleSubmit (e, deleteTeam, slug) { + e.preventDefault() + await deleteTeam({ variables: { slug } }) + this.setState({ open: false }) + } +} + +ManageTeamDelete.propTypes = { + classes: PropTypes.object.isRequired, + slug: PropTypes.string.isRequired, + authId: PropTypes.string.isRequired +} + +export default withStyles(styles)(ManageTeamDelete) diff --git a/client/src/views/manage-teams/components/ManageTeamDetails.js b/client/src/views/manage-teams/components/ManageTeamDetails.js new file mode 100644 index 000000000..2d5ff36f9 --- /dev/null +++ b/client/src/views/manage-teams/components/ManageTeamDetails.js @@ -0,0 +1,171 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles } from '@material-ui/core/styles' + +import Button from '@material-ui/core/Button' +import DetailsIcon from '@material-ui/icons/Details' +import Dialog from '@material-ui/core/Dialog' +import Typography from '@material-ui/core/Typography' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import CardActions from '@material-ui/core/CardActions' +import CardMedia from '@material-ui/core/CardMedia' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + card: { + display: 'flex', + width: '100%' + }, + cardDetails: { + display: 'flex', + flex: 1 + }, + cardContent: { + flex: 1 + }, + cardAvatarMedia: { + flex: 1, + width: 100, + height: 100, + maxWidth: 100, + justifyContent: 'flex-start' + }, + cardBannerMedia: { + flex: 1, + width: 600, + height: 150, + justifyContent: 'flex-start' + } +}) + +export class ManageTeamDetails extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + + this.state = { + open: false + } + } + + render () { + console.log(this.props.team) + const { classes } = this.props + const { name, members, profile, createdAt } = this.props.team + let avatar + let banner + if (profile.avatar !== undefined && profile.avatar !== null) { + avatar = profile.avatar + } else { + avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + } + if (profile.banner !== undefined && profile.banner !== null) { + banner = profile.banner + } else { + banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' + } + return ( +
+ + +
+ + + + {name} Team Details + + + + + {name} + + + {createdAt} + + + Motto: {profile.motto} + + + Description: {profile.description} + + + Members: {members.length} + + + Team Admin:  + {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 + } + } + })} + + + + + + +
+ +
+ ) + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } +} + +ManageTeamDetails.propTypes = { + classes: PropTypes.object.isRequired, + team: PropTypes.any +} + +export default withStyles(styles)(ManageTeamDetails) diff --git a/client/src/views/manage-teams/components/ManageTeamEdit.js b/client/src/views/manage-teams/components/ManageTeamEdit.js new file mode 100644 index 000000000..1cd164b24 --- /dev/null +++ b/client/src/views/manage-teams/components/ManageTeamEdit.js @@ -0,0 +1,299 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Mutation } from 'react-apollo' +import { withStyles } from '@material-ui/core/styles' + +import Button from '@material-ui/core/Button' +import EditIcon from '@material-ui/icons/Edit' +import TextField from '@material-ui/core/TextField' +import Dialog from '@material-ui/core/Dialog' +import DialogActions from '@material-ui/core/DialogActions' +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 { MessageCard, ImageUpload } from '@advancedalgos/web-components' + +import UPDATE_TEAM_PROFILE from '../../../graphql/teams/UpdateTeamProfileMutation' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' + +import { checkGraphQLError } from '../../../utils/graphql-errors' + +import GET_AZURE_SAS from '../../../graphql/teams/GetAzureSASMutation' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +export class ManageTeamEdit extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.handleAvatar = this.handleAvatar.bind(this) + this.handleBanner = this.handleBanner.bind(this) + + console.log('ManageTeamEdit', props.team) + const motto = props.team.profile.motto || '' + const description = props.team.profile.description || '' + const avatar = props.team.profile.avatar || '' + const banner = props.team.profile.banner || '' + this.authId = props.authId + + this.state = { + open: false, + motto: motto, + description: description, + avatar: avatar, + banner: banner + } + } + + render () { + console.log('ManageTeamEdit ', this.props, this.props.slug, this.props.team) + const { classes, team } = this.props + return ( + + {(updateTeamProfile, { loading, error, data }) => { + let errors + let loader + if (loading) { + loader = ( + Submitting team... + ) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + const displayMessage = checkGraphQLError(message) + console.log('updateTeamProfile error:', displayMessage) + return ( + + {message} + + ) + }) + } + return ( +
+ + +
+ + Edit Team Details + + + + {(getAzureSAS, { loading, error, data }) => { + console.log('getAzureSAS: ', loading, error, data, team.profile) + const AzureStorageUrl = process.env.AZURE_STORAGE_URL + const containerName = team.slug + let AzureSASURL + if (!loading && data !== undefined) { + AzureSASURL = data.getAzureSAS + } else { + getAzureSAS({ variables: { teamSlug: containerName } }) + } + + let avatar = null + if (team.profile !== null && team.profile.avatar !== undefined && team.profile.avatar !== null) avatar = team.profile.avatar + if (this.state.avatar !== null) avatar = this.state.avatar + if (this.state.avatar === null && team.profile !== null && team.profile.avatar === undefined) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + let banner = null + if (team.profile !== null && team.profile.banner !== undefined && team.profile.banner !== null) banner = team.profile.banner + if (this.state.banner !== null) banner = this.state.banner + if (this.state.banner === null && team.profile !== null && team.profile.banner === undefined) banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' + console.log('team images: ', avatar, banner) + + if (loading || data === undefined) { + return () + } else { + return ( + + + + + ) + } + }} + + + + Team description: + + {loader} + {errors} + + + + + +
+ +
+ ) + }} + + ) + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleChange (e) { + switch (e.target.id) { + case 'motto': + this.setState({ motto: e.target.value }) + break + case 'description': + this.setState({ description: e.target.value }) + break + default: + } + } + + handleAvatar (avatarUrl) { + console.log('handleAvatar: ', avatarUrl) + this.setState({ avatar: `${avatarUrl}?${Math.random()}` }) + } + + handleBanner (bannerUrl) { + console.log('handleBanner: ', bannerUrl) + this.setState({ banner: `${bannerUrl}?${Math.random()}` }) + } + + async handleSubmit (e, updateTeamProfile, slug) { + console.log('handleSubmit: ', this.state) + e.preventDefault() + + await updateTeamProfile({ + variables: { + slug, + owner: this.authId, + description: this.state.description, + motto: this.state.motto, + avatar: this.state.avatar, + banner: this.state.banner + } + }) + this.setState({ description: '', motto: '', open: false }) + } +} + +ManageTeamEdit.propTypes = { + classes: PropTypes.object.isRequired, + slug: PropTypes.string.isRequired, + team: PropTypes.object, + authId: PropTypes.string.isRequired +} + +export default withStyles(styles)(ManageTeamEdit) diff --git a/client/src/views/manage-teams/components/ManageTeamMembersList.js b/client/src/views/manage-teams/components/ManageTeamMembersList.js new file mode 100644 index 000000000..ab76199d8 --- /dev/null +++ b/client/src/views/manage-teams/components/ManageTeamMembersList.js @@ -0,0 +1,142 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Query } from 'react-apollo' +import { withStateHandlers, lifecycle, compose } from 'recompose' + +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 ManageMembersTeamItem from './ManageMembersTeamItem' +import { MessageCard } from '@advancedalgos/web-components' + +const styles = theme => ({ + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + 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 ManageTeamMembersList = ({ 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) + if (authId === undefined || authId === null) { + return ( + + + + + + ) + } else { + return ( + + {({ loading, error, data }) => { + console.log('GET_TEAMS_BY_OWNER: ', loading, error, data) + let errors = null + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + return + }) + } + if (!loading && !error) { + if (data.teams_TeamsByOwner.length > 0) { + return ( + + + {!loading && + data.teams_TeamsByOwner.map(team => ( + + )) + } + {errors} + + + ) + } else { + return ( + + + + + + ) + } + } else { + return ( + + + + {errors !== null && } + + + ) + } + }} + + ) + } +} + +ManageTeamMembersList.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 ManageTeamMembersListAuthId = compose( + mapStateToProps, + getUserOnMount +)(ManageTeamMembersList) + +export default withStyles(styles)(ManageTeamMembersListAuthId) diff --git a/client/src/views/manage-teams/components/ManageTeamsItem.js b/client/src/views/manage-teams/components/ManageTeamsItem.js new file mode 100644 index 000000000..9360b74c7 --- /dev/null +++ b/client/src/views/manage-teams/components/ManageTeamsItem.js @@ -0,0 +1,57 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Grid from '@material-ui/core/Grid' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import CardMedia from '@material-ui/core/CardMedia' +import Typography from '@material-ui/core/Typography' + +import ManageTeamDetails from './ManageTeamDetails' +import ManageTeamDelete from './ManageTeamDelete' +import ManageTeamEdit from './ManageTeamEdit' + +export const ManageTeamsItem = ({ classes, team, authId }) => { + console.log('ManageTeamsItem', team, team.profile, team.profile.avatar) + let avatar + if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') { + avatar = team.profile.avatar + } else { + avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + } + return ( + + +
+ + + + {team.name} + + + {team.createdAt} | Members: {team.members.length} + + + + + + + +
+ + + ) +} + +ManageTeamsItem.propTypes = { + classes: PropTypes.object.isRequired, + team: PropTypes.object.isRequired, + authId: PropTypes.string.isRequired +} + +export default ManageTeamsItem diff --git a/client/src/views/manage-teams/components/ManageTeamsList.js b/client/src/views/manage-teams/components/ManageTeamsList.js new file mode 100644 index 000000000..2f217fb0c --- /dev/null +++ b/client/src/views/manage-teams/components/ManageTeamsList.js @@ -0,0 +1,150 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Query } from 'react-apollo' +import { withStateHandlers, lifecycle, compose } from 'recompose' + +import Grid from '@material-ui/core/Grid' +import { MessageCard } from '@advancedalgos/web-components' +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 ManageTeamsItem from './ManageTeamsItem' +import CreateTeamDialog from './CreateTeamDialog' + +const styles = theme => ({ + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + 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, 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) + if (authId === undefined || authId === null) { + return ( + + + + + + ) + } else { + return ( + + {({ loading, error, data }) => { + console.log('GET_TEAMS_BY_OWNER: ', loading, error, data) + + let errors = null + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + return + }) + } + if (!loading && !error) { + if (data.teams_TeamsByOwner.length > 0) { + return ( + + + {!loading && + data.teams_TeamsByOwner.map(team => ( + + ))} + {errors} + + + ) + } else { + return ( + + + + + + + + ) + } + } else { + return ( + + + + {errors !== null && } + + + ) + } + }} + + ) + } +} + +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) diff --git a/client/src/views/manage-teams/index.js b/client/src/views/manage-teams/index.js new file mode 100644 index 000000000..e6582254f --- /dev/null +++ b/client/src/views/manage-teams/index.js @@ -0,0 +1,28 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Typography from '@material-ui/core/Typography' +import { withStyles } from '@material-ui/core/styles' + +import ManageTeamsList from './components/ManageTeamsList' + +const styles = theme => ({ + tableContainer: { + height: 320 + } +}) + +const ManageTeams = ({ classes }) => ( +
+ + Manage Your Teams + + +
+) + +ManageTeams.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(ManageTeams) diff --git a/client/src/views/settings/index.js b/client/src/views/settings/index.js new file mode 100644 index 000000000..4dee030b3 --- /dev/null +++ b/client/src/views/settings/index.js @@ -0,0 +1,59 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Typography from '@material-ui/core/Typography' +import { withStyles } from '@material-ui/core/styles' + +import Grid from '@material-ui/core/Grid' +import { MessageCard } from '@advancedalgos/web-components' + +const styles = theme => ({ + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + 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 Settings = ({ classes }) => ( + + + + Settings + +
+ +
+ + +) + +Settings.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(Settings) diff --git a/client/src/views/team-members/components/ManageMemberDelete.js b/client/src/views/team-members/components/ManageMemberDelete.js new file mode 100644 index 000000000..cc75e3df1 --- /dev/null +++ b/client/src/views/team-members/components/ManageMemberDelete.js @@ -0,0 +1,152 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles } from '@material-ui/core/styles' +import { Mutation } from 'react-apollo' + +import Button from '@material-ui/core/Button' +import PersonAddDisabledIcon from '@material-ui/icons/PersonAddDisabled' +import Dialog from '@material-ui/core/Dialog' +import DialogActions from '@material-ui/core/DialogActions' +import DialogContent from '@material-ui/core/DialogContent' +import DialogTitle from '@material-ui/core/DialogTitle' +import Typography from '@material-ui/core/Typography' + +import REMOVE_TEAM_MEMBER from '../../../graphql/teams/RemoveTeamMemberMutation' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' + +import { checkGraphQLError } from '../../../utils/graphql-errors' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +export class ManageMemberDelete extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + + this.state = { + open: false + } + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleChange (e) { + this.setState({ name: e.target.value }) + } + + render () { + console.log(this.props, this.props.teamId) + const { classes, teamId, authId } = this.props + return ( + + {(deleteTeam, { loading, error, data }) => { + let errors + let loader + if (loading) { + loader = ( + Submitting team... + ) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + const displayMessage = checkGraphQLError(message) + console.log('createTeam error:', displayMessage) + return ( + + {message} + + ) + }) + } + return ( + + + +
+ + Remove Team Member + + + + DANGER - Removing your team cannot be undone + + + Are you sure you want to remove this team member? + + {loader} + {errors} + + + + + +
+ + + ) + }} + + ) + } + + async handleSubmit (e, deleteTeam, teamId, memberId) { + e.preventDefault() + await deleteTeam({ variables: { teamId, memberId } }) + this.setState({ open: false }) + } +} + +ManageMemberDelete.propTypes = { + classes: PropTypes.object.isRequired, + teamId: PropTypes.string.isRequired, + authId: PropTypes.string +} + +export default withStyles(styles)(ManageMemberDelete) diff --git a/client/src/views/team-members/components/ManageMemberRole.js b/client/src/views/team-members/components/ManageMemberRole.js new file mode 100644 index 000000000..f428ebbb6 --- /dev/null +++ b/client/src/views/team-members/components/ManageMemberRole.js @@ -0,0 +1,169 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles } from '@material-ui/core/styles' +import { Mutation } from 'react-apollo' + +import Button from '@material-ui/core/Button' +import AssignmentIndIcon from '@material-ui/icons/AssignmentInd' +import Dialog from '@material-ui/core/Dialog' +import DialogActions from '@material-ui/core/DialogActions' +import DialogContent from '@material-ui/core/DialogContent' +import DialogTitle from '@material-ui/core/DialogTitle' +import Typography from '@material-ui/core/Typography' +import TextField from '@material-ui/core/TextField' +import MenuItem from '@material-ui/core/MenuItem' + +import SET_TEAM_MEMBER_ROLE from '../../../graphql/teams/SetTeamMemberRoleMutation' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' + +import { checkGraphQLError } from '../../../utils/graphql-errors' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +const roles = [ + { role: 'Admin' }, + { role: 'Member' } +] + +export class ManageMemberRole extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + + this.state = { + open: false, + role: '' + } + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleChange (e) { + this.setState({ name: e.target.value }) + } + + render () { + console.log(this.props, this.props.teamId) + const { classes, teamId, authId } = this.props + return ( + + {(setTeamMemberRole, { loading, error, data }) => { + let errors + let loader + if (loading) { + loader = ( + Submitting team... + ) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + const displayMessage = checkGraphQLError(message) + console.log('createTeam error:', displayMessage) + return ( + + {message} + + ) + }) + } + return ( + + + +
+ + Set Team Member Role + + + + Admin members can approve new team members, send team invitations, and remove team members. + + this.setState({ role: e.target.value })} + fullWidth + > + {roles.map(role => ( + {role.role} + ))} + + {loader} + {errors} + + + + + +
+ + + ) + }} + + ) + } + + async handleSubmit (e, setTeamMemberRole, teamId, authId) { + e.preventDefault() + const role = this.state.role + await setTeamMemberRole({ variables: { teamId, memberId: authId, role: role } }) + this.setState({ open: false }) + } +} + +ManageMemberRole.propTypes = { + classes: PropTypes.object.isRequired, + teamId: PropTypes.string.isRequired, + authId: PropTypes.string.isRequired +} + +export default withStyles(styles)(ManageMemberRole) diff --git a/client/src/views/team-members/components/ManageMemberStatus.js b/client/src/views/team-members/components/ManageMemberStatus.js new file mode 100644 index 000000000..fba5880ee --- /dev/null +++ b/client/src/views/team-members/components/ManageMemberStatus.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles } from '@material-ui/core/styles' + +import Button from '@material-ui/core/Button' +import HistoryIcon from '@material-ui/icons/History' +import Dialog from '@material-ui/core/Dialog' +import Typography from '@material-ui/core/Typography' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import CardActions from '@material-ui/core/CardActions' + +const styles = theme => ({ + dialogContainer: { + display: 'block', + margin: '3em', + minWidth: 400 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +export class ManageMemberStatus extends Component { + constructor (props) { + super(props) + + this.handleClickOpen = this.handleClickOpen.bind(this) + this.handleClose = this.handleClose.bind(this) + + this.state = { + open: false, + role: '' + } + } + + handleClickOpen () { + this.setState({ open: true }) + } + + handleClose () { + this.setState({ open: false }) + } + + handleChange (e) { + this.setState({ name: e.target.value }) + } + + render () { + console.log(this.props, this.props.status) + const { classes, status } = this.props + return ( +
+ + +
+ + + + Member Status Details + + {status !== null && status.map(stat => { + return ( + + {stat.status} | {stat.reason} | {stat.createdAt} + + ) + })} + + + + + +
+ +
+ ) + } +} + +ManageMemberStatus.propTypes = { + classes: PropTypes.object.isRequired, + status: PropTypes.array +} + +export default withStyles(styles)(ManageMemberStatus) diff --git a/client/src/views/team-members/components/ManageMembersItem.js b/client/src/views/team-members/components/ManageMembersItem.js new file mode 100644 index 000000000..daad67f3e --- /dev/null +++ b/client/src/views/team-members/components/ManageMembersItem.js @@ -0,0 +1,64 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Grid from '@material-ui/core/Grid' +import Typography from '@material-ui/core/Typography' + +import ManageMemberDelete from './ManageMemberDelete' +import ManageMemberRole from './ManageMemberRole' +import ManageMemberStatus from './ManageMemberStatus' +import { MessageCard } from '@advancedalgos/web-components' + +export const ManageMembersItem = ({ classes, member, teamId, authId }) => { + console.log('ManageMembersItem', member) + let profile = null + let email = null + let memberStatus = null + if (member.member !== null) { + profile = member.member + } + if (member.member === null && member.email !== null) { + email = member.email + } + if (member.status.length > 0) memberStatus = member.status + if (profile !== null || email !== null) { + return ( + + + + {profile !== null ? profile.alias : email} + + + + + {email !== null ? `${memberStatus[memberStatus.length - 1].status} | Sent: ${memberStatus[memberStatus.length - 1].createdAt}` : `${member.role} | Member since: `} + + + + { profile !== null && member.role !== 'OWNER' && ( + + )} + {(email !== null || member.role !== 'OWNER') && ( + + )} + {(email !== null || member.role !== 'OWNER') && ( + + )} + + + ) + } else { + return ( + + ) + } +} + +ManageMembersItem.propTypes = { + classes: PropTypes.object.isRequired, + member: PropTypes.object.isRequired, + teamId: PropTypes.string.isRequired, + authId: PropTypes.string.isRequired +} + +export default ManageMembersItem diff --git a/client/src/views/team-members/components/ManageMembersTeamItem.js b/client/src/views/team-members/components/ManageMembersTeamItem.js new file mode 100644 index 000000000..f8bdbf102 --- /dev/null +++ b/client/src/views/team-members/components/ManageMembersTeamItem.js @@ -0,0 +1,116 @@ +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 CardMedia from '@material-ui/core/CardMedia' +import Typography from '@material-ui/core/Typography' + +import InviteMemberDialog from './InviteMemberDialog' +import ManageMembersItem from './ManageMembersItem' +import { MessageCard } from '@advancedalgos/web-components' + +const styles = theme => ({ + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + 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' + }, + cardMemberMedia: { + flex: 1, + width: 36, + height: 36, + maxWidth: 36, + justifyContent: 'flex-start' + }, + memberContainer: { + margin: 10, + padding: 6 + } +}) + +export const ManageMembersTeamItem = ({ classes, team, authId }) => { + console.log('ManageMembersItem', team, team.profile, team.profile.avatar) + let avatar + if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') { + avatar = team.profile.avatar + } else { + avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + } + if (team.members.length > 0) { + return ( + + + +
+ + + + + + + + {team.name} + + + + + + + {team.members.length > 0 && team.members.map((member, index) => ( + + ))} + +
+ + + + ) + } else { + return + } +} + +ManageMembersTeamItem.propTypes = { + classes: PropTypes.object.isRequired, + team: PropTypes.object.isRequired, + authId: PropTypes.string.isRequired +} + +export default withStyles(styles)(ManageMembersTeamItem) diff --git a/client/src/views/team-members/index.js b/client/src/views/team-members/index.js new file mode 100644 index 000000000..7c450150f --- /dev/null +++ b/client/src/views/team-members/index.js @@ -0,0 +1,30 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Typography from '@material-ui/core/Typography' +import { withStyles } from '@material-ui/core/styles' + +// import ManageTeamMembersList from './components/ManageTeamMembersList' +import { MessageCard } from '@advancedalgos/web-components' + +const styles = theme => ({ + tableContainer: { + height: 320 + } +}) + +const TeamMembers = ({ classes }) => ( +
+ + Team Members + + + +
+) + +TeamMembers.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(TeamMembers) From 2f59d2a3fbe435c0e6fb7f3d5ed78ee07e0bc450 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Wed, 17 Oct 2018 00:53:23 -0700 Subject: [PATCH 4/8] Fix nested routing --- client/src/index.js | 15 ++++++------ client/src/views/common/components/TeamBar.js | 24 ++++++++++++------- .../manage-teams/components/ManageTeamEdit.js | 17 +++++++------ .../views/teams/components/TeamsDetails.js | 2 +- .../src/views/teams/components/TeamsItem.js | 4 ++-- package-lock.json | 5 ++++ 6 files changed, 41 insertions(+), 26 deletions(-) create mode 100644 package-lock.json diff --git a/client/src/index.js b/client/src/index.js index efa96591d..8f5d8aa70 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -35,9 +35,10 @@ class App extends Component { } render () { + const { match } = this.props let loggedIn if (this.state.user !== null) { - loggedIn = () + loggedIn = () } else { loggedIn = '' } @@ -46,30 +47,30 @@ class App extends Component {
{loggedIn} - + } /> } /> } /> } /> } /> diff --git a/client/src/views/common/components/TeamBar.js b/client/src/views/common/components/TeamBar.js index bc7bc405f..b51f22e13 100644 --- a/client/src/views/common/components/TeamBar.js +++ b/client/src/views/common/components/TeamBar.js @@ -19,7 +19,7 @@ import { Link } from 'react-router-dom' const SettingsLink = props => const FBLink = props => const MembersLink = props => -const ManageLink = props => +const ManageLink = props => const ViewLink = props => const styles = theme => ({ @@ -60,8 +60,8 @@ const styles = theme => ({ class TeamBar extends Component { render () { - const { classes, user } = this.props - console.log('TeamBar: ', user) + const { classes, user, match } = this.props + console.log('TeamBar: ', user, match) return (
@@ -74,7 +74,8 @@ class TeamBar extends Component { size='small' className={classNames(classes.button, classes.cssRoot)} title='View all teams' - component={ViewLink} > + component={ViewLink} + to={`${match.url}`}> All Teams @@ -83,7 +84,8 @@ class TeamBar extends Component { size='small' className={classNames(classes.button, classes.cssRoot)} title='Manage your teams' - component={ManageLink} > + component={ManageLink} + to={`${match.url}/manage-teams`}> Your Teams @@ -92,7 +94,8 @@ class TeamBar extends Component { size='small' className={classNames(classes.button, classes.cssRoot)} title='Manage team members' - component={MembersLink} > + component={MembersLink} + to={`${match.url}/team-members`}> Team Members @@ -101,7 +104,8 @@ class TeamBar extends Component { size='small' className={classNames(classes.button, classes.cssRoot)} title='Manage Financial Beings' - component={FBLink} > + component={FBLink} + to={`${match.url}/financial-beings`}> Financial Beings @@ -110,7 +114,8 @@ class TeamBar extends Component { size='small' className={classNames(classes.button, classes.cssRoot)} title='Manage Financial Beings' - component={SettingsLink} > + component={SettingsLink} + to={`${match.url}/settings`}> Settings @@ -123,7 +128,8 @@ class TeamBar extends Component { TeamBar.propTypes = { classes: PropTypes.object.isRequired, - user: PropTypes.object + user: PropTypes.object, + match: PropTypes.object } export default withStyles(styles)(TeamBar) diff --git a/client/src/views/manage-teams/components/ManageTeamEdit.js b/client/src/views/manage-teams/components/ManageTeamEdit.js index 1cd164b24..c49131db5 100644 --- a/client/src/views/manage-teams/components/ManageTeamEdit.js +++ b/client/src/views/manage-teams/components/ManageTeamEdit.js @@ -47,8 +47,8 @@ export class ManageTeamEdit extends Component { console.log('ManageTeamEdit', props.team) const motto = props.team.profile.motto || '' const description = props.team.profile.description || '' - const avatar = props.team.profile.avatar || '' - const banner = props.team.profile.banner || '' + const avatar = props.team.profile.avatar || null + const banner = props.team.profile.banner || null this.authId = props.authId this.state = { @@ -119,19 +119,20 @@ export class ManageTeamEdit extends Component { const containerName = team.slug let AzureSASURL if (!loading && data !== undefined) { - AzureSASURL = data.getAzureSAS + AzureSASURL = data.teams_GetAzureSAS } else { getAzureSAS({ variables: { teamSlug: containerName } }) } let avatar = null + if (this.state.avatar === null && team.profile !== null && (team.profile.avatar === undefined || team.profile.avatar === null)) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' if (team.profile !== null && team.profile.avatar !== undefined && team.profile.avatar !== null) avatar = team.profile.avatar if (this.state.avatar !== null) avatar = this.state.avatar - if (this.state.avatar === null && team.profile !== null && team.profile.avatar === undefined) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + let banner = null + if (this.state.banner === null && team.profile !== null && (team.profile.banner === undefined || team.profile.banner === null)) banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' if (team.profile !== null && team.profile.banner !== undefined && team.profile.banner !== null) banner = team.profile.banner if (this.state.banner !== null) banner = this.state.banner - if (this.state.banner === null && team.profile !== null && team.profile.banner === undefined) banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' console.log('team images: ', avatar, banner) if (loading || data === undefined) { @@ -145,7 +146,8 @@ export class ManageTeamEdit extends Component { fileName={`${team.slug}-banner.jpg`} containerName={containerName} existingImage={banner} - cropContainer={{ x: 10, y: 10, width: 800, height: 200 }} + imagePreviewConfig={{ width: 450, title: 'Change Banner' }} + cropContainerConfig={{ x: 10, y: 10, width: 800, height: 200 }} cropPreviewBox={{ width: 650, height: 200 }} saveImageConfig={{ quality: 0.6, @@ -165,7 +167,8 @@ export class ManageTeamEdit extends Component { fileName={`${team.slug}-avatar.jpg`} containerName={containerName} existingImage={avatar} - cropContainer={{ x: 10, y: 10, width: 200, height: 200 }} + imagePreviewConfig={{ width: 200, title: 'Change Avatar' }} + cropContainerConfig={{ x: 10, y: 10, width: 200, height: 200 }} cropPreviewBox={{ width: 350, height: 350 }} saveImageConfig={{ quality: 0.6, diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js index f61366841..7f91302dd 100644 --- a/client/src/views/teams/components/TeamsDetails.js +++ b/client/src/views/teams/components/TeamsDetails.js @@ -74,8 +74,8 @@ const TeamsDetails = ({ classes, team }) => {
+ ← Back to all teams
- ← Back to all teams {team.name} {team.name} export const TeamsItem = ({ classes, team }) => { /* let avatar if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') { @@ -50,7 +50,7 @@ export const TeamsItem = ({ classes, team }) => { - + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..e5e010a59 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "AATeamModule", + "version": "2.0.1", + "lockfileVersion": 1 +} From 4d87e353e8223fff823ea381bbb5aa84a4050ee5 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Wed, 17 Oct 2018 11:47:29 -0700 Subject: [PATCH 5/8] Fix team images for Master App --- api/src/graphql/TeamsFragment.js | 1 + api/src/index.js | 12 ++++---- client/package-lock.json | 2 +- client/package.json | 2 +- client/src/graphql/fbs/AddAlgobotMutation.js | 17 ----------- .../src/graphql/fbs/DeleteAlgobotMutation.js | 10 ------- client/src/graphql/fbs/GetAlgobotQuery.js | 19 ------------ client/src/graphql/fbs/GetAllAlgobotsQuery.js | 29 ------------------- .../src/graphql/fbs/UniqueAlgobotnameQuery.js | 10 ------- .../graphql/members/GetUserByAuthIDQuery.js | 25 ---------------- client/src/graphql/members/index.js | 3 +- .../manage-teams/components/ManageTeamEdit.js | 11 +++---- .../components/ManageTeamsItem.js | 4 +-- .../components/ManageTeamsList.js | 3 +- client/src/views/manage-teams/index.js | 4 +-- .../views/teams/components/TeamsDetails.js | 4 +-- .../src/views/teams/components/TeamsList.js | 6 ++++ 17 files changed, 30 insertions(+), 132 deletions(-) delete mode 100644 client/src/graphql/fbs/AddAlgobotMutation.js delete mode 100644 client/src/graphql/fbs/DeleteAlgobotMutation.js delete mode 100644 client/src/graphql/fbs/GetAlgobotQuery.js delete mode 100644 client/src/graphql/fbs/GetAllAlgobotsQuery.js delete mode 100644 client/src/graphql/fbs/UniqueAlgobotnameQuery.js delete mode 100644 client/src/graphql/members/GetUserByAuthIDQuery.js diff --git a/api/src/graphql/TeamsFragment.js b/api/src/graphql/TeamsFragment.js index c440139bd..442829e3c 100644 --- a/api/src/graphql/TeamsFragment.js +++ b/api/src/graphql/TeamsFragment.js @@ -13,6 +13,7 @@ const TEAMS_FRAGMENT = gql`{ createdAt profile { avatar + banner description motto updatedAt diff --git a/api/src/index.js b/api/src/index.js index aecdb8fb5..db637cf06 100644 --- a/api/src/index.js +++ b/api/src/index.js @@ -162,13 +162,13 @@ const resolvers = { async createTeam(parent, { name, slug, botName, botSlug }, ctx, info) { console.log('createTeam ctx:', ctx.request.user) const authId = ctx.request.user.sub - const encodedAuthId = encodeURI(`:"${authId}"`) - const encodedURL = `https://users-api.advancedalgos.net/graphql?query=%7B%0A%20%20userByAuthId(authId${encodedAuthId})%7B%0A%20%20%20%20id%0A%09%09email%0A%20%20%20%20alias%0A%20%20%7D%0A%7D` + const encodedAuthId = encodeURI(authId) + const encodedURL = `https://users-api.advancedalgos.net/graphql?query=%7B%0A%20%20userByAuthId(authId%3A%20"${encodedAuthId}")%7B%0A%20%20%20%20id%0A%09%09email%0A%20%20%20%20alias%0A%20%20%7D%0A%7D` const decodedURL = decodeURI(encodedURL) - console.log('decoded URL: ', decodedURL) + console.log('createTeam URLs: ', encodedURL, decodedURL) const getUserModuleUser = await axios.get(encodedURL) .then((result) => { - console.log('getUserModuleUser:', result) + console.log('getUserModuleUser axios:', result) return result }) .catch(err =>{ @@ -182,8 +182,8 @@ const resolvers = { const banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' const createTeamUrl = encodeURI(`${slug}/${name}/${alias}/${botSlug}/${authId}`) - // const platformUrl = 'https://develop.advancedalgos.net/AABrowserAPI/teamSetup/' - const platformUrl = 'http://localhost:1337/AABrowserAPI/teamSetup/' + const platformUrl = 'https://develop.advancedalgos.net/AABrowserAPI/teamSetup/' + // const platformUrl = 'http://localhost:3100/AABrowserAPI/teamSetup/' const createPlatformTeam = await axios.get(`${platformUrl}${createTeamUrl}`) .then((result) => { console.log('createPlatformTeam:', result) diff --git a/client/package-lock.json b/client/package-lock.json index ce7aff7cf..eb2f30df0 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,6 +1,6 @@ { "name": "@advancedalgos/teams-client", - "version": "0.0.20", + "version": "0.0.21", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/client/package.json b/client/package.json index 5e17d159e..8b41213b7 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "@advancedalgos/teams-client", - "version": "0.0.20", + "version": "0.0.21", "description": "Advanced Algos Team client-side web app", "main": "src/index.js", "scripts": { diff --git a/client/src/graphql/fbs/AddAlgobotMutation.js b/client/src/graphql/fbs/AddAlgobotMutation.js deleted file mode 100644 index f9470e458..000000000 --- a/client/src/graphql/fbs/AddAlgobotMutation.js +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const AddAlgobotMutation = gql` - mutation addAlgobot($input: AddAlgobotInput!) { - addAlgobot(input: $input) { - id - name - slug - owner - avatar - repo - team_id - type - } - } -` diff --git a/client/src/graphql/fbs/DeleteAlgobotMutation.js b/client/src/graphql/fbs/DeleteAlgobotMutation.js deleted file mode 100644 index 50e7e294a..000000000 --- a/client/src/graphql/fbs/DeleteAlgobotMutation.js +++ /dev/null @@ -1,10 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const DeleteAlgobotMutation = gql` - mutation deleteAlgobot($id: Int!) { - deleteAlgobot(id: $id) { - id - } - } -` diff --git a/client/src/graphql/fbs/GetAlgobotQuery.js b/client/src/graphql/fbs/GetAlgobotQuery.js deleted file mode 100644 index 9ea18b346..000000000 --- a/client/src/graphql/fbs/GetAlgobotQuery.js +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const GetAlgobotQuery = gql` - query getAlgobotByOwner($owner: Int!) { - getAlgobotByOwner(owner: $owner) { - id - name - slug - owner - avatar - repo - team_id - type - } - } -` - -export default GetAlgobotQuery diff --git a/client/src/graphql/fbs/GetAllAlgobotsQuery.js b/client/src/graphql/fbs/GetAllAlgobotsQuery.js deleted file mode 100644 index bc723a0d5..000000000 --- a/client/src/graphql/fbs/GetAllAlgobotsQuery.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const GetAllAlgobotsQuery = gql` - query algobots($limit: Int!, $after: Int) { - algobots(limit: $limit, after: $after) { - totalCount - edges { - cursor - node { - id - name - slug - owner - avatar - repo - team_id - type - } - } - pageInfo { - endCursor - hasNextPage - } - } - } -` - -export default GetAllAlgobotsQuery diff --git a/client/src/graphql/fbs/UniqueAlgobotnameQuery.js b/client/src/graphql/fbs/UniqueAlgobotnameQuery.js deleted file mode 100644 index 587e9bece..000000000 --- a/client/src/graphql/fbs/UniqueAlgobotnameQuery.js +++ /dev/null @@ -1,10 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const UniqueAlgobotnameQuery = gql` - query uniqueAlgobotname($algobotname: String!) { - uniqueAlgobotname(algobotname: $algobotname) - } -` - -export default UniqueAlgobotnameQuery diff --git a/client/src/graphql/members/GetUserByAuthIDQuery.js b/client/src/graphql/members/GetUserByAuthIDQuery.js deleted file mode 100644 index 14375c2f1..000000000 --- a/client/src/graphql/members/GetUserByAuthIDQuery.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const USER_BY_AUTHID = gql` -query($authId: String){ - userByAuthId (authId: $authId){ - id - alias - firstName - middleName - lastName - bio - email - emailVerified - isDeveloper - isDataAnalyst - isTrader - role { - id - } - } -} -` - -export default USER_BY_AUTHID diff --git a/client/src/graphql/members/index.js b/client/src/graphql/members/index.js index 7ff5637c7..a53b48a41 100644 --- a/client/src/graphql/members/index.js +++ b/client/src/graphql/members/index.js @@ -1,4 +1,3 @@ import { GetCurrentMember } from './GetCurrentMemberQuery' -import { USER_BY_AUTHID } from './GetUserByAuthIDQuery' -export { GetCurrentMember, USER_BY_AUTHID } +export { GetCurrentMember } diff --git a/client/src/views/manage-teams/components/ManageTeamEdit.js b/client/src/views/manage-teams/components/ManageTeamEdit.js index c49131db5..caeef3975 100644 --- a/client/src/views/manage-teams/components/ManageTeamEdit.js +++ b/client/src/views/manage-teams/components/ManageTeamEdit.js @@ -61,8 +61,8 @@ export class ManageTeamEdit extends Component { } render () { - console.log('ManageTeamEdit ', this.props, this.props.slug, this.props.team) - const { classes, team } = this.props + const { classes, team, match } = this.props + console.log('ManageTeamEdit ', this.props, this.props.slug, this.props.team, match) return ( {(getAzureSAS, { loading, error, data }) => { - console.log('getAzureSAS: ', loading, error, data, team.profile) const AzureStorageUrl = process.env.AZURE_STORAGE_URL const containerName = team.slug + console.log('getAzureSAS: ', loading, error, data, containerName, AzureStorageUrl, this.props) let AzureSASURL if (!loading && data !== undefined) { AzureSASURL = data.teams_GetAzureSAS @@ -162,7 +162,7 @@ export class ManageTeamEdit extends Component { debug /> { +export const ManageTeamsItem = ({ classes, team, authId, ...props }) => { console.log('ManageTeamsItem', team, team.profile, team.profile.avatar) let avatar if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') { @@ -39,7 +39,7 @@ export const ManageTeamsItem = ({ classes, team, authId }) => { - +
diff --git a/client/src/views/manage-teams/components/ManageTeamsList.js b/client/src/views/manage-teams/components/ManageTeamsList.js index 2f217fb0c..0fdf78fae 100644 --- a/client/src/views/manage-teams/components/ManageTeamsList.js +++ b/client/src/views/manage-teams/components/ManageTeamsList.js @@ -47,7 +47,7 @@ const styles = theme => ({ } }) -export const ManageTeamsList = ({ classes, user = null }) => { +export const ManageTeamsList = ({ classes, user = null, ...props }) => { let owner let authId = null console.log('ManageTeamsList: ', user) @@ -92,6 +92,7 @@ export const ManageTeamsList = ({ classes, user = null }) => { team={team} classes={classes} authId={authId} + {...props} /> ))} {errors} diff --git a/client/src/views/manage-teams/index.js b/client/src/views/manage-teams/index.js index e6582254f..763154429 100644 --- a/client/src/views/manage-teams/index.js +++ b/client/src/views/manage-teams/index.js @@ -12,12 +12,12 @@ const styles = theme => ({ } }) -const ManageTeams = ({ classes }) => ( +const ManageTeams = ({ classes, ...props }) => (
Manage Your Teams - +
) diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js index 7f91302dd..d7cd1e0cf 100644 --- a/client/src/views/teams/components/TeamsDetails.js +++ b/client/src/views/teams/components/TeamsDetails.js @@ -58,13 +58,13 @@ const styles = theme => ({ const TeamsDetails = ({ classes, team }) => { let avatar - if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') { + if (team.profile.avatar !== undefined && team.profile.avatar !== null) { avatar = team.profile.avatar } else { avatar = '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' } let banner - if (team.profile.banner !== undefined && team.profile.banner !== 'a') { + if (team.profile.banner !== undefined && team.profile.banner !== null) { banner = team.profile.banner } else { banner = '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' diff --git a/client/src/views/teams/components/TeamsList.js b/client/src/views/teams/components/TeamsList.js index 00785eeea..a8bd4cf84 100644 --- a/client/src/views/teams/components/TeamsList.js +++ b/client/src/views/teams/components/TeamsList.js @@ -102,6 +102,12 @@ export const TeamsList = ({ classes, match }) => ( ) } + } else { + return ( + + + + ) } } else { return ( From 1d711e4ae0767c0811d6b7ac4d7443286d3a04a5 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Wed, 17 Oct 2018 14:41:30 -0700 Subject: [PATCH 6/8] Switch images to dev storage --- api/src/index.js | 5 - api/src/schema.graphql | 1 - client/package.json | 6 +- .../src/graphql/teams/GetAzureSASMutation.js | 10 -- .../components/ManageFBEdit.js | 81 ++++------- .../manage-teams/components/ManageTeamEdit.js | 133 ++++++++---------- 6 files changed, 91 insertions(+), 145 deletions(-) delete mode 100644 client/src/graphql/teams/GetAzureSASMutation.js diff --git a/api/src/index.js b/api/src/index.js index db637cf06..b063b8ae8 100644 --- a/api/src/index.js +++ b/api/src/index.js @@ -232,11 +232,6 @@ const resolvers = { return error.message }) }) - }, - async getAzureSAS(parent, { teamSlug }, ctx, info) { - const SASUrl = createSASQueryURL(teamSlug) - console.log('createSASQueryURL: ', SASUrl) - return SASUrl } } } diff --git a/api/src/schema.graphql b/api/src/schema.graphql index 650345ee3..2be3053e3 100644 --- a/api/src/schema.graphql +++ b/api/src/schema.graphql @@ -26,7 +26,6 @@ type Mutation { updateTeamProfile(slug: String!, description: String, motto: String, avatar: String, banner: String): Team @isAuthenticated updateFB(fbId: String!, avatar: String): FinancialBeings @isAuthenticated deleteTeam(slug: String!): Team @isAuthenticated @isOwner(type: "Team") - getAzureSAS(teamSlug: String!):String sendMemberInviteSG(email: String!, teamId: String!): String confirmMember(token: String!): String removeTeamMember(teamId: String!, memberId: String!): String diff --git a/client/package.json b/client/package.json index 8b41213b7..86234aefd 100644 --- a/client/package.json +++ b/client/package.json @@ -71,8 +71,6 @@ "dependencies": { "@advancedalgos/web-components": "0.0.12", "@azure/storage-blob": "^10.0.0-preview", - "@material-ui/core": "^3.2.0", - "@material-ui/icons": "^3.0.1", "apollo-cache-inmemory": "^1.3.5", "apollo-client": "^2.4.2", "apollo-link": "^1.2.3", @@ -99,6 +97,10 @@ "recompose": "^0.30.0", "subscriptions-transport-ws": "^0.9.15" }, + "peerDependencies": { + "@material-ui/core": "^3.2.0", + "@material-ui/icons": "^3.0.1" + }, "standard": { "parser": "babel-eslint", "ignore": [ diff --git a/client/src/graphql/teams/GetAzureSASMutation.js b/client/src/graphql/teams/GetAzureSASMutation.js deleted file mode 100644 index 506a53143..000000000 --- a/client/src/graphql/teams/GetAzureSASMutation.js +++ /dev/null @@ -1,10 +0,0 @@ -/* eslint-disable no-unused-vars */ -import gql from 'graphql-tag' - -export const GET_AZURE_SAS = gql` - mutation getAzureSAS($teamSlug: String!) { - teams_GetAzureSAS(teamSlug: $teamSlug) - } -` - -export default GET_AZURE_SAS diff --git a/client/src/views/financial-beings/components/ManageFBEdit.js b/client/src/views/financial-beings/components/ManageFBEdit.js index ba150bc83..323aec53d 100644 --- a/client/src/views/financial-beings/components/ManageFBEdit.js +++ b/client/src/views/financial-beings/components/ManageFBEdit.js @@ -13,15 +13,13 @@ import DialogContentText from '@material-ui/core/DialogContentText' import DialogTitle from '@material-ui/core/DialogTitle' import Typography from '@material-ui/core/Typography' -import { MessageCard, ImageUpload } from '@advancedalgos/web-components' +import { ImageUpload } from '@advancedalgos/web-components' import UPDATE_FB from '../../../graphql/teams/UpdateFBMutation' import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' import { checkGraphQLError } from '../../../utils/graphql-errors' -import GET_AZURE_SAS from '../../../graphql/teams/GetAzureSASMutation' - const styles = theme => ({ dialogContainer: { display: 'block', @@ -65,6 +63,15 @@ export class ManageFBEdit extends Component { ]} > {(updateFB, { loading, error, data }) => { + const AzureStorageUrl = process.env.AZURE_STORAGE_URL_TEAMS + const AzureStorageSAS = process.env.AZURE_STORAGE_SAS_TEAMS + const containerName = slug + + let avatar = null + if (this.state.avatar === null && fb.avatar === undefined) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + if (fb.avatar !== undefined && fb.avatar !== null) avatar = fb.avatar + if (this.state.avatar !== null) avatar = this.state.avatar + let errors let loader if (loading) { @@ -103,54 +110,28 @@ export class ManageFBEdit extends Component { Edit Financial Being - - {(getAzureSAS, { loading, error, data }) => { - console.log('getAzureSAS: ', loading, error, data, fb) - const AzureStorageUrl = process.env.AZURE_STORAGE_URL - const containerName = slug - let AzureSASURL - if (!loading && data !== undefined) { - AzureSASURL = data.getAzureSAS - } else { - getAzureSAS({ variables: { teamSlug: containerName } }) - } - - let avatar = null - if (fb.avatar !== undefined && fb.avatar !== null) avatar = fb.avatar - if (this.state.avatar !== null) avatar = this.state.avatar - if (this.state.avatar === null && fb.avatar === undefined) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' - - if (loading || data === undefined) { - return () - } else { - return ( - - Update Financial Beings's Avatar - - - ) - } + Update Financial Beings's Avatar + + AzureStorageUrl={AzureStorageUrl} + AzureSASURL={AzureStorageSAS} + cropRatio={1} + debug + /> ({ dialogContainer: { display: 'block', @@ -74,6 +72,20 @@ export class ManageTeamEdit extends Component { ]} > {(updateTeamProfile, { loading, error, data }) => { + const AzureStorageUrl = process.env.AZURE_STORAGE_URL_TEAMS + const AzureStorageSAS = process.env.AZURE_STORAGE_SAS_TEAMS + const containerName = team.slug + let avatar = null + if (this.state.avatar === null && team.profile !== null && (team.profile.avatar === undefined || team.profile.avatar === null)) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' + if (team.profile !== null && team.profile.avatar !== undefined && team.profile.avatar !== null) avatar = team.profile.avatar + if (this.state.avatar !== null) avatar = this.state.avatar + + let banner = null + if (this.state.banner === null && team.profile !== null && (team.profile.banner === undefined || team.profile.banner === null)) banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' + if (team.profile !== null && team.profile.banner !== undefined && team.profile.banner !== null) banner = team.profile.banner + if (this.state.banner !== null) banner = this.state.banner + console.log('team images: ', avatar, banner) + let errors let loader if (loading) { @@ -112,81 +124,48 @@ export class ManageTeamEdit extends Component { Edit Team Details - - {(getAzureSAS, { loading, error, data }) => { - const AzureStorageUrl = process.env.AZURE_STORAGE_URL - const containerName = team.slug - console.log('getAzureSAS: ', loading, error, data, containerName, AzureStorageUrl, this.props) - let AzureSASURL - if (!loading && data !== undefined) { - AzureSASURL = data.teams_GetAzureSAS - } else { - getAzureSAS({ variables: { teamSlug: containerName } }) - } - - let avatar = null - if (this.state.avatar === null && team.profile !== null && (team.profile.avatar === undefined || team.profile.avatar === null)) avatar = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-avatar-default.png' - if (team.profile !== null && team.profile.avatar !== undefined && team.profile.avatar !== null) avatar = team.profile.avatar - if (this.state.avatar !== null) avatar = this.state.avatar - - let banner = null - if (this.state.banner === null && team.profile !== null && (team.profile.banner === undefined || team.profile.banner === null)) banner = 'https://algobotcommstorage.blob.core.windows.net/aateammodule/aa-banner-default.png' - if (team.profile !== null && team.profile.banner !== undefined && team.profile.banner !== null) banner = team.profile.banner - if (this.state.banner !== null) banner = this.state.banner - console.log('team images: ', avatar, banner) - - if (loading || data === undefined) { - return () - } else { - return ( - - - - - ) - } + + AzureStorageUrl={AzureStorageUrl} + AzureSASURL={AzureStorageSAS} + cropRatio={4} + debug + /> + Date: Wed, 17 Oct 2018 14:42:36 -0700 Subject: [PATCH 7/8] 0.0.22 --- client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index 86234aefd..edf4df581 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "@advancedalgos/teams-client", - "version": "0.0.21", + "version": "0.0.22", "description": "Advanced Algos Team client-side web app", "main": "src/index.js", "scripts": { From a8fc3d5efe8d17c72372af66ed7fb63b0fb012f0 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Wed, 17 Oct 2018 14:54:19 -0700 Subject: [PATCH 8/8] Update WebComponents --- client/package-lock.json | 28 ++++++++++++++-------------- client/package.json | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index eb2f30df0..0ffb90ac3 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,16 +1,16 @@ { "name": "@advancedalgos/teams-client", - "version": "0.0.21", + "version": "0.0.22", "lockfileVersion": 1, "requires": true, "dependencies": { "@advancedalgos/web-components": { - "version": "0.0.12", - "resolved": "https://registry.npmjs.org/@advancedalgos/web-components/-/web-components-0.0.12.tgz", - "integrity": "sha512-35VGOw4z+Bg8w8fJSjKpaucRSLcBhnlx2vQFOaZYYDPtyHeglqwbiFtWgksCcjEG4WrPO9HMnfc+WLJoFgm8Fg==", + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@advancedalgos/web-components/-/web-components-0.0.13.tgz", + "integrity": "sha512-jXz2w/r08GX8uqB4UTDaow27T3juvR7Bk/80TWmDORVPNCPK152MEUBgxF161hAyOj1jdB+K4M1Fy5GkEpDhmw==", "requires": { "@azure/storage-blob": "^10.1.0-preview", - "@material-ui/core": "^3.0.3", + "@material-ui/core": "^3.2.2", "@material-ui/icons": "^3.0.1", "apollo-client": "^2.4.2", "blob-util": "^2.0.2", @@ -1993,9 +1993,9 @@ } }, "@material-ui/core": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.2.0.tgz", - "integrity": "sha512-fThWolLWQoUMV8exLxe9NqfegFFHmV8T7kJBvk3iX47c7TrAw4Vgyvft4CApnQoYIZbrRfPMig5ovYDvmTmMCg==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.2.2.tgz", + "integrity": "sha512-wDTJyR76+OBdlltiPs3lc1gD6zR+dSA6nITtgkBeLf1NvWfNotMWdvldIDnF3bu24ySAX9imfzDfkBu4Edtqww==", "requires": { "@babel/runtime": "7.1.2", "@types/jss": "^9.5.6", @@ -2190,9 +2190,9 @@ } }, "@types/jss": { - "version": "9.5.6", - "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.6.tgz", - "integrity": "sha512-7TWmR5y1jYG4ka4wTZt65RR0kw4WgALFUWktQIWbLnDd6/z/0SQZ/4+UeH0rhdp+HEdIfmzPBH0VwE/4Z9Evzw==", + "version": "9.5.7", + "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz", + "integrity": "sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==", "requires": { "csstype": "^2.0.0", "indefinite-observable": "^1.0.1" @@ -2219,9 +2219,9 @@ "integrity": "sha512-HtKGu+qG1NPvYe1z7ezLsyIaXYyi8SoAVqWDZgDQ8dLrsZvSzUNCwZyfX33uhWxL/SU0ZDQZ3nwZ0nimt507Kw==" }, "@types/react": { - "version": "16.4.16", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.16.tgz", - "integrity": "sha512-lxyoipLWweAnLnSsV4Ho2NAZTKKmxeYgkTQ6PaDiPDU9JJBUY2zJVVGiK1smzYv8+ZgbqEmcm5xM74GCpunSEA==", + "version": "16.4.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.18.tgz", + "integrity": "sha512-eFzJKEg6pdeaukVLVZ8Xb79CTl/ysX+ExmOfAAqcFlCCK5TgFDD9kWR0S18sglQ3EmM8U+80enjUqbfnUyqpdA==", "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" diff --git a/client/package.json b/client/package.json index edf4df581..53982f016 100644 --- a/client/package.json +++ b/client/package.json @@ -69,7 +69,7 @@ "workbox-cli": "^3.6.2" }, "dependencies": { - "@advancedalgos/web-components": "0.0.12", + "@advancedalgos/web-components": "0.0.13", "@azure/storage-blob": "^10.0.0-preview", "apollo-cache-inmemory": "^1.3.5", "apollo-client": "^2.4.2",