milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

use single state and local storage

Browse source
This commit is contained in:
grafixeyehero 2022-10-21 21:47:54 +03:00
parent f40c565e4a
commit 6341a71fec
15 changed files with 485 additions and 508 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/view/components/Pagination.tsx
View file

@ -3,18 +3,18 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import globalize from '../../scripts/globalize';
import * as userSettings from '../../scripts/settings/userSettings';
import { QueryI } from './interface';
import { ViewSettingsI } from './interface';
interface PaginationProps {
query: QueryI;
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
viewSettings: ViewSettingsI;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
itemsResult?: BaseItemDtoQueryResult;
}
const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} }) => {
const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsResult = {} }) => {
const limit = userSettings.libraryPageSize(undefined);
const totalRecordCount = itemsResult.TotalRecordCount || 0;
const startIndex = query.StartIndex || 0;
const startIndex = viewSettings.StartIndex || 0;
const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
const showControls = limit < totalRecordCount;
const element = useRef<HTMLDivElement>(null);
@ -22,16 +22,22 @@ const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} })
const onNextPageClick = useCallback(() => {
if (limit > 0) {
const newIndex = startIndex + limit;
setQuery({StartIndex: newIndex});
setViewSettings((prevState) => ({
...prevState,
StartIndex: newIndex
}));
}
}, [limit, setQuery, startIndex]);
}, [limit, setViewSettings, startIndex]);
const onPreviousPageClick = useCallback(() => {
if (limit > 0) {
const newIndex = Math.max(0, startIndex - limit);
setQuery({StartIndex: newIndex});
setViewSettings((prevState) => ({
...prevState,
StartIndex: newIndex
}));
}
}, [limit, setQuery, startIndex]);
}, [limit, setViewSettings, startIndex]);
useEffect(() => {
const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;