Add /teams/new route

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

@@ -30,7 +30,7 @@ describe('TeamConnector', () => {
     teamActions = new Feature.TeamActions(http)
   })
 
-  const historyEntries = ['/teams']
+  let historyEntries = ['/teams']
 
   const createTestProvider = () => test.withProvider({
     reducers: {Team: Feature.Team},
@@ -63,6 +63,10 @@ describe('TeamConnector', () => {
   })
 
   describe('add team', () => {
+    beforeEach(() => {
+      historyEntries = ['/teams/new']
+    })
+
     it('sends a POST request to POST /teams', async () => {
       const newTeam: Partial<ITeam> = {id: 101, name: 'new-team'}
       http.mockAdd({
@@ -78,7 +82,6 @@ describe('TeamConnector', () => {
       T.Simulate.change(nameInput, {target: {value: newTeam.name}} as any)
       T.Simulate.submit(addTeamForm)
       await http.wait()
-      expect(nameInput.value).toEqual('')
       const {Team} = store.getState()
       expect(Team.teamIds).toEqual([100, 101])
       expect(Team.teamsById[101]).toEqual(newTeam)

packages/client/src/team/TeamConnector.ts

@@ -4,6 +4,7 @@ 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/TeamEditor.tsx

@@ -59,7 +59,6 @@ extends React.PureComponent<ITeamEditorProps, ITeamEditorState> {
       this.setState({error: err.message})
       return
     }
-    this.setState({error: '', name: ''})
   }
   render() {
     const {error} = this.state

packages/client/src/team/TeamList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Button, Panel, PanelHeading, PanelBlock} from 'bloomer'
-import {FaEdit, FaTimes} from 'react-icons/fa'
+import {FaPlus, FaEdit, FaTimes} from 'react-icons/fa'
 import {ITeam, ReadonlyRecord} from '@rondo/common'
 import {Link} from 'react-router-dom'
 import {TeamActions} from './TeamActions'
@@ -59,7 +59,17 @@ export class TeamList extends React.PureComponent<ITeamListProps> {
 
     return (
       <Panel>
-        <PanelHeading>Teams</PanelHeading>
+        <PanelHeading>
+          <span className='is-flex is-vcentered'>
+            <span>Teams</span>
+            <Link
+              className='ml-auto button is-link is-small'
+              to='/teams/new'
+            >
+              <FaPlus />&nbsp;New
+            </Link>
+          </span>
+        </PanelHeading>
         {teamIds.map(teamId => {
           const team = teamsById[teamId]
           return (
@@ -72,13 +82,6 @@ export class TeamList extends React.PureComponent<ITeamListProps> {
             </PanelBlock>
           )
         })}
-
-        <PanelBlock isDisplay='block'>
-          <TeamEditor
-            type='add'
-            onAddTeam={this.props.onAddTeam}
-          />
-        </PanelBlock>
       </Panel>
     )
   }

packages/client/src/team/TeamManager.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {History, Location} from 'history'
 import {ITeam, IUserInTeam, ReadonlyRecord} from '@rondo/common'
 import {Panel, PanelBlock, PanelHeading} from 'bloomer'
 import {Route, Switch} from 'react-router-dom'
@@ -6,8 +7,13 @@ import {TeamActions} from './TeamActions'
 import {TeamEditor} from './TeamEditor'
 import {TeamList} from './TeamList'
 import {TeamUserList} from './TeamUserList'
+import {match as Match} from 'react-router'
 
 export interface ITeamManagerProps {
+  history: History
+  location: Location
+  match: Match<any>
+
   createTeam: TeamActions['createTeam']
   updateTeam: TeamActions['updateTeam']
   removeTeam: TeamActions['removeTeam']
@@ -29,11 +35,23 @@ export class TeamManager extends React.PureComponent<ITeamManagerProps> {
   async componentDidMount() {
     await this.props.fetchMyTeams()
   }
+  handleCreateNewTeam = (team: {name: string}) => {
+    const action = this.props.createTeam(team)
+    action.payload
+    .then(() => this.props.history.push('/teams'))
+    return action
+  }
   render() {
     const {teamsById} = this.props
 
     return (
       <div className='team-manager'>
+        <Route exact path='/teams/new' render={() =>
+          <TeamEditor
+            type='add'
+            onAddTeam={this.handleCreateNewTeam}
+          />
+        }/>
         <Switch>
           <Route exact path='/teams' render={() =>
             <>