PaginatedList review

src/counter.tsx

@@ -1,61 +0,0 @@
-import React, {useEffect} from 'react';
-import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
-import { LinkBox, LinkOverlay, HStack, Box, Button, Text } from '@chakra-ui/react';
-
-interface propsTS {
-    count: number
-    current: number
-
-    onPageChange(e: number): void
-}
-
-export default React.memo(({
-    count,
-    current,
-    onPageChange,
-}: propsTS) => {
-
-    //Проверка, что пришедшие данные валидны
-    if(count <= 0 || current <= 0) {return <Text>Указанные значения ниже нуля</Text>}
-    if(count < current) {return <Text>Текущая страница больше общего числа</Text>}
-
-    let a = []
-    //Создание списка кнопок идёт поэлементно с лева на право
-
-    //Создание кнопки <-
-    a.push(<Button onClick={() => {onPageChange(0)}} key={0} leftIcon={<ArrowBackIcon/>}/>)
-
-    //Создание троеточия и первой кнопки
-    if (current > 3) {
-        a.push(<Button onClick={() => {onPageChange(1)}} key={1}>1</Button>)
-    }
-    if (current > 3) {
-        a.push("...")
-    }
-
-    //Создание 3 кнопок
-
-    if (current - 1 !== 0) {
-        a.push(<Button onClick={() => {onPageChange(current - 1)}} key={current-1}>{current-1}</Button>)
-    }
-    a.push(<Button onClick={() => {onPageChange(current)}} key={current}>{current}</Button>)
-    if (current + 1 <= count) {
-        a.push(<Button onClick={() => {onPageChange(current + 1)}} key={current+1}>{current + 1}</Button>)
-    }
-
-    //Создание троеточия и последней кнопки
-    if (current < (count - 2)) {
-        a.push("...")
-        a.push(<Button  onClick={() => {onPageChange(count)}} key={count}>{count}</Button>)
-    }
-
-    //Кнопка ->
-    a.push(<Button onClick={() => {onPageChange(count + 1)}} key={count + 1} rightIcon={<ArrowForwardIcon/>}/>)
-    // }
-
-    return(
-        <>
-            {a}
-        </>
-    )
-})

src/paginatedList.tsx

@@ -1,17 +1,14 @@
-import React, {useEffect} from 'react';
+import React from 'react';
-import {LinkBox, LinkOverlay, VStack, Box, Button,
+import { VStack, Box, Button,
     Select, HStack,
 } from '@chakra-ui/react';
 import Pagination from "./pagination";
 
 let source: any = []
-let arr: any = source
 function generation () {
-    if (arr.length === 0) {
+    if (source.length === 0) {
-        let i = 0;
+        for ( let i = 0; i < 103; i++) {
-        while (i < 103) {
             source.push("name " + i)
-            i++;
         }
     }
 }
@@ -23,6 +20,8 @@ let arrPageSize: any = [
     100
 ]
 
+generation()
+
 export default () => {
 
     const [page, setPage] = React.useState<number>(1)
@@ -45,13 +44,9 @@ export default () => {
         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(
         <>
             <VStack width="min-content">

src/pagination.tsx

@@ -1,6 +1,6 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
-import { LinkBox, LinkOverlay, HStack, Box, Button, Text, NumberInput, NumberInputField, NumberIncrementStepper,
+import { HStack, Button, Text, NumberInput, NumberInputField, NumberIncrementStepper,
     NumberDecrementStepper, NumberInputStepper,
 } from '@chakra-ui/react';
 

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": [
       "dom",
       "dom.iterable",