Merge pull request #860 from mlorb/ml-sci-1730

Fix team table does not retain the number of teams per page bug [SCI-1730]

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,15 +20,21 @@ 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> {
+  static linkToTeam(name: string, team: Teams$Team): Node {
+    return <Link to={`${SETTINGS_TEAMS_ROUTE}/${team.id}`}>{name}</Link>;
+  }
+
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -37,7 +43,6 @@ class TeamsDataTable extends Component<Props, State> {
     };
     (this: any).leaveTeamModal = this.leaveTeamModal.bind(this);
     (this: any).leaveTeamButton = this.leaveTeamButton.bind(this);
-    (this: any).linkToTeam = this.linkToTeam.bind(this);
     (this: any).hideLeaveTeamModal = this.hideLeaveTeamModal.bind(this);
   }
 
@@ -49,10 +54,6 @@ class TeamsDataTable extends Component<Props, State> {
     (this: any).setState({ leaveTeamModalShow: false, team: DefaultTeam });
   }
 
-  linkToTeam(name: string, team: Teams$Team): Node {
-    return <Link to={`${SETTINGS_TEAMS_ROUTE}/${team.id}`}>{name}</Link>;
-  }
-
   leaveTeamButton(id: string, team: Teams$Team): Node {
     if (team.can_be_left) {
       return (
@@ -73,6 +74,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,
@@ -84,7 +87,7 @@ class TeamsDataTable extends Component<Props, State> {
         name: "Team",
         isKey: false,
         textId: "name",
-        dataFormat: this.linkToTeam,
+        dataFormat: TeamsDataTable.linkToTeam,
         position: 0,
         dataSort: true,
         width: "50%"

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>