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

feat(web): preserve sort order on Filters list (#772)

Browse source 
* preserve filter sortOrder in localStorage

* refactor to use SettingsContext
This commit is contained in:
soup 2023-03-30 22:14:14 +02:00 • committed by GitHub
parent 86725d804e
commit 30cf9c55f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/screens/filters/list.tsx
View file

@ -1,4 +1,4 @@
import { Dispatch, FC, Fragment, MouseEventHandler, useReducer, useRef, useState } from "react"; import { Dispatch, FC, Fragment, MouseEventHandler, useReducer, useRef, useState, useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Listbox, Menu, Switch, Transition } from "@headlessui/react"; import { Listbox, Menu, Switch, Transition } from "@headlessui/react";
@ -9,6 +9,8 @@ import { useCallback } from "react";
import { Tooltip } from "react-tooltip"; import { Tooltip } from "react-tooltip";
import { FilterListContext, FilterListState } from "../../utils/Context";
import { import {
ArrowsRightLeftIcon, ArrowsRightLeftIcon,
CheckIcon, CheckIcon,
@ -31,18 +33,6 @@ import { EmptyListState } from "../../components/emptystates";
import { DeleteModal } from "../../components/modals"; import { DeleteModal } from "../../components/modals";
import { ArrowDownTrayIcon } from "@heroicons/react/24/solid"; import { ArrowDownTrayIcon } from "@heroicons/react/24/solid";
type FilterListState = {
indexerFilter: string[],
sortOrder: string;
status: string;
};
const initialState: FilterListState = {
indexerFilter: [],
sortOrder: "",
status: ""
};
enum ActionType { enum ActionType {
INDEXER_FILTER_CHANGE = "INDEXER_FILTER_CHANGE", INDEXER_FILTER_CHANGE = "INDEXER_FILTER_CHANGE",
INDEXER_FILTER_RESET = "INDEXER_FILTER_RESET", INDEXER_FILTER_RESET = "INDEXER_FILTER_RESET",
@ -260,8 +250,12 @@ function filteredData(data: Filter[], status: string) {
} }
function FilterList({ toggleCreateFilter }: any) { function FilterList({ toggleCreateFilter }: any) {
const [{ indexerFilter, sortOrder, status }, dispatchFilter] = const filterListState = FilterListContext.useValue();
useReducer(FilterListReducer, initialState);
const [{ indexerFilter, sortOrder, status }, dispatchFilter] = useReducer(
FilterListReducer,
filterListState
);
const { error, data } = useQuery( const { error, data } = useQuery(
["filters", indexerFilter, sortOrder], ["filters", indexerFilter, sortOrder],
@ -269,8 +263,12 @@ function FilterList({ toggleCreateFilter }: any) {
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
useEffect(() => {
FilterListContext.set({ indexerFilter, sortOrder, status });
}, [indexerFilter, sortOrder, status]);
if (error) { if (error) {
return (<p>An error has occurred: </p>); return <p>An error has occurred:</p>;
} }
const filtered = filteredData(data ?? [], status); const filtered = filteredData(data ?? [], status);

29
web/src/utils/Context.ts
View file

@ -19,8 +19,11 @@ export const InitializeGlobalContext = () => {
) )
})); }));
} }
const filterList_ctx = localStorage.getItem("filterList");
if (filterList_ctx) {
FilterListContext.set(JSON.parse(filterList_ctx));
}
}; };
interface AuthInfo { interface AuthInfo {
username: string; username: string;
isLoggedIn: boolean; isLoggedIn: boolean;
@ -78,3 +81,27 @@ export const SettingsContext = newRidgeState<SettingsType>(
} }
} }
); );
export type FilterListState = {
indexerFilter: string[],
sortOrder: string;
status: string;
};
export const FilterListContext = newRidgeState<FilterListState>(
{
indexerFilter: [],
sortOrder: "",
status: ""
},
{
onSet: (new_state) => {
try {
localStorage.setItem("filterList", JSON.stringify(new_state));
} catch (e) {
console.log("An error occurred while trying to modify the local filter list context state.");
console.log("Error:", e);
}
}
}
);