84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import { Skeleton, 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 { WorkingListSearch } from '../components/WorkingListSearch';
|
|
import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
|
|
|
|
export function BookSearchList() {
|
|
const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
|
|
const [workingsListPage, setWorkingsListPage] = useState<number>(1);
|
|
const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(2);
|
|
const startIndex = (workingsListPage - 1) * workingsListPageSize;
|
|
|
|
const { data } = usePaginatedQuery<BooksListQuery>({
|
|
query,
|
|
input: {
|
|
filter: {
|
|
terms: workingSearchValue,
|
|
offset: startIndex,
|
|
size: workingsListPageSize
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<>
|
|
{data != null ? (
|
|
<>
|
|
<WorkingListSearch
|
|
onSubmit={value => {
|
|
setWorkingSearchValue(value);
|
|
}}
|
|
/>
|
|
|
|
<WorkingList workingsList={[...data.bookMany.items]} />
|
|
|
|
{data.bookMany.items.length !== 0 && (
|
|
<Pagination
|
|
total={data.bookMany.total}
|
|
page={workingsListPage}
|
|
setPage={setWorkingsListPage}
|
|
pageSize={workingsListPageSize}
|
|
/>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Stack direction="row" justifyContent="center" alignItems="center" gap={2}>
|
|
<Skeleton height={10} width="80%" />
|
|
<Skeleton height={10} width="calc(20% - 6px)" />
|
|
</Stack>
|
|
<Skeleton height={20} />
|
|
<Skeleton height={20} />
|
|
<Skeleton height={20} />
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const query = gql`
|
|
query BooksList($input: BookManyInput!) {
|
|
bookMany(input: $input) {
|
|
items {
|
|
id
|
|
title
|
|
description
|
|
author {
|
|
id
|
|
username
|
|
}
|
|
updatedAt
|
|
progressStatus
|
|
ratingTotal
|
|
reviewsTotal
|
|
wordsTotal
|
|
chaptersTotal
|
|
}
|
|
total
|
|
}
|
|
}
|
|
`;
|