Update searches sections to update when operation type filter changes

components/home/searches/AccountSearch.tsx

@@ -30,11 +30,22 @@ const AccountSearch = () => {
 
   const [accountName, setAccountName] = useState<string>("");
   const [selectedOperationTypes, setSelectedOperationTypes] = useState<
-    number[]
+    number[] | null
   >([]);
 
   const { getRangesValues } = searchRanges;
 
+  const handleOperationSelect = (operationTypeIds: number[] | null) => {
+    setSelectedOperationTypes(operationTypeIds);
+    setAccountOperationsPage(undefined);
+    setAccountOperationsSearchProps((prev: any) => {
+      return {
+        ...prev,
+        operationTypes: operationTypeIds,
+      };
+    });
+  };
+
   const onButtonClick = async () => {
     if (accountName !== "") {
       const {
@@ -51,9 +62,10 @@ const AccountSearch = () => {
           toBlock: payloadToBlock,
           startDate: payloadStartDate,
           endDate: payloadEndDate,
-          operationTypes: selectedOperationTypes.length
-            ? selectedOperationTypes
-            : undefined,
+          operationTypes:
+            selectedOperationTypes && selectedOperationTypes.length
+              ? selectedOperationTypes
+              : null,
         };
       startAccountOperationsSearch(
         accountOperationsSearchProps,
@@ -84,8 +96,8 @@ const AccountSearch = () => {
       <div className="flex items-center">
         <OperationTypesDialog
           operationTypes={operationsTypes}
-          selectedOperations={selectedOperationTypes}
-          setSelectedOperations={setSelectedOperationTypes}
+          selectedOperations={selectedOperationTypes || []}
+          setSelectedOperations={handleOperationSelect}
           buttonClassName="bg-gray-500"
           triggerTitle={getOperationButtonTitle(
             selectedOperationTypes,
@@ -105,7 +117,9 @@ const AccountSearch = () => {
           )}
         </Button>
         {!accountName && (
-          <label className="ml-2 text-gray-300 dark:text-gray-500 ">Set account name</label>
+          <label className="ml-2 text-gray-300 dark:text-gray-500 ">
+            Set account name
+          </label>
         )}
       </div>
     </>

components/home/searches/BlockSearch.tsx

@@ -42,7 +42,7 @@ const BlockSearch = () => {
 
   const [accountName, setAccountName] = useState<string>("");
   const [selectedOperationTypes, setSelectedOperationTypes] = useState<
-    number[]
+    number[] | null
   >([]);
   const [singleOperationTypeId, setSingleOperationTypeId] = useState<
     number | undefined
@@ -66,8 +66,8 @@ const BlockSearch = () => {
     }
   };
 
-  const changeSelectedOperationTypes = (operationTypesIds: number[]) => {
-    if (operationTypesIds.length === 1) {
+  const changeSelectedOperationTypes = (operationTypesIds: number[] | null) => {
+    if (operationTypesIds && operationTypesIds.length === 1) {
       setSingleOperationTypeId(operationTypesIds[0]);
     } else {
       setSingleOperationTypeId(undefined);
@@ -75,6 +75,12 @@ const BlockSearch = () => {
     setSelectedKeys(undefined);
     setFieldContent("");
     setSelectedOperationTypes(operationTypesIds);
+    setBlockSearchProps((prev: any) => {
+      return {
+        ...prev,
+        operationTypes: operationTypesIds,
+      };
+    });
   };
 
   const onSelect = (newValue: string) => {
@@ -92,9 +98,10 @@ const BlockSearch = () => {
     const blockSearchProps: Explorer.BlockSearchProps = {
       accountName:
         accountName !== "" ? trimAccountName(accountName) : undefined,
-      operationTypes: selectedOperationTypes.length
-        ? selectedOperationTypes
-        : undefined,
+      operationTypes:
+        selectedOperationTypes && selectedOperationTypes.length
+          ? selectedOperationTypes
+          : null,
       fromBlock: payloadFromBlock,
       toBlock: payloadToBlock,
       startDate: payloadStartDate,
@@ -129,7 +136,7 @@ const BlockSearch = () => {
       <div className="flex items-center">
         <OperationTypesDialog
           operationTypes={operationsTypes}
-          selectedOperations={selectedOperationTypes}
+          selectedOperations={selectedOperationTypes || []}
           setSelectedOperations={changeSelectedOperationTypes}
           buttonClassName="bg-gray-500"
           triggerTitle={getOperationButtonTitle(

components/home/searches/utils/commentSearchHelpers.ts

@@ -15,12 +15,11 @@ export async function startCommentSearch(
   setPreviousCommentSearchProps: (props: Explorer.CommentSearchProps) => void,
   setLastSearchKey: (key: "comment") => void
 ) {
-  const { filters, ...params } = commentSearchParams;
+  const { operationTypes, ...params } = commentSearchParams;
   const props: Explorer.CommentSearchProps = {
     ...params,
     accountName: params.accountName || "",
-    operationTypes:
-      filters && filters.length ? convertBooleanArrayToIds(filters) : undefined,
+    operationTypes,
   };
   setCommentSearchProps(props);
   setCommentPaginationPage(1);