147 lines
4.2 KiB
TypeScript
147 lines
4.2 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import { Skeleton, Stack } from '@chakra-ui/react';
|
|
import { WorkingListQuery } from '@generated/types';
|
|
import { createFileRoute } from '@tanstack/react-router';
|
|
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 const Route = createFileRoute('/')({
|
|
component: RouteComponent
|
|
});
|
|
|
|
function RouteComponent() {
|
|
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<WorkingListQuery>({
|
|
query,
|
|
input: {
|
|
filter: {
|
|
terms: workingSearchValue,
|
|
offset: startIndex,
|
|
size: workingsListPageSize
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Stack justifyContent="center" alignItems="center">
|
|
<Stack width="90%">
|
|
{data != null ? (
|
|
<>
|
|
<WorkingListSearch
|
|
value={workingSearchValue}
|
|
onSubmit={value => {
|
|
alert(value);
|
|
}}
|
|
onChange={value => setWorkingSearchValue(value)}
|
|
/>
|
|
|
|
<WorkingList
|
|
workingsList={data.workingMany.items.map(item => ({
|
|
...item,
|
|
chaptersTotal: item.chapters.total,
|
|
reviewsTotal: item.reviews.total
|
|
}))}
|
|
/>
|
|
|
|
<Pagination
|
|
total={data.workingMany.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} />
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
const query = gql`
|
|
query WorkingList($input: WorkingManyInput!) {
|
|
workingMany(input: $input) {
|
|
items {
|
|
id
|
|
type
|
|
title
|
|
description
|
|
author {
|
|
id
|
|
username
|
|
}
|
|
updatedAt
|
|
progressStatus
|
|
ratingTotal
|
|
reviewsTotal
|
|
book {
|
|
id
|
|
chaptersTotal
|
|
wordsTotal
|
|
}
|
|
}
|
|
total
|
|
}
|
|
}
|
|
`;
|
|
|
|
// const workingData1: WorkingCardProps = {
|
|
// id: '1',
|
|
// title: 'Worth the Candle',
|
|
// description: `A teenager struggling after the death of his best friend finds himself in a fantasy
|
|
// world - one which seems to be an amalgamation of every Dungeons and Dragons campaign
|
|
// they ever played together. Now he's stuck trying to find the answers to why he's there
|
|
// and what this world is trying to say. The most terrifying answer might be that this
|
|
// world is an expression of the person he was back on Earth.`,
|
|
// author: {
|
|
// id: '1',
|
|
// createdAt: '12.8.2025',
|
|
// updatedAt: '4.9.2025',
|
|
// username: 'AlexanderWhales'
|
|
// },
|
|
// progressStatus: WorkingProgressStatus.Finished,
|
|
// updatedAt: '20.10.2025',
|
|
// chaptersTotal: 10,
|
|
// wordsTotal: 34000,
|
|
// ratingTotal: 10,
|
|
// reviewsTotal: 3
|
|
// };
|
|
//
|
|
// const workingData2: WorkingCardProps = {
|
|
// id: '2',
|
|
// title: 'Test',
|
|
// description: `Description.`,
|
|
// author: {
|
|
// id: '1',
|
|
// createdAt: '12.8.2025',
|
|
// updatedAt: '4.9.2025',
|
|
// username: 'JohnSmith'
|
|
// },
|
|
// progressStatus: WorkingProgressStatus.InProgress,
|
|
// updatedAt: '20.10.2025',
|
|
// chaptersTotal: 10,
|
|
// wordsTotal: 1200,
|
|
// ratingTotal: -10,
|
|
// reviewsTotal: 0
|
|
// };
|
|
//
|
|
// const mockWorkingData = {
|
|
// total: 4,
|
|
// items: [workingData1, workingData2, { ...workingData1, id: '3' }, { ...workingData2, id: '4' }]
|
|
// };
|
|
//
|