From b8469b5a988f1baed69ed75228cada21081a44c5 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Wed, 7 Jul 2021 16:26:16 +0200
Subject: [PATCH] Fix/pagination (#313)

* fix: add pagination page rules

* fix: set amount of features to paginate to 9
---
 .../common/PaginateUI/PaginateUI.tsx          | 142 +++++++++++++-----
 .../common/PaginateUI/PaginationUI.styles.ts  |  11 ++
 2 files changed, 113 insertions(+), 40 deletions(-)

diff --git a/frontend/src/component/common/PaginateUI/PaginateUI.tsx b/frontend/src/component/common/PaginateUI/PaginateUI.tsx
index a9f135925a..8ed87b627e 100644
--- a/frontend/src/component/common/PaginateUI/PaginateUI.tsx
+++ b/frontend/src/component/common/PaginateUI/PaginateUI.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import ConditionallyRender from '../ConditionallyRender';
 import classnames from 'classnames';
 import { useStyles } from './PaginationUI.styles';
@@ -5,6 +6,8 @@ import { useStyles } from './PaginationUI.styles';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 
+import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
+
 interface IPaginateUIProps {
     pages: any[];
     pageIndex: number;
@@ -20,7 +23,10 @@ const PaginateUI = ({
     setPageIndex,
     nextPage,
 }: IPaginateUIProps) => {
+    const STARTLIMIT = 6;
     const styles = useStyles();
+    const [limit, setLimit] = useState(STARTLIMIT);
+    const [start, setStart] = useState(0);
 
     return (
         <ConditionallyRender
@@ -31,51 +37,107 @@ const PaginateUI = ({
                         <ConditionallyRender
                             condition={pageIndex > 0}
                             show={
-                                <button
-                                    className={classnames(
-                                        styles.idxBtn,
-                                        styles.idxBtnLeft
-                                    )}
-                                    onClick={() => prevPage()}
-                                >
-                                    <ArrowBackIosIcon
-                                        className={styles.idxBtnIcon}
-                                    />
-                                </button>
+                                <>
+                                    <button
+                                        className={classnames(
+                                            styles.idxBtn,
+                                            styles.idxBtnLeft
+                                        )}
+                                        onClick={() => {
+                                            prevPage();
+                                            if (start > 0) {
+                                                setLimit(prev => prev - 1);
+                                                setStart(prev => prev - 1);
+                                            }
+                                        }}
+                                    >
+                                        <ArrowBackIosIcon
+                                            className={styles.idxBtnIcon}
+                                        />
+                                    </button>
+                                    <button
+                                        className={classnames(
+                                            styles.idxBtn,
+                                            styles.doubleArrowBtnLeft
+                                        )}
+                                        onClick={() => {
+                                            setPageIndex(0);
+                                            if (start > 0) {
+                                                setLimit(STARTLIMIT);
+                                                setStart(0);
+                                            }
+                                        }}
+                                    >
+                                        <DoubleArrowIcon
+                                            className={classnames(
+                                                styles.arrowIcon,
+                                                styles.arrowIconLeft
+                                            )}
+                                        />
+                                    </button>
+                                </>
                             }
                         />
-                        {pages.map((page, idx) => {
-                            const active = pageIndex === idx;
-                            return (
-                                <button
-                                    key={idx}
-                                    className={classnames(
-                                        styles.paginationButton,
-                                        {
-                                            [styles.paginationButtonActive]:
-                                                active,
-                                        }
-                                    )}
-                                    onClick={() => setPageIndex(idx)}
-                                >
-                                    {idx + 1}
-                                </button>
-                            );
-                        })}
+
+                        {pages
+                            .map((page, idx) => {
+                                const active = pageIndex === idx;
+                                return (
+                                    <button
+                                        key={idx}
+                                        className={classnames(
+                                            styles.paginationButton,
+                                            {
+                                                [styles.paginationButtonActive]:
+                                                    active,
+                                            }
+                                        )}
+                                        onClick={() => {
+                                            setPageIndex(idx);
+                                        }}
+                                    >
+                                        {idx + 1}
+                                    </button>
+                                );
+                            })
+                            .slice(start, limit)}
                         <ConditionallyRender
                             condition={pageIndex < pages.length - 1}
                             show={
-                                <button
-                                    onClick={() => nextPage()}
-                                    className={classnames(
-                                        styles.idxBtn,
-                                        styles.idxBtnRight
-                                    )}
-                                >
-                                    <ArrowForwardIosIcon
-                                        className={styles.idxBtnIcon}
-                                    />
-                                </button>
+                                <>
+                                    <button
+                                        onClick={() => {
+                                            nextPage();
+                                            if (limit < pages.length) {
+                                                setLimit(prev => prev + 1);
+                                                setStart(prev => prev + 1);
+                                            }
+                                        }}
+                                        className={classnames(
+                                            styles.idxBtn,
+                                            styles.idxBtnRight
+                                        )}
+                                    >
+                                        <ArrowForwardIosIcon
+                                            className={styles.idxBtnIcon}
+                                        />
+                                    </button>
+                                    <button
+                                        className={classnames(
+                                            styles.idxBtn,
+                                            styles.doubleArrowBtnRight
+                                        )}
+                                        onClick={() => {
+                                            setPageIndex(pages.length - 1);
+                                            setLimit(pages.length);
+                                            setStart(pages.length - STARTLIMIT);
+                                        }}
+                                    >
+                                        <DoubleArrowIcon
+                                            className={styles.arrowIcon}
+                                        />
+                                    </button>
+                                </>
                             }
                         />
                     </div>
diff --git a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
index 70e20b0932..13360b5bd2 100644
--- a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
+++ b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
@@ -18,6 +18,7 @@ export const useStyles = makeStyles(theme => ({
         cursor: 'pointer',
         backgroundColor: 'efefef',
         margin: '0 0.2rem',
+        width: '31px',
         borderRadius: '3px',
         padding: '0.25rem 0.5rem',
     },
@@ -34,6 +35,16 @@ export const useStyles = makeStyles(theme => ({
         height: '23px',
         cursor: 'pointer',
     },
+    doubleArrowBtnLeft: {
+        left: '-55px',
+    },
+    doubleArrowBtnRight: {
+        right: '-55px',
+    },
+    arrowIcon: { height: '15px', width: '15px' },
+    arrowIconLeft: {
+        transform: 'rotate(180deg)',
+    },
     idxBtnIcon: {
         height: '15px',
         width: '15px',