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