add state for number of teams per page

app/javascript/src/scenes/SettingsPage/index.jsx

@@ -24,8 +24,9 @@ import SettingsTeam from "./scenes/team";
 import SettingsNewTeam from "./scenes/teams/new";
 
 type State = {
-  active: string
-}
+  active: string,
+  teamsTableSizePerPage: number
+};
 
 let componentMounted = false;
 
@@ -34,10 +35,12 @@ export default class SettingsPage extends Component<*, State> {
     super(props);
 
     this.state = {
-      active: "1"
+      active: "1",
+      teamsTableSizePerPage: 10
     };
     (this: any).handleSelect = this.handleSelect.bind(this);
     (this: any).setTabState = this.setTabState.bind(this);
+    (this: any).teamsTableOnSizePerPageList = this.teamsTableOnSizePerPageList.bind(this);
   }
 
   componentDidMount(): void {
@@ -54,6 +57,10 @@ export default class SettingsPage extends Component<*, State> {
     }
   }
 
+  teamsTableOnSizePerPageList(teamsTableSizePerPage: number): void {
+    (this: any).setState({ teamsTableSizePerPage });
+  }
+
   handleSelect(eventKey: string): void {
     event.preventDefault();
     (this: any).setState({ active: eventKey });
@@ -108,7 +115,12 @@ export default class SettingsPage extends Component<*, State> {
             <Route
               path={SETTINGS_TEAMS_ROUTE}
               component={props => (
-                <SettingsTeams {...props} tabState={this.setTabState} />
+                <SettingsTeams
+                  {...props}
+                  tabState={this.setTabState}
+                  sizePerPage={this.state.teamsTableSizePerPage}
+                  onSizePerPageList={this.teamsTableOnSizePerPageList}
+                />
               )}
             />
             <Route

app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx

@@ -20,13 +20,15 @@ const DefaultTeam = {
 
 type Props = {
   updateTeamsState: Function,
-  teams: Array<Teams$Team>
-}
+  teams: Array<Teams$Team>,
+  sizePerPage: number,
+  onSizePerPageList: Function
+};
 
 type State = {
   leaveTeamModalShow: boolean,
   team: Teams$Team
-}
+};
 
 class TeamsDataTable extends Component<Props, State> {
   constructor(props: Props) {
@@ -73,6 +75,8 @@ class TeamsDataTable extends Component<Props, State> {
       defaultSortName: "name",
       defaultSortOrder: "desc",
       sizePerPageList: [10, 25, 50, 100],
+      sizePerPage: this.props.sizePerPage,
+      onSizePerPageList: this.props.onSizePerPageList,
       prePage: "Prev", // Previous page button text
       nextPage: "Next", // Next page button textu
       paginationShowsTotal: DataTable.renderShowsTotal,

app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx

@@ -20,7 +20,9 @@ const Wrapper = styled.div`
 `;
 
 type Props = {
-  tabState: Function
+  tabState: Function,
+  sizePerPage: number,
+  onSizePerPageList: Function
 };
 
 type State = {
@@ -70,6 +72,8 @@ class SettingsTeams extends Component<Props, State> {
           <TeamsDataTable
             teams={this.state.teams}
             updateTeamsState={this.updateTeamsState}
+            sizePerPage={this.props.sizePerPage}
+            onSizePerPageList={this.props.onSizePerPageList}
           />
         </Wrapper>
       </PageTitle>