64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import { Stack } from '@chakra-ui/react';
|
|
import { BooksListQuery } from '@generated/types';
|
|
import { useState } from 'react';
|
|
import { Pagination } from '../components/Pagination';
|
|
import { WorkingList } from '../components/WorkingList';
|
|
import { ListSearch } from '../components/ListSearch';
|
|
import { bookFragment } from '../fragments';
|
|
import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
|
|
import { PaginatedListSkeleton } from './PaginatedListSkeleton';
|
|
|
|
export function BookSearchList() {
|
|
const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
|
|
const [workingsListPage, setWorkingsListPage] = useState<number>(1);
|
|
const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(10);
|
|
const startIndex = (workingsListPage - 1) * workingsListPageSize;
|
|
|
|
const { data } = usePaginatedQuery<BooksListQuery>({
|
|
query,
|
|
input: {
|
|
filter: {
|
|
terms: workingSearchValue,
|
|
offset: startIndex,
|
|
size: workingsListPageSize
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<ListSearch placeholder="Search works..." onSubmit={value => setWorkingSearchValue(value)} />
|
|
{data != null ? (
|
|
<>
|
|
<WorkingList workingsList={[...data.bookMany.items]} />
|
|
{data.bookMany.total > workingsListPageSize && (
|
|
<Stack justifyContent="center" alignItems="center">
|
|
<Pagination
|
|
total={data.bookMany.total}
|
|
page={workingsListPage}
|
|
setPage={setWorkingsListPage}
|
|
pageSize={workingsListPageSize}
|
|
setPageSize={setWorkingsListPageSize}
|
|
/>
|
|
</Stack>
|
|
)}
|
|
</>
|
|
) : (
|
|
<PaginatedListSkeleton />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const query = gql`
|
|
query BooksList($input: BookManyInput!) {
|
|
bookMany(input: $input) {
|
|
items {
|
|
...Book
|
|
}
|
|
total
|
|
}
|
|
}
|
|
${bookFragment}
|
|
`;
|