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

* 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

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