From 09e50b91f3059b0ee9b61a9098aae71adf07582a Mon Sep 17 00:00:00 2001
From: krokodilka <nastyab015@yandex.ru>
Date: Thu, 26 May 2022 11:46:09 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9B=D0=B8=D1=81=D1=82=20=D0=B8=D0=B7=20103?=
 =?UTF-8?q?=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82=D1=81=D1=8F=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BC=20=D0=B8=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/paginatedList.tsx | 80 ++++++++++++++++++++++++++++++++++---------
 src/pagination.tsx    | 14 ++++----
 2 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/src/paginatedList.tsx b/src/paginatedList.tsx
index fce7ec2a..0e10a703 100644
--- a/src/paginatedList.tsx
+++ b/src/paginatedList.tsx
@@ -1,40 +1,86 @@
-import React from 'react';
-import { LinkBox, LinkOverlay, HStack, Box } from '@chakra-ui/react';
+import React, {useEffect} from 'react';
+import {LinkBox, LinkOverlay, VStack, Box, Button,
+    Select, HStack,
+} from '@chakra-ui/react';
 import Pagination from "./pagination";
 
-let arr = []
+let source: any = []
+let arr: any = source
 function generation () {
-    let i = 0;
-    while (i < 103) {
-        arr.push("name " + i)
-        i++;
+    if (arr.length === 0) {
+        let i = 0;
+        while (i < 103) {
+            source.push("name " + i)
+            i++;
+        }
     }
 }
 
+let arrPageSize: any = [
+    10,
+    25,
+    50,
+    100
+]
 
 export default () => {
 
-    const [page, setPage] = React.useState<number>(10)
+    const [page, setPage] = React.useState<number>(1)
+    const [sizePage, setSizePage] = React.useState<number>(10)
+    const [countPages, setCountPages] = React.useState<number>(Math.ceil(source.length/sizePage))
+    const [firstIndexList, setFirstIndexList] = React.useState<number>(0)
+    const [arr, setArr] = React.useState<any>(source.slice(0, sizePage))
 
     function onPageChange (page: number) {
+
+        let start = (page - 1) * sizePage
+        let end = start + sizePage
+
+        setArr(source.slice(start, end))
+        setFirstIndexList(start)
         setPage(page)
-        console.log(page)
     }
-    // generation()
+    function onSizeChange (size: number) {
+        let newArr = source.slice(firstIndexList, firstIndexList + size)
+        setArr(newArr)
+        setSizePage(size)
+        setCountPages(Math.ceil(source.length/size))
+        console.log("теперь текущая страница = " + Math.floor((sizePage * page) / size))
+        console.log((sizePage * page))
+        console.log(size)
+        setPage(Math.floor(firstIndexList / size + 1))
+    }
+
+    generation()
     return(
         <>
-            <HStack>
-                <Box>
-
+            <VStack width="min-content">
+                <Box
+                width={"600px"}
+                height={"400px"}
+                overflow="auto"
+                >
+                    {
+                        arr.map((e: string, i: number) => {
+                            return <Button width="100%" key={i}>{e}</Button>
+                        })
+                    }
                 </Box>
-                <Box>
+                <HStack flexWrap="wrap" width="100%" justifyContent="center">
                     <Pagination
-                        count={10}
+                        count={countPages}
                         current={page}
                         onPageChange={onPageChange}
                     />
-                </Box>
-            </HStack>
+                    <Select maxW="90px" onChange={(e) => onSizeChange(Number(e.target.value))}>
+                        {
+                            arrPageSize.map((e:number,i:number)=> {
+                                return <option key={i} value={e}>{e}</option>
+                            })
+                        }
+                    </Select>
+                </HStack>
+            </VStack>
         </>
     )
 }
\ No newline at end of file
diff --git a/src/pagination.tsx b/src/pagination.tsx
index 7663f4cf..bff7b5b2 100644
--- a/src/pagination.tsx
+++ b/src/pagination.tsx
@@ -52,14 +52,16 @@ export default ({
 
 
     return(
-        <HStack>
-            <Button onClick={() => {onPageChange(1)}} key={0} leftIcon={<ArrowLeftIcon/>}/>
+        <HStack flexWrap="wrap">
+            <HStack>
+                <Button onClick={() => {onPageChange(1)}} key={0} leftIcon={<ArrowLeftIcon/>}/>
 
-            <Button color={current === left ? "blue" : ""} onClick={() => {onPageChange(left)}} key={1}>{left}</Button>
-            <Button color={current === center ? "blue" : ""} onClick={() => {onPageChange(center)}} key={2}>{center}</Button>
-            <Button color={current === right ? "blue" : ""} onClick={() => {onPageChange(right)}} key={3}>{right}</Button>
+                <Button isDisabled={left === 0 ? true : false} color={current === left ? "blue" : ""} onClick={() => {onPageChange(left)}} key={1}>{left === 0 ? "--" : left}</Button>
+                <Button color={current === center ? "blue" : ""} onClick={() => {onPageChange(center)}} key={2}>{center}</Button>
+                <Button isDisabled={right > count ? true : false} color={current === right ? "blue" : ""} onClick={() => {onPageChange(right)}} key={3}>{right > count ? "--" : right}</Button>
 
-            <Button onClick={() => {onPageChange(count)}} key={4} rightIcon={<ArrowRightIcon/>}/>
+                <Button onClick={() => {onPageChange(count)}} key={4} rightIcon={<ArrowRightIcon/>}/>
+            </HStack>
 
             <NumberInput
                 size='sm'