From 30cf9c55f06dc3254bbf0bff7b1272ae02a68b39 Mon Sep 17 00:00:00 2001
From: soup <soup@r4tio.dev>
Date: Thu, 30 Mar 2023 22:14:14 +0200
Subject: [PATCH] feat(web): preserve sort order on Filters list (#772)

* preserve filter sortOrder in localStorage

* refactor to use SettingsContext
---
 web/src/screens/filters/list.tsx | 30 ++++++++++++++----------------
 web/src/utils/Context.ts         | 29 ++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/web/src/screens/filters/list.tsx b/web/src/screens/filters/list.tsx
index 9b63a59..bf6913e 100644
--- a/web/src/screens/filters/list.tsx
+++ b/web/src/screens/filters/list.tsx
@@ -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);
diff --git a/web/src/utils/Context.ts b/web/src/utils/Context.ts
index 41e03a1..e076e60 100644
--- a/web/src/utils/Context.ts
+++ b/web/src/utils/Context.ts
@@ -19,8 +19,11 @@ export const InitializeGlobalContext = () => {
       )
     }));
   }
+  const filterList_ctx = localStorage.getItem("filterList");
+  if (filterList_ctx) {
+    FilterListContext.set(JSON.parse(filterList_ctx));
+  }
 };
-
 interface AuthInfo {
   username: string;
   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);
+      }
+    }
+  }
+);
\ No newline at end of file