feat: keep checkbox options selected after closing dialog and after u…

…ser clicks filter button
forbole · Feb 9, 2024 · 2687eee · 2687eee
1 parent 6de5de5
commit 2687eee
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 29 deletions.
diff --git a/packages/ui/src/components/transaction_type_filter/hooks.ts b/packages/ui/src/components/transaction_type_filter/hooks.ts
@@ -1,7 +1,8 @@
+// useTransactionTypeFilter hook
 import { useEffect, useMemo, useState, ChangeEvent, useCallback } from 'react';
 import { useMessageTypesQuery } from '@/graphql/types/general_types';
 import { SetterOrUpdater, useRecoilState } from 'recoil';
-import { writeFilter, writeOpenDialog } from '@/recoil/transactions_filter';
+import { writeFilter, writeOpenDialog, writeSelectedMsgTypes } from '@/recoil/transactions_filter';
 
 export type MessageType = {
   __typename: string;
@@ -15,9 +16,15 @@ export const useTransactionTypeFilter = () => {
   const [filteredTypes, setFilteredTypes] = useState<{ module: string; msgTypes: MessageType[] }[]>(
     []
   );
-  const [txsFilter, setTxsFilter] = useState<string[]>([]);
+  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
   const [selectAllChecked, setSelectAllChecked] = useState<boolean>(false);
-  const [_, setFilter] = useRecoilState(writeFilter) as [string, SetterOrUpdater<string>];
+  // db message query filter
+  const [, setFilter] = useRecoilState(writeFilter) as [string, SetterOrUpdater<string>];
+  // checkbox message type filter
+  const [, setSelectedMsgs] = useRecoilState(writeSelectedMsgTypes) as [
+    string[],
+    SetterOrUpdater<string[]>
+  ];
   const [__, setOpenDialog] = useRecoilState(writeOpenDialog) as [
     boolean,
     SetterOrUpdater<boolean>
@@ -33,12 +40,7 @@ export const useTransactionTypeFilter = () => {
   };
 
   const handleCancel = () => {
-    handleClose();
-  };
-
-  const handleClose = () => {
     setOpenDialog(false);
-    setTxsFilter([]);
   };
 
   const mergeMessagesByLabel = (messages: MessageType[] | undefined): MessageType[] => {
@@ -87,26 +89,32 @@ export const useTransactionTypeFilter = () => {
         }
       });
 
-      return Object.entries(moduleMessagesMap).map(([module, msgTypes]) => ({ module, msgTypes }));
+      return Object.entries(moduleMessagesMap).map(([module, msgTypes]) => ({
+        module,
+        msgTypes,
+      }));
     },
     []
   );
 
   const handleFilterTxs = () => {
-    const str = txsFilter.join(',');
+    const str = selectedFilters.join(',');
     const query = `{${str}}`;
     setFilter(query);
+    setSelectedFilters(selectedFilters);
     setSelectAllChecked(false);
-    handleClose();
+    handleCancel(); // Close dialog after filtering
   };
 
   const handleTxTypeSelection = (event: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = event.target;
     if (checked) {
-      setTxsFilter((prevFilter) => [...prevFilter, value]);
+      setSelectedFilters((prevFilters) => [...prevFilters, value]);
+      setSelectedMsgs((prevFilters) => [...prevFilters, value]);
     } else {
-      setTxsFilter((prevFilter) => prevFilter.filter((item) => item !== value));
-      setSelectAllChecked(false); // Uncheck "Select All" if any checkbox is unchecked individually
+      setSelectedFilters((prevFilters) => prevFilters.filter((item) => item !== value));
+      setSelectedMsgs((prevFilters) => prevFilters.filter((item) => item !== value));
+      setSelectAllChecked(false);
     }
   };
 
@@ -115,9 +123,11 @@ export const useTransactionTypeFilter = () => {
     setSelectAllChecked(checked);
     if (checked) {
       const allTypes = filteredTypes.flatMap((msgData) => msgData.msgTypes.map((msg) => msg.type));
-      setTxsFilter(allTypes);
+      setSelectedFilters(allTypes);
+      setSelectedMsgs(allTypes);
     } else {
-      setTxsFilter([]);
+      setSelectedFilters([]);
+      setSelectedMsgs([]);
     }
   };
 
@@ -146,13 +156,12 @@ export const useTransactionTypeFilter = () => {
     },
     [data?.msgTypes, formatTypes]
   );
