mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 13:38:51 +00:00
Format code style and remove unnecessary code
This commit is contained in:
@@ -6,13 +6,6 @@ const StyledModal = styled.div`
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
background-color: var(--color-grey-0);
|
|
||||||
|
|
||||||
border-radius: var(--border-radius-lg);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
|
|
||||||
padding: 3.2rem 4rem;
|
|
||||||
|
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,13 @@
|
|||||||
import { DEFAULT_PAGE_SIZE } from '@constant/config';
|
|
||||||
import { useCallback, useMemo } from 'react';
|
import { useCallback, useMemo } from 'react';
|
||||||
import { useSearchParams } from 'react-router-dom';
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
import { DEFAULT_PAGE_SIZE } from '@constant/config';
|
||||||
|
|
||||||
|
// Styled
|
||||||
import { Buttons, PaginationBtn, StyledPagination } from './styled';
|
import { Buttons, PaginationBtn, StyledPagination } from './styled';
|
||||||
|
|
||||||
|
// Components
|
||||||
import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
|
import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
|
||||||
|
|
||||||
interface IPagination {
|
interface IPagination {
|
||||||
@@ -17,14 +23,18 @@ const Pagination = ({ count }: IPagination) => {
|
|||||||
const totalPage = Math.ceil(count / DEFAULT_PAGE_SIZE);
|
const totalPage = Math.ceil(count / DEFAULT_PAGE_SIZE);
|
||||||
|
|
||||||
const nextPage = useCallback(() => {
|
const nextPage = useCallback(() => {
|
||||||
const next = currentPage === totalPage ? currentPage : currentPage + 1;
|
const next = currentPage === totalPage
|
||||||
|
? currentPage
|
||||||
|
: currentPage + 1;
|
||||||
|
|
||||||
searchParams.set('page', next.toString());
|
searchParams.set('page', next.toString());
|
||||||
setSearchParams(searchParams);
|
setSearchParams(searchParams);
|
||||||
}, [currentPage, searchParams, totalPage, setSearchParams]);
|
}, [currentPage, searchParams, totalPage, setSearchParams]);
|
||||||
|
|
||||||
const previousPage = useCallback(() => {
|
const previousPage = useCallback(() => {
|
||||||
const previous = currentPage === 1 ? currentPage : currentPage - 1;
|
const previous = currentPage === 1
|
||||||
|
? currentPage
|
||||||
|
: currentPage - 1;
|
||||||
|
|
||||||
searchParams.set('page', previous.toString());
|
searchParams.set('page', previous.toString());
|
||||||
setSearchParams(searchParams);
|
setSearchParams(searchParams);
|
||||||
@@ -36,7 +46,9 @@ const Pagination = ({ count }: IPagination) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const toIndex = useMemo(
|
const toIndex = useMemo(
|
||||||
() => (currentPage === totalPage ? count : currentPage * DEFAULT_PAGE_SIZE),
|
() => (currentPage === totalPage
|
||||||
|
? count
|
||||||
|
: currentPage * DEFAULT_PAGE_SIZE),
|
||||||
[currentPage, count, totalPage]
|
[currentPage, count, totalPage]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { ReactNode, useContext } from 'react';
|
import { ReactNode, useContext } from 'react';
|
||||||
|
|
||||||
// Components
|
// Styled
|
||||||
import {
|
import {
|
||||||
StyledBody,
|
StyledBody,
|
||||||
StyledHeader,
|
StyledHeader,
|
||||||
|
|||||||
Reference in New Issue
Block a user