Use Route params in TeamConnector.tsx (untested)

TODO: Fix SQLite3 complaining

https://github.com/typeorm/typeorm/issues/307

packages/client/src/team/TeamActions.ts

@@ -105,7 +105,7 @@ export class TeamActions {
   fetchUsersInTeam = ({teamId}: {teamId: number})
   : Action<'TEAM_USERS_PENDING'> => {
     return {
-      payload: this.http.get('/teams/:teamId/users', {
+      payload: this.http.get('/teams/:teamId/users', {}, {
         teamId,
       })
       .then(usersInTeam => ({teamId, usersInTeam})),
@@ -115,7 +115,7 @@ export class TeamActions {
 
   findUserByEmail = (email: string): Action<'TEAM_USER_FIND_PENDING'> => {
     return {
-      payload: this.http.get('/users/emails/:email', {
+      payload: this.http.get('/users/emails/:email', {}, {
         email,
       }),
       type: 'TEAM_USER_FIND_PENDING',

packages/client/src/team/TeamConnector.test.tsx

@@ -44,7 +44,7 @@ describe('TeamConnector', () => {
         teamId: 123,
       },
     }, users)
-    const {node} = createTestProvider().render({editTeamId: 123})
+    const {node} = createTestProvider().render({editTeamId123: 123})
     await http.wait()
     expect(node.innerHTML).toContain('my-team')
   })

packages/client/src/team/TeamConnector.ts

@@ -1,9 +1,10 @@
 import {Connector} from '../redux/Connector'
-import {ITeamState} from './TeamReducer'
 import {IStateSelector} from '../redux'
+import {ITeamState} from './TeamReducer'
 import {TeamActions} from './TeamActions'
 import {TeamManager} from './TeamManager'
 import {bindActionCreators} from 'redux'
+import {withRouter} from 'react-router-dom'
 
 export class TeamConnector extends Connector<ITeamState> {
   constructor(protected readonly teamActions: TeamActions) {
@@ -31,6 +32,6 @@ export class TeamConnector extends Connector<ITeamState> {
       TeamManager,
     )
 
-    return Component
+    return withRouter(Component)
   }
 }

packages/client/src/team/TeamList.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {ITeam, ReadonlyRecord} from '@rondo/common'
+import {Link} from 'react-router-dom'
 import {TeamActions} from './TeamActions'
 
 export interface ITeamListProps {
@@ -8,12 +9,12 @@ export interface ITeamListProps {
   onAddTeam: TeamActions['createTeam']
   onRemoveTeam: TeamActions['removeTeam']
   onUpdateTeam: TeamActions['updateTeam']
-  editTeamId: number
+  editTeamId?: number
 }
 
 export interface ITeamProps {
   team: ITeam
-  editTeamId: number  // TODO handle edits via react-router params
+  editTeamId?: number  // TODO handle edits via react-router params
   onRemoveTeam: TeamActions['removeTeam']
   onUpdateTeam: TeamActions['updateTeam']
 }
@@ -32,7 +33,7 @@ export class TeamAdd extends React.PureComponent<IAddTeamProps, IAddTeamState> {
   constructor(props: IAddTeamProps) {
     super(props)
     this.state = {
-      name: '',
+      name: props.team ? props.team.name : '',
     }
   }
   handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -85,6 +86,7 @@ export class TeamRow extends React.PureComponent<ITeamProps> {
               team={team}
             />
         }
+        <Link to={`/teams/${team.id}/users`}>Edit</Link>
         <button onClick={this.handleRemove}>Remove</button>
       </div>
     )

packages/client/src/team/TeamManager.tsx

@@ -3,8 +3,16 @@ import {ITeam, IUserInTeam, ReadonlyRecord} from '@rondo/common'
 import {TeamList} from './TeamList'
 import {TeamUserList} from './TeamUserList'
 import {TeamActions} from './TeamActions'
+import {match} from 'react-router'
+import {History, Location} from 'history'
 
 export interface ITeamManagerProps {
+  history: History
+  location: Location
+  match: match<{
+    teamId: string | undefined
+  }>
+
   createTeam: TeamActions['createTeam']
   updateTeam: TeamActions['updateTeam']
   removeTeam: TeamActions['removeTeam']
@@ -18,8 +26,6 @@ export interface ITeamManagerProps {
   teamsById: ReadonlyRecord<number, ITeam>
   teamIds: ReadonlyArray<number>
 
-  editTeamId: number
-
   userKeysByTeamId: ReadonlyRecord<number, ReadonlyArray<string>>
   usersByKey: ReadonlyRecord<string, IUserInTeam>
 }
@@ -32,12 +38,16 @@ export class TeamManager extends React.PureComponent<ITeamManagerProps> {
     // TODO load my teams on first launch
     // TODO use teamId from route url
     // TODO use editTeamId from route url
-    const {editTeamId} = this.props
+    // const {editTeamId} = this.props
+    const editTeamId = this.props.match.params.teamId !== undefined ?
+      Number(this.props.match.params.teamId) : undefined
+
+    console.log('props', this.props)
 
     return (
       <React.Fragment>
         <TeamList
-          editTeamId={this.props.editTeamId}
+          editTeamId={editTeamId}
           teamsById={this.props.teamsById}
           teamIds={this.props.teamIds}
           onAddTeam={this.props.createTeam}
@@ -45,7 +55,7 @@ export class TeamManager extends React.PureComponent<ITeamManagerProps> {
           onUpdateTeam={this.props.updateTeam}
         />
 
-        <TeamUserList
+        {editTeamId && <TeamUserList
           onAddUser={this.props.addUser}
           onRemoveUser={this.props.removeUser}
           findUserByEmail={this.props.findUserByEmail}
@@ -55,7 +65,7 @@ export class TeamManager extends React.PureComponent<ITeamManagerProps> {
 
           userKeysByTeamId={this.props.userKeysByTeamId}
           usersByKey={this.props.usersByKey}
-        />
+        />}
 
       </React.Fragment>
     )