fix(instructions): auto-switch to Aliases tab on alias-only searches (#1216)

* Update InstructionGroups.tsx

* fix eslint error

* Update InstructionGroups.tsx

Author: fakela

src/components/Instructions/InstructionGroups.tsx

@@ -49,7 +49,7 @@ export const InstructionGroups = React.memo(({ instructions, aliases, search }:
       return acc;
     }, {});
     return aliases.map((alias) => ({ ...alias, instruction: instructionsByMnemonic[alias.alias_of] }));
-  }, [instructions]);
+  }, [instructions, aliases]);
 
   const searchValue = search.toLowerCase();
 
@@ -58,43 +58,61 @@ export const InstructionGroups = React.memo(({ instructions, aliases, search }:
       item.doc?.opcode?.toLowerCase()?.includes(searchValue) ||
       item.doc?.fift?.toLowerCase()?.includes(searchValue) ||
       item?.doc?.description?.toLowerCase()?.includes(searchValue),
-  ), [searchValue]);
+  ), [instructions, searchValue]);
 
   const filteredAliases = useMemo(() => aliasesWithInstructions.filter(
     (item) =>
       item.mnemonic?.toLowerCase()?.includes(searchValue) ||
       item.description?.toLowerCase()?.includes(searchValue) ||
       item.doc_fift?.toLowerCase()?.includes(searchValue),
-  ), [searchValue]);
+  ), [aliasesWithInstructions, searchValue]);
 
-  return <Tabs>
-    {
-      sections.map(({ label, types, value }) => {
+  const activeTab = useMemo(() => {
+    if (filteredAliases.length > 0 && filteredInstructions.length === 0) {
+      return 'alias';
+    }
+    return 'all';
+  }, [filteredAliases, filteredInstructions]);
+
+  return (
+    <Tabs key={activeTab} defaultValue={activeTab}>
+      {sections.map(({ label, types, value }) => {
         if (value === 'alias') {
-          return filteredAliases?.length ? <TabItem label={label} value={value} key={value}>
-            <InstructionTable instructions={filteredAliases.map((alias) => ({
-              opcode: alias.instruction?.doc?.opcode,
-              fift: alias.doc_fift,
-              gas: alias.instruction?.doc?.gas,
-              description: alias.description,
-              stack: alias.doc_stack,
-            }))}/>
-          </TabItem> : null;
+          if (!filteredAliases.length) return null;
+          return (
+            <TabItem label={label} value={value} key={value}>
+              <InstructionTable
+                instructions={filteredAliases.map((alias) => ({
+                  opcode: alias.instruction?.doc.opcode,
+                  fift: alias.doc_fift,
+                  gas: alias.instruction?.doc.gas,
+                  description: alias.description,
+                  stack: alias.doc_stack,
+                }))}
+              />
+            </TabItem>
+          );
         }
 
-        const tabInstructions = types ? filteredInstructions.filter(instruction => types.includes(instruction.doc.category)) : filteredInstructions;
-        return (tabInstructions?.length ?
+        const tabInstructions = types
+          ? filteredInstructions.filter((inst) => types.includes(inst.doc.category))
+          : filteredInstructions;
+
+        if (!tabInstructions.length) return null;
+        return (
           <TabItem label={label} value={value} key={value}>
             <InstructionTable
-              instructions={tabInstructions.map(instruction => ({
-                opcode: instruction.doc?.opcode,
-                fift: instruction.doc?.fift,
-                gas: instruction.doc?.gas,
-                description: instruction?.doc.description,
-                stack: instruction.doc?.stack,
-              }))}/>
-          </TabItem> : null);
-      })
-    }
-  </Tabs>;
+              instructions={tabInstructions.map((inst) => ({
+                opcode: inst.doc.opcode,
+                fift: inst.doc.fift,
+                gas: inst.doc.gas,
+                description: inst.doc.description,
+                stack: inst.doc.stack,
+              }))}
+            />
+          </TabItem>
+        );
+      })}
+    </Tabs>
+  );
 });