From 2f59d2a3fbe435c0e6fb7f3d5ed78ee07e0bc450 Mon Sep 17 00:00:00 2001
From: Barry Low <barrylow@gmail.com>
Date: Wed, 17 Oct 2018 00:53:23 -0700
Subject: [PATCH] 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 = (<TeamBar user={this.state.user} />)
+      loggedIn = (<TeamBar match={match} user={this.state.user} />)
     } else {
       loggedIn = ''
     }
@@ -46,30 +47,30 @@ class App extends Component {
         <div className='App'>
           {loggedIn}
           <Switch>
-            <Route exact path='/teams/' component={Teams} />
+            <Route exact path={`${match.path}`} component={Teams} />
             <Route
               exact
-              path='/teams/manage-teams'
+              path={`${match.path}/manage-teams`}
               render={props => <ManageTeams {...props} auth={this.props.auth} />}
             />
             <Route
               exact
-              path='/teams/team-members'
+              path={`${match.path}/team-members`}
               render={props => <TeamMembers {...props} auth={this.props.auth} />}
             />
             <Route
               exact
-              path='/teams/financial-beings'
+              path={`${match.path}/financial-beings`}
               render={props => <FinancialBeings {...props} auth={this.props.auth} />}
             />
             <Route
               exact
-              path='/teams/financial-beings'
+              path={`${match.path}/financial-beings`}
               render={props => <Settings {...props} auth={this.props.auth} />}
             />
             <Route
               exact
-              path='/teams/activate-team-membership'
+              path={`${match.path}/activate-team-membership`}
               render={props => <AcceptTeamInvite {...props} auth={this.props.auth} />}
             />
             <Route path='/teams/:slug' component={Teams} />
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 => <Link to='/teams/settings' {...props} />
 const FBLink = props => <Link to='/teams/financial-beings' {...props} />
 const MembersLink = props => <Link to='/teams/team-members' {...props} />
-const ManageLink = props => <Link to='/teams/manage-teams' {...props} />
+const ManageLink = props => <Link {...props} />
 const ViewLink = props => <Link to='/teams' {...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 (
       <div className={classes.root}>
         <AppBar position='static' color='secondary'>
@@ -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}`}>
               <SearchIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
               All Teams
             </Button>
@@ -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`}>
               <GroupIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
               Your Teams
             </Button>
@@ -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`}>
               <UsersIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
               Team Members
             </Button>
@@ -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`}>
               <AdbIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
               Financial Beings
             </Button>
@@ -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`}>
               <SettingsApplicationsIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
               Settings
             </Button>
@@ -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 }) => {
       <CssBaseline />
       <main className={classes.layout}>
         <Paper className={classes.paper}>
+          <Link to='/teams'>&larr; Back to all teams</Link>
           <div className={classes.heroContent}>
-            <Link to='/'>&larr; Back to all teams</Link>
             <img src={banner} alt={team.name} className={classes.banner} />
             <img src={avatar} alt={team.name} className={classes.avatar} />
             <Typography
diff --git a/client/src/views/teams/components/TeamsItem.js b/client/src/views/teams/components/TeamsItem.js
index be16c76c8..b2b507c77 100644
--- a/client/src/views/teams/components/TeamsItem.js
+++ b/client/src/views/teams/components/TeamsItem.js
@@ -11,7 +11,7 @@ import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 
 import { Link } from 'react-router-dom'
-
+// const TeamDetailsLink = ({ teamSlug, ...props }) => <Link to={`/teams/${teamSlug}`} {...props} />
 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 }) => {
           </CardContent>
         </CardActionArea>
         <CardActions>
-          <Link to={`/${team.slug}`}>
+          <Link to={`/teams/${team.slug}`}>
             <Button size='small' color='primary' className={classes.buttonRight}>
               Details
             </Button>
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
+}