Move to Zustand and add Filters to web_test (#1077)

* Moved to zustand and started refactored filters

- Move from redux to zustand
- Refactor Filters typings and add some helper types
- Add Filters button and Picker/Switch filter options
- Fixed Syosetu typings

* Add rule consistent-type-definitions

- Add consistent-type-definitions eslint rule to force consistent use of types instead of interfaces
- Run eslint to auto-change every interface to types

https://dev.to/atheodosiou/types-vs-interfaces-in-typescript-making-the-right-choice-48a4
https://www.youtube.com/watch?v=zM9UPcIyyhQ

* Add other filters and refactor

- Move Dialog to FiltersDialog
- CheckboxFilter, TextFilter, XCheckboxFilter added
- Added TripleCheckbox and TripleSwitch as tri-state checkbox/switch items using Mui stylings

* TriStateCheckbox/Switch refactor

- Change name of TripleSwitch and TripleCheckbox to TriState
- Change slightly TriStateSwitch and StyledSwitch styles
- Add option to change into TriStateSwitches via `localStorage` value `useSwitches`

* Refactor code and fix issues

* fix: prettier

---------

Co-authored-by: nyagami <hoangquan05112002@gmail.com>

src/store/dialogStore.ts

@@ -0,0 +1,39 @@
+import { StoreCreator } from '.';
+
+export enum EDialog {}
+
+export type DialogStore = {
+  activeDialogs: EDialog[];
+  showDialog(dialog: EDialog): void;
+  hideDialog(dialog: EDialog): void;
+  hideAllDialogs(): void;
+};
+
+/**
+ * @param set Use this inside actions to change the state
+ * @param get Use this inside actions to get the current state
+ */
+export const DialogStore: StoreCreator<DialogStore> = set => ({
+  // this is initial state
+  activeDialogs: [],
+
+  // those are actions
+  showDialog(dialog: EDialog) {
+    set(state => ({
+      ...state,
+      activeDialogs: [...state.activeDialogs, dialog],
+    }));
+  },
+  hideDialog(dialog) {
+    set(state => ({
+      ...state,
+      activeDialogs: state.activeDialogs.filter(d => d !== dialog),
+    }));
+  },
+  hideAllDialogs() {
+    set(state => ({
+      ...state,
+      activeDialogs: [],
+    }));
+  },
+});

src/store/index.ts

@@ -0,0 +1,28 @@
+import { create, StateCreator } from 'zustand';
+import { PluginStore } from './pluginStore';
+import { DialogStore } from './dialogStore';
+import { OverlayStore } from './overlayStore';
+
+export type AppStore = DialogStore &
+  OverlayStore &
+  PluginStore & { useSwitches: boolean; setUseSwitches(value: boolean): void };
+
+// Helper types to use "slicing" like in Redux... We could just not use slicing, but eh
+export type SetStore = Parameters<StateCreator<AppStore>>[0];
+export type GetStore = Parameters<StateCreator<AppStore>>[1];
+export type StoreCreator<T> = (s: SetStore, g: GetStore) => T;
+
+export const useAppStore = create<AppStore>((set: SetStore, get: GetStore) => ({
+  ...DialogStore(set, get),
+  ...OverlayStore(set, get),
+  ...PluginStore(set, get),
+  useSwitches: !!localStorage.getItem('useSwitches'),
+  setUseSwitches(uS: boolean) {
+    set(state => ({
+      ...state,
+      useSwitches: uS,
+    }));
+    if (uS) localStorage.setItem('useSwitches', 'true');
+    else localStorage.removeItem('useSwitches');
+  },
+}));

src/store/overlayStore.ts

@@ -0,0 +1,30 @@
+import { StoreCreator } from '.';
+
+export type OverlayStore = {
+  loading: boolean;
+  showLoading(): void;
+  hideLoading(): void;
+};
+
+/**
+ * @param set Use this inside actions to change the state
+ * @param get Use this inside actions to get the current state
+ */
+export const OverlayStore: StoreCreator<OverlayStore> = set => ({
+  // this is initial state
+  loading: false,
+
+  // those are actions
+  showLoading() {
+    set(state => ({
+      ...state,
+      loading: true,
+    }));
+  },
+  hideLoading() {
+    set(state => ({
+      ...state,
+      loading: false,
+    }));
+  },
+});

src/store/pluginStore.ts

@@ -0,0 +1,27 @@
+import { Plugin } from '@typings/plugin';
+import { StoreCreator } from '.';
+import { getPlugin } from '@provider/plugins';
+
+export type PluginStore = {
+  pluginItem?: Plugin.PluginItem;
+  plugin?: Plugin.PluginBase;
+  selectPlugin(plugin: Plugin.PluginItem): void;
+};
+
+/**
+ * @param set State setter for use inside actions
+ * @param get State getter for use inside actions, outside of State setter
+ */
+export const PluginStore: StoreCreator<PluginStore> = set => ({
+  // this is initial state
+  // selectedPlugin: undefined,
+
+  // those are actions
+  selectPlugin(pluginItem) {
+    set(state => ({
+      ...state,
+      pluginItem,
+      plugin: getPlugin(pluginItem.id),
+    }));
+  },
+});