Лист из 103 элементов переключается размером и страницами

src/paginatedList.tsx

@@ -1,40 +1,86 @@
-import React from 'react';
+import React, {useEffect} from 'react';
-import { LinkBox, LinkOverlay, HStack, Box } from '@chakra-ui/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;
+    if (arr.length === 0) {
-    while (i < 103) {
+        let i = 0;
-        arr.push("name " + i)
+        while (i < 103) {
-        i++;
+            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>
+            <VStack width="min-content">
-                <Box>
+                <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>
+                    <Select maxW="90px" onChange={(e) => onSizeChange(Number(e.target.value))}>
-            </HStack>
+                        {
+                            arrPageSize.map((e:number,i:number)=> {
+                                return <option key={i} value={e}>{e}</option>
+                            })
+                        }
+                    </Select>
+                </HStack>
+            </VStack>
         </>
     )
 }

src/pagination.tsx

@@ -52,14 +52,16 @@ export default ({
 
 
     return(
-        <HStack>
+        <HStack flexWrap="wrap">
-            <Button onClick={() => {onPageChange(1)}} key={0} leftIcon={<ArrowLeftIcon/>}/>
+            <HStack>
+                <Button onClick={() => {onPageChange(1)}} key={0} leftIcon={<ArrowLeftIcon/>}/>
 
-            <Button color={current === left ? "blue" : ""} onClick={() => {onPageChange(left)}} key={1}>{left}</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 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={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'