Add pagination to Hub (#844)
This commit is contained in:
parent
72fa95ea20
commit
b978b051d4
|
@ -71,23 +71,24 @@ const useDb = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const searchTunes = async (search?: string) => {
|
||||
// TODO: add pagination
|
||||
const batchSide = 100;
|
||||
const phrases = search ? search.replace(/ +(?= )/g,'').split(' ') : [];
|
||||
const searchTunes = async (search: string, page: number, perPage: number) => {
|
||||
const phrases = search.length > 0 ? search.replace(/ +(?= )/g,'').split(' ') : [];
|
||||
const filter = phrases
|
||||
.filter((phrase) => phrase.length > 1)
|
||||
.map((phrase) => `textSearch ~ "${phrase}"`)
|
||||
.join(' || ');
|
||||
|
||||
try {
|
||||
const list = await client.records.getFullList(Collections.Tunes, batchSide, {
|
||||
const list = await client.records.getList(Collections.Tunes, page, perPage, {
|
||||
sort: '-created',
|
||||
filter,
|
||||
expand: 'userProfile',
|
||||
});
|
||||
|
||||
return Promise.resolve(list as TunesRecordFull[]);
|
||||
return Promise.resolve({
|
||||
items: list.items as TunesRecordFull[],
|
||||
totalItems: list.totalItems,
|
||||
});
|
||||
} catch (error) {
|
||||
Sentry.captureException(error);
|
||||
databaseGenericError(new Error(formatError(error)));
|
||||
|
@ -101,7 +102,7 @@ const useDb = () => {
|
|||
createTune: (data: TunesRecord): Promise<TunesRecordFull> => createTune(data),
|
||||
getTune: (tuneId: string): Promise<TunesRecordFull | null> => getTune(tuneId),
|
||||
getIni: (tuneId: string): Promise<IniFilesRecordFull | null> => getIni(tuneId),
|
||||
searchTunes: (search?: string): Promise<TunesRecordFull[]> => searchTunes(search),
|
||||
searchTunes: (search: string, page: number, perPage: number): Promise<{ items: TunesRecordFull[]; totalItems: number }> => searchTunes(search, page, perPage),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@ import {
|
|||
Grid,
|
||||
Input,
|
||||
InputRef,
|
||||
Pagination,
|
||||
Space,
|
||||
Table,
|
||||
Typography,
|
||||
|
@ -49,14 +50,16 @@ const Hub = () => {
|
|||
const [dataSource, setDataSource] = useState<{}[]>([]); // TODO: fix this type
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(5);
|
||||
const [total, setTotal] = useState(0);
|
||||
const searchRef = useRef<InputRef | null>(null);
|
||||
|
||||
const loadData = debounce(async (searchText?: string) => {
|
||||
const loadData = debounce(async (searchText: string) => {
|
||||
setIsLoading(true);
|
||||
const list = await searchTunes(searchText);
|
||||
|
||||
// set initial list
|
||||
setDataSource(list.map((tune) => ({
|
||||
const { items, totalItems } = await searchTunes(searchText, page, pageSize);
|
||||
setTotal(totalItems);
|
||||
const mapped = items.map((tune) => ({
|
||||
...tune,
|
||||
key: tune.tuneId,
|
||||
year: tune.year,
|
||||
|
@ -65,7 +68,8 @@ const Hub = () => {
|
|||
aspiration: aspirationMapper[tune.aspiration],
|
||||
published: formatTime(tune.updated),
|
||||
stars: 0,
|
||||
})));
|
||||
}));
|
||||
setDataSource(mapped);
|
||||
setIsLoading(false);
|
||||
}, 300);
|
||||
|
||||
|
@ -78,19 +82,20 @@ const Hub = () => {
|
|||
const handleGlobalKeyboard = useCallback((e: KeyboardEvent) => {
|
||||
if (isEscape(e)) {
|
||||
setSearchQuery('');
|
||||
loadData();
|
||||
loadData('');
|
||||
}
|
||||
}, [loadData]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
loadData('');
|
||||
|
||||
window.addEventListener('keydown', handleGlobalKeyboard);
|
||||
|
||||
// searchRef.current?.focus(); // autofocus
|
||||
|
||||
return () => window.removeEventListener('keydown', handleGlobalKeyboard);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}, [page]);
|
||||
|
||||
const columns: ColumnsType<any> = [
|
||||
{
|
||||
|
@ -200,6 +205,19 @@ const Hub = () => {
|
|||
scroll={xs ? undefined : { x: 1360 }}
|
||||
pagination={false}
|
||||
/>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Pagination
|
||||
style={{ marginTop: 10 }}
|
||||
pageSize={pageSize}
|
||||
current={page}
|
||||
total={total}
|
||||
onChange={(newPage, newPageSize) => {
|
||||
setIsLoading(true);
|
||||
setPage(newPage);
|
||||
setPageSize(newPageSize);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue