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

Fix nested routing

Browse Source
This commit is contained in:
Barry Low committed 2018-10-17 00:53:23 -07:00
1 parent c054855a1a
commit 2f59d2a3fb
6 files changed
+41 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/index.js
+8 -7
View File
@@ -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} />
client/src/views/common/components/TeamBar.js
+15 -9
View File
@@ -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)
client/src/views/manage-teams/components/ManageTeamEdit.js
+10 -7
View File
@@ -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,
client/src/views/teams/components/TeamsDetails.js
+1 -1
View File
@@ -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
client/src/views/teams/components/TeamsItem.js
+2 -2
View File
@@ -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>
package-lock.json
Generated
+5
View File
@@ -0,0 +1,5 @@
{
"name": "AATeamModule",
"version": "2.0.1",
"lockfileVersion": 1
}