Add Pagination for notification messages

Author: BLNDLYBLV

src/app/components/Notification/index.tsx

@@ -6,15 +6,21 @@ import * as NotificationInterfaces from 'app/types/Notification';
 import classnames from 'classnames';
 import * as React from 'react';
 import { Col, Grid, Row } from 'react-bootstrap';
+import ReactPaginate from 'react-paginate';
+import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons';
+
 // tslint:disable-next-line
 
 export class Notification extends React.Component<
   NotificationInterfaces.Props,
   NotificationInterfaces.State
 > {
+  private static paginationSize = 6;
+
   constructor(props: NotificationInterfaces.Props) {
     super(props);
     this.state = {
+      offset: 0,
       activeNotificationTab: NotificationInterfaces.NotificationTabType.ALL,
       tabType: NotificationInterfaces.TabType.NOTIFICATIONS,
     };
@@ -24,6 +30,12 @@ export class Notification extends React.Component<
     this.props.getAllGlobalAnnouncements();
   }
 
+  public handlePageClick = (data: { selected: number }) => {
+    this.setState({
+      offset: Math.ceil(data.selected * Notification.paginationSize),
+    });
+  };
+
   public render() {
     const { activeNotificationTab, tabType } = this.state;
     const { announcements, notifications, deleteNotificationType, deleteNotification } = this.props;
@@ -47,6 +59,7 @@ export class Notification extends React.Component<
       }
     });
 
+
     return (
       <Grid fluid={true} className={classnames(styles.Notification)}>
         <Row className="justify-content-between py-2 px-3">
@@ -151,17 +164,48 @@ export class Notification extends React.Component<
               </div>
             </Row>
             <Row className={classnames('mb-2', styles.notificationWrap)}>
-              {activeNotifications.map(({ id, title, content, type, createdAt }) => (
-                <NotificationElement
-                  createdAt={createdAt}
-                  key={id}
-                  id={id}
-                  title={title}
-                  content={content}
-                  type={type}
-                  deleteNotification={deleteNotification}
+              <Col
+                className="d-flex justify-content-center"
+                style={{ width: '100vw', margin: '5px' }}
+              >
+                <ReactPaginate
+                  previousLabel={
+                    <span>
+                      <FontAwesomeIcon icon={faCaretLeft} /> <FontAwesomeIcon icon={faCaretLeft} />
+                    </span>
+                  }
+                  nextLabel={
+                    <span>
+                      <FontAwesomeIcon icon={faCaretRight} />{' '}
+                      <FontAwesomeIcon icon={faCaretRight} />
+                    </span>
+                  }
+                  breakLabel={'...'}
+                  breakClassName={'break-me'}
+                  pageCount={Math.max(activeNotifications.length / Notification.paginationSize)}
+                  marginPagesDisplayed={1}
+                  pageClassName={'atag'}
+                  pageRangeDisplayed={2}
+                  activeLinkClassName={'active'}
+                  onPageChange={this.handlePageClick}
+                  containerClassName={'pagination'}
+                  activeClassName={'active'}
                 />
-              ))}
+              </Col>
+              {activeNotifications.map(({ id, title, content, type, createdAt }, index) =>
+                index >= this.state.offset &&
+                index <= this.state.offset + Notification.paginationSize - 1 ? (
+                  <NotificationElement
+                    createdAt={createdAt}
+                    key={id}
+                    id={id}
+                    title={title}
+                    content={content}
+                    type={type}
+                    deleteNotification={deleteNotification}
+                  />
+                ) : null,
+              )}
             </Row>
           </>
         ) : (

src/app/types/Notification/index.ts

@@ -58,6 +58,7 @@ export interface NotificationStoreState {
 }
 
 export interface State {
+  offset: number;
   activeNotificationTab: NotificationTabType;
   tabType: TabType;
 }