paging history

src/ts/@overflow/history/react/HistoryList.tsx

@@ -13,14 +13,15 @@ import * as readAllByProbeActions from '../redux/action/read_all_by_probe';
 export function mapStateToProps(state: any, ownProps?: any): HistoryStateProps {
   return {
     probeId: '1',
-    histories: state.historyList,
+    histories: state.historyPage,
   };
 }
 
 export function mapDispatchToProps(dispatch: Dispatch<any>, ownProps?: any): HistoryDispatchProps {
   return {
-    onReadAllByProbe: (probe: Probe) => {
+    onReadAllByProbe: (probe: Probe, pageNo: string, countPerPage: string) => {
-      dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbe', readAllByProbeActions.REQUEST, JSON.stringify(probe)));
+      dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbe', readAllByProbeActions.REQUEST,
+                                           JSON.stringify(probe), pageNo, countPerPage));
     },
     // onRedirectHome: () => {
     //   dispatch(routerPush('/'));

src/ts/@overflow/history/react/components/HistoryList.tsx

@@ -6,17 +6,17 @@ import History from '@overflow/history/api/model/History';
 
 export interface StateProps {
   probeId: string;
-  histories: History[];
+  histories: any;
 }
 
 export interface DispatchProps {
-  onReadAllByProbe?(probe: Probe): void;
+  onReadAllByProbe?(probe: Probe, pageNo: string, countPerPage: string): void;
 }
 
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-
+  page: number;
 }
 
 export class HistoryList extends React.Component<Props, State> {
@@ -25,6 +25,7 @@ export class HistoryList extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
+      page: 0,
     };
   }
 
@@ -32,7 +33,39 @@ export class HistoryList extends React.Component<Props, State> {
     let probe: Probe = {
       id: Number(1),
     };
-    this.props.onReadAllByProbe(probe);
+    this.props.onReadAllByProbe(probe, String(this.state.page), '10');
+  }
+
+  public handlePaging = (pageNo: number) => {
+    if(pageNo === this.state.page) {
+      return;
+    }
+    this.setState({
+      page: pageNo,
+    });
+    let probe: Probe = {
+      id: Number(1),
+    };
+    this.props.onReadAllByProbe(probe, String(pageNo), '10');
+  }
+
+  public renderPagination = (pageObj: any): (JSX.Element | JSX.Element[]) => {
+    if (pageObj === undefined) {
+      return null;
+    }
+    let totalPage = pageObj.totalPages;
+    let currPage = pageObj.number;
+    let elems = new Array;
+    for (let i = 0; i < totalPage; i++) {
+      if (i === currPage) {
+        elems.push(<Menu.Item key={i} active as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>);
+      } else {
+        elems.push(<Menu.Item key={i} as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>);
+      }
+    }
+    return <Menu floated='right' pagination>
+      {elems}
+    </Menu>;
   }
 
   public render(): JSX.Element {
@@ -51,7 +84,7 @@ export class HistoryList extends React.Component<Props, State> {
           </Table.Header>
 
           <Table.Body>
-            {this.props.histories ? this.props.histories.map((history: History, index: number) => (
+            {this.props.histories && this.props.histories.content ? this.props.histories.content.map((history: History, index: number) => (
               <Table.Row key={index} >
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
                 <Table.Cell textAlign={'center'}>
@@ -72,18 +105,7 @@ export class HistoryList extends React.Component<Props, State> {
           <Table.Footer>
             <Table.Row>
               <Table.HeaderCell colSpan='3'>
-                <Menu floated='right' pagination>
+                {this.renderPagination(this.props.histories)}
-                  <Menu.Item as='a' icon>
-                    <Icon name='left chevron' />
-                  </Menu.Item>
-                  <Menu.Item as='a'>1</Menu.Item>
-                  <Menu.Item as='a'>2</Menu.Item>
-                  <Menu.Item as='a'>3</Menu.Item>
-                  <Menu.Item as='a'>4</Menu.Item>
-                  <Menu.Item as='a' icon>
-                    <Icon name='right chevron' />
-                  </Menu.Item>
-                </Menu>
               </Table.HeaderCell>
             </Table.Row>
           </Table.Footer>

src/ts/@overflow/history/redux/reducer/read_all_by_probe.ts

@@ -8,11 +8,11 @@ import ReadAllByProbeState, { defaultState as ReadAllByProbeDefaultState } from
 
 const reducer: ReducersMapObject = {
   [ReadAllByProbeActionTypes.REQUEST_SUCCESS]:
-  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<History[]>):
+  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<object>):
     ReadAllByProbeState => {
     return {
       ...state,
-      historyList: <History[]>action.payload,
+      historyPage: action.payload,
     };
   },
   [ReadAllByProbeActionTypes.REQUEST_FAILURE]:

src/ts/@overflow/history/redux/state/ReadAllByProbe.ts

@@ -1,12 +1,12 @@
 import History from '../../api/model/History';
 
 export interface State {
-  readonly historyList?: History[];
+  readonly historyPage?: object;
   readonly error?: Error;
 }
 
 export const defaultState: State = {
-  historyList: undefined,
+  historyPage: undefined,
   error: undefined,
 };