idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): releases page search and filtering (#1364)

Browse source 
* fix(web): releases page search and filtering

* fix(web): releases page reset on filter change

* feat(releases): useQuery instead of useSuspenseQuery

useSuspenseQuery triggers a full loader that resets filters. useQuery does not.
This commit is contained in:
ze0s 2024-01-24 14:49:31 +01:00 • committed by GitHub
parent f021c61255
commit dea0b32b89
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 22 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/src/screens/releases/ReleaseTable.tsx
View file

@ -5,7 +5,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { useSuspenseQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Column, useFilters, usePagination, useSortBy, useTable } from "react-table"; import { Column, useFilters, usePagination, useSortBy, useTable } from "react-table";
import { import {
ChevronDoubleLeftIcon, ChevronDoubleLeftIcon,
@ -32,12 +32,11 @@ export const releaseKeys = {
detail: (id: number) => [...releaseKeys.details(), id] as const detail: (id: number) => [...releaseKeys.details(), id] as const
}; };
type TableState = { type TableState = {
queryPageIndex: number; queryPageIndex: number;
queryPageSize: number; queryPageSize: number;
totalCount: number; totalCount: number;
queryFilters: ReleaseFilter[]; queryFilters: ReleaseFilter[];
}; };
const initialState: TableState = { const initialState: TableState = {
@ -48,17 +47,17 @@ const initialState: TableState = {
}; };
enum ActionType { enum ActionType {
PAGE_CHANGED = "PAGE_CHANGED", PAGE_CHANGED = "PAGE_CHANGED",
PAGE_SIZE_CHANGED = "PAGE_SIZE_CHANGED", PAGE_SIZE_CHANGED = "PAGE_SIZE_CHANGED",
TOTAL_COUNT_CHANGED = "TOTAL_COUNT_CHANGED", TOTAL_COUNT_CHANGED = "TOTAL_COUNT_CHANGED",
FILTER_CHANGED = "FILTER_CHANGED" FILTER_CHANGED = "FILTER_CHANGED"
} }
type Actions = type Actions =
| { type: ActionType.FILTER_CHANGED; payload: ReleaseFilter[]; } | { type: ActionType.FILTER_CHANGED; payload: ReleaseFilter[]; }
| { type: ActionType.PAGE_CHANGED; payload: number; } | { type: ActionType.PAGE_CHANGED; payload: number; }
| { type: ActionType.PAGE_SIZE_CHANGED; payload: number; } | { type: ActionType.PAGE_SIZE_CHANGED; payload: number; }
| { type: ActionType.TOTAL_COUNT_CHANGED; payload: number; }; | { type: ActionType.TOTAL_COUNT_CHANGED; payload: number; };
const TableReducer = (state: TableState, action: Actions): TableState => { const TableReducer = (state: TableState, action: Actions): TableState => {
switch (action.type) { switch (action.type) {
@ -120,7 +119,7 @@ export const ReleaseTable = () => {
const [{ queryPageIndex, queryPageSize, totalCount, queryFilters }, dispatch] = const [{ queryPageIndex, queryPageSize, totalCount, queryFilters }, dispatch] =
React.useReducer(TableReducer, initialState); React.useReducer(TableReducer, initialState);
const { isLoading, error, data, isSuccess } = useSuspenseQuery({ const { isLoading, error, data, isSuccess } = useQuery({
queryKey: releaseKeys.list(queryPageIndex, queryPageSize, queryFilters), queryKey: releaseKeys.list(queryPageIndex, queryPageSize, queryFilters),
queryFn: () => APIClient.release.findQuery(queryPageIndex * queryPageSize, queryPageSize, queryFilters), queryFn: () => APIClient.release.findQuery(queryPageIndex * queryPageSize, queryPageSize, queryFilters),
staleTime: 5000 staleTime: 5000
@ -144,7 +143,6 @@ export const ReleaseTable = () => {
const displayData = showLinuxIsos ? modifiedData : (data?.data ?? []); const displayData = showLinuxIsos ? modifiedData : (data?.data ?? []);
const { const {
getTableProps, getTableProps,
getTableBodyProps, getTableBodyProps,
@ -170,7 +168,7 @@ export const ReleaseTable = () => {
initialState: { initialState: {
pageIndex: queryPageIndex, pageIndex: queryPageIndex,
pageSize: queryPageSize, pageSize: queryPageSize,
filters: filterTypeFromUrl ? [{ id: "action_status", value: filterTypeFromUrl }] : [] filters: queryFilters,
}, },
manualPagination: true, manualPagination: true,
manualFilters: true, manualFilters: true,
@ -205,8 +203,15 @@ export const ReleaseTable = () => {
React.useEffect(() => { React.useEffect(() => {
dispatch({ type: ActionType.FILTER_CHANGED, payload: filters }); dispatch({ type: ActionType.FILTER_CHANGED, payload: filters });
gotoPage(0);
}, [filters]); }, [filters]);
React.useEffect(() => {
if (filterTypeFromUrl != null) {
dispatch({ type: ActionType.FILTER_CHANGED, payload: [{ id: "action_status", value: filterTypeFromUrl! }] });
}
}, [filterTypeFromUrl]);
if (error) { if (error) {
return <p>Error</p>; return <p>Error</p>;
} }