Add ListButtons to TeamList.tsx

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

@@ -57,7 +57,11 @@ describe('TeamConnector', () => {
   }]
 
   it('it fetches user teams on render', async () => {
-    const {node} = createTestProvider().render({})
+    const {node} = createTestProvider().render({
+      history: {} as any,
+      location: {} as any,
+      match: {} as any,
+    })
     await http.wait()
     expect(node.innerHTML).toContain('my-team')
   })
@@ -75,7 +79,11 @@ describe('TeamConnector', () => {
         data: {name: 'new-team'},
       }, newTeam)
       const {render, store} = createTestProvider()
-      const {node} = render({})
+      const {node} = render({
+        history: {} as any,
+        location: {} as any,
+        match: {} as any,
+      })
       const addTeamForm = node.querySelector('.team-add') as HTMLFormElement
       const nameInput = addTeamForm
       .querySelector('input') as HTMLInputElement
@@ -95,7 +103,11 @@ describe('TeamConnector', () => {
         data: {name: 'test'},
       }, error, 400)
       const {render} = createTestProvider()
-      const {node} = render({})
+      const {node} = render({
+        history: {} as any,
+        location: {} as any,
+        match: {} as any,
+      })
       const addTeamForm = node.querySelector('.team-add') as HTMLFormElement
       const nameInput = addTeamForm
       .querySelector('input') as HTMLInputElement

packages/client/src/team/TeamConnector.ts

@@ -32,6 +32,6 @@ export class TeamConnector extends Connector<ITeamState> {
       TeamManager,
     )
 
-    return withRouter(Component)
+    return Component
   }
 }

packages/client/src/team/TeamList.tsx

@@ -7,6 +7,7 @@ import {TeamActions} from './TeamActions'
 import {TeamEditor} from './TeamEditor'
 
 export interface ITeamListProps {
+  ListButtons?: React.ComponentType<{team: ITeam}>
   teamsById: TReadonlyRecord<number, ITeam>
   teamIds: ReadonlyArray<number>
   onAddTeam: TeamActions['createTeam']
@@ -14,6 +15,7 @@ export interface ITeamListProps {
 }
 
 export interface ITeamProps {
+  ListButtons?: React.ComponentType<{team: ITeam}>
   team: ITeam
   onRemoveTeam: TeamActions['removeTeam']
 }
@@ -24,15 +26,17 @@ export class TeamRow extends React.PureComponent<ITeamProps> {
     await onRemoveTeam({id}).payload
   }
   render() {
-    const {team} = this.props
+    const {team, ListButtons} = this.props
     return (
       <React.Fragment>
         <div className='team-name'>
           {team.name}
         </div>
         <div className='ml-auto'>
+          {!!ListButtons && <ListButtons team={team} />}
+          &nbsp;
           <Link to={`/teams/${team.id}/users`}>
-            <Button isInverted isColor='link' aria-label='Edit'>
+            <Button isInverted isColor='link' aria-label='Edit Team'>
               <FaEdit />
             </Button>
           </Link>
@@ -73,6 +77,7 @@ export class TeamList extends React.PureComponent<ITeamListProps> {
           return (
             <PanelBlock key={team.id}>
               <TeamRow
+                ListButtons={this.props.ListButtons}
                 onRemoveTeam={this.props.onRemoveTeam}
                 team={team}
               />

packages/client/src/team/TeamManager.tsx

@@ -14,6 +14,8 @@ export interface ITeamManagerProps {
   location: Location
   match: Match<any>
 
+  ListButtons?: React.ComponentType<{team: ITeam}>
+
   createTeam: TeamActions['createTeam']
   updateTeam: TeamActions['updateTeam']
   removeTeam: TeamActions['removeTeam']
@@ -56,6 +58,7 @@ export class TeamManager extends React.PureComponent<ITeamManagerProps> {
           <Route exact path='/teams' render={() =>
             <>
               <TeamList
+                ListButtons={this.props.ListButtons}
                 teamsById={teamsById}
                 teamIds={this.props.teamIds}
                 onAddTeam={this.props.createTeam}