-
   return {
     data,
     loading,
     msgTypeList,
     filteredTypes,
-    txsFilter,
+    selectedFilters,
     selectAllChecked,
     txTypeSearchFilter,
     handleCancel,

diff --git a/packages/ui/src/components/transaction_type_filter/index.tsx b/packages/ui/src/components/transaction_type_filter/index.tsx
@@ -10,15 +10,14 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import TxTypeSearch from '@/components/transaction_type_filter/components/transaction_type_search';
 import { useRecoilValue } from 'recoil';
-import { readOpenDialog } from '@/recoil/transactions_filter';
+import { readOpenDialog, readSelectedMsgTypes } from '@/recoil/transactions_filter';
 import Checkbox from '@mui/material/Checkbox';
 import useStyles from './styles';
 
 const FilterTxsByType: FC = () => {
   const { classes } = useStyles();
   const { t } = useAppTranslation('common');
   const {
-    txsFilter,
     filteredTypes,
     txTypeSearchFilter,
     selectAllChecked,
@@ -30,6 +29,7 @@ const FilterTxsByType: FC = () => {
   } = useTransactionTypeFilter();
 
   const open = useRecoilValue(readOpenDialog) ?? false;
+  const selectedMsgTypes = useRecoilValue(readSelectedMsgTypes);
 
   return (
     <>
@@ -87,7 +87,7 @@ const FilterTxsByType: FC = () => {
                             name={`msg_type_${msg?.label}`}
                             value={msg?.type}
                             className={classes.checkBox}
-                            checked={selectAllChecked || txsFilter.includes(msg.type)}
+                            checked={selectAllChecked || selectedMsgTypes.includes(msg.type)}
                             onChange={(e) => handleTxTypeSelection(e)}
                           />
                           <Typography className={classes.msgLabel}>
@@ -113,7 +113,7 @@ const FilterTxsByType: FC = () => {
                             name={`msg_type_${msg?.label}`}
                             value={msg?.type}
                             className={classes.checkBox}
-                            checked={selectAllChecked || txsFilter.includes(msg.type)}
+                            checked={selectAllChecked || selectedMsgTypes.includes(msg.type)}
                             onChange={(e) => handleTxTypeSelection(e)}
                           />
                           <Typography className={classes.msgLabel}>

diff --git a/packages/ui/src/recoil/transactions_filter/atom.ts b/packages/ui/src/recoil/transactions_filter/atom.ts
@@ -4,6 +4,7 @@ import type { AtomState } from '@/recoil/transactions_filter/types';
 const initialState: AtomState = {
   filter: '{}',
   openDialog: false,
+  selectedMsgTypes: [],
 };
 
 export const atomState = atom<AtomState>({

diff --git a/packages/ui/src/recoil/transactions_filter/hooks.ts b/packages/ui/src/recoil/transactions_filter/hooks.ts
@@ -13,8 +13,9 @@ export const useTxsFilterRecoil = () => {
       const initTxsFilter: AtomState = {
         filter: '{}',
         openDialog: false,
+        selectedMsgTypes: [],
       };
       setTxsFilter(initTxsFilter);
     }
-  }, [setTxsFilter, txsFilter.filter, txsFilter.openDialog]);
+  }, [setTxsFilter, txsFilter.filter, txsFilter.openDialog, txsFilter.selectedMsgTypes]);
 };
diff --git a/packages/ui/src/recoil/transactions_filter/index.ts b/packages/ui/src/recoil/transactions_filter/index.ts
@@ -5,5 +5,7 @@ export {
   writeFilter,
   writeOpenDialog,
   readOpenDialog,
+  readSelectedMsgTypes,
+  writeSelectedMsgTypes,
 } from '@/recoil/transactions_filter/selectors';
 export type { AtomState } from '@/recoil/transactions_filter/types';
diff --git a/packages/ui/src/recoil/transactions_filter/selectors.ts b/packages/ui/src/recoil/transactions_filter/selectors.ts
@@ -47,3 +47,26 @@ export const readOpenDialog = selector({
   key: 'txsFilter.read.openDialog',
   get: getOpenDialog,
 });
+
+const getSelectedMsgTypes: ReadOnlySelectorOptions<string[]>['get'] = ({ get }) => {
+  const state = get(atomState);
+  return state.selectedMsgTypes;
+};
+
+export const writeSelectedMsgTypes = selector({
+  key: 'txsFilter.write.selectedMsgTypes',
+  get: getSelectedMsgTypes,
+  set: ({ get, set }, newSelectedMsgTypes) => {
+    if (newSelectedMsgTypes instanceof DefaultValue) return;
+    const prevState = get(atomState);
+    const newState = mergeStateChange(prevState, {
+      selectedMsgTypes: newSelectedMsgTypes,
+    });
+    set(atomState, newState);
+  },
+});
+
+export const readSelectedMsgTypes = selector({
+  key: 'txsFilter.read.selectedMsgTypes',
+  get: getSelectedMsgTypes,
+});
diff --git a/packages/ui/src/recoil/transactions_filter/types.ts b/packages/ui/src/recoil/transactions_filter/types.ts
@@ -1,4 +1,5 @@
 export interface AtomState {
   filter: string;
   openDialog: boolean;
+  selectedMsgTypes: string[];
 }
diff --git a/packages/ui/src/screens/account_details/components/transactions/index.tsx b/packages/ui/src/screens/account_details/components/transactions/index.tsx
@@ -6,7 +6,7 @@ import Box from '@/components/box';
 import TransactionsList from '@/components/transactions_list';
 import TransactionsListDetails from '@/components/transactions_list_details';
 import { readTx } from '@/recoil/settings';
-import { writeFilter } from '@/recoil/transactions_filter';
+import { writeFilter, writeSelectedMsgTypes } from '@/recoil/transactions_filter';
 import { useTransactions } from '@/screens/account_details/components/transactions/hooks';
 import useStyles from '@/screens/account_details/components/transactions/styles';
 
@@ -21,9 +21,13 @@ const Transactions: FC<ComponentDefault> = (props) => {
   const isItemLoaded = (index: number) => !state.hasNextPage || index < state.data.length;
   const itemCount = state.hasNextPage ? state.data.length + 1 : state.data.length;
   const [, setMsgTypes] = useRecoilState(writeFilter) as [string, SetterOrUpdater<string>];
-
+  const [, setSelectedMsgs] = useRecoilState(writeSelectedMsgTypes) as [
+    string[],
+    SetterOrUpdater<string[]>
+  ];
   useEffect(() => {
     setMsgTypes('{}');
+    setSelectedMsgs([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

diff --git a/packages/ui/src/screens/transactions/index.tsx b/packages/ui/src/screens/transactions/index.tsx
@@ -7,7 +7,7 @@ import LoadAndExist from '@/components/load_and_exist';
 import TransactionsList from '@/components/transactions_list';
 import TransactionsListDetails from '@/components/transactions_list_details';
 import { readTx } from '@/recoil/settings';
-import { writeFilter } from '@/recoil/transactions_filter';
+import { writeFilter, writeSelectedMsgTypes } from '@/recoil/transactions_filter';
 import { useTransactions } from '@/screens/transactions/hooks';
 import useStyles from '@/screens/transactions/styles';
 import { useEffect } from 'react';
@@ -21,9 +21,13 @@ const Transactions = () => {
   const isItemLoaded = (index: number) => !state.hasNextPage || index < state.items.length;
   const itemCount = state.hasNextPage ? state.items.length + 1 : state.items.length;
   const [, setMsgTypes] = useRecoilState(writeFilter) as [string, SetterOrUpdater<string>];
-
+  const [, setSelectedMsgs] = useRecoilState(writeSelectedMsgTypes) as [
+    string[],
+    SetterOrUpdater<string[]>
+  ];
   useEffect(() => {
     setMsgTypes('{}');
+    setSelectedMsgs([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

diff --git a/packages/ui/src/screens/validator_details/components/transactions/index.tsx b/packages/ui/src/screens/validator_details/components/transactions/index.tsx
@@ -6,7 +6,7 @@ import Box from '@/components/box';
 import TransactionsList from '@/components/transactions_list';
 import TransactionsListDetails from '@/components/transactions_list_details';
 import { readTx } from '@/recoil/settings';
-import { writeFilter } from '@/recoil/transactions_filter';
+import { writeFilter, writeSelectedMsgTypes } from '@/recoil/transactions_filter';
 import { useTransactions } from '@/screens/validator_details/components/transactions/hooks';
 import useStyles from '@/screens/validator_details/components/transactions/styles';
 
@@ -22,12 +22,17 @@ const Transactions: FC<ComponentDefault> = (props) => {
   const itemCount = state.hasNextPage ? state.data.length + 1 : state.data.length;
 
   const [, setMsgTypes] = useRecoilState(writeFilter) as [string, SetterOrUpdater<string>];
-
+  const [, setSelectedMsgs] = useRecoilState(writeSelectedMsgTypes) as [
+    string[],
+    SetterOrUpdater<string[]>
+  ];
   useEffect(() => {
     setMsgTypes('{}');
+    setSelectedMsgs([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+
   return (
     <Box className={cx(classes.root, props.className)}>
       <Typography variant="h2">{t('transactions')}</Typography>