fix(extraSidebarComponent): add useMemo hook to improve performance by memoizing components

feat(extraSidebarComponent): add support for exporting flow and sharing flow functionalities
fix(StorePage): remove unnecessary useContext dependencies to improve performance
fix(StorePage): fix error message title

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { ReactFlowJsonObject } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
@@ -168,6 +168,44 @@ export default function ExtraSidebar(): JSX.Element {
     }
   }, [getFilterEdge, data]);
 
+  const ModalMemo = useMemo(
+    () => (
+      <ConfirmationModal
+        index={0}
+        modalContentTitle="Are you sure you want to share this flow?"
+        modalContent="This flow will be available for everyone to use."
+        title="Share Flow"
+        confirmationText="Share"
+        icon="Share2"
+        onConfirm={() => {
+          handleShareFlow();
+        }}
+        titleHeader=""
+        cancelText="Cancel"
+      >
+        <ShadTooltip content="Share" side="top">
+          <div className={classNames("extra-side-bar-buttons")}>
+            <IconComponent name="Share2" className="side-bar-button-size" />
+          </div>
+        </ShadTooltip>
+      </ConfirmationModal>
+    ),
+    []
+  );
+
+  const ExportMemo = useMemo(
+    () => (
+      <ExportModal>
+        <ShadTooltip content="Export" side="top">
+          <div className={classNames("extra-side-bar-buttons")}>
+            <IconComponent name="FileUp" className="side-bar-button-size" />
+          </div>
+        </ShadTooltip>
+      </ExportModal>
+    ),
+    []
+  );
+
   return (
     <div className="side-bar-arrangement">
       <div className="side-bar-buttons-arrangement">
@@ -186,15 +224,7 @@ export default function ExtraSidebar(): JSX.Element {
             </button>
           </ShadTooltip>
         </div>
-        <div className="side-bar-button">
+        <div className="side-bar-button">{ExportMemo}</div>
-          <ExportModal>
-            <ShadTooltip content="Export" side="top">
-              <div className={classNames("extra-side-bar-buttons")}>
-                <IconComponent name="FileUp" className="side-bar-button-size" />
-              </div>
-            </ShadTooltip>
-          </ExportModal>
-        </div>
         <ShadTooltip content={"Code"} side="top">
           <div className="side-bar-button">
             {flow && flow.data && (
@@ -237,27 +267,7 @@ export default function ExtraSidebar(): JSX.Element {
           </ShadTooltip>
         </div>
 
-        <div className="side-bar-button">
+        <div className="side-bar-button">{ModalMemo}</div>
-          <ConfirmationModal
-            index={0}
-            modalContentTitle="Are you sure you want to share this flow?"
-            modalContent="This flow will be available for everyone to use."
-            title="Share Flow"
-            confirmationText="Share"
-            icon="Share2"
-            onConfirm={() => {
-              handleShareFlow();
-            }}
-            titleHeader=""
-            cancelText="Cancel"
-          >
-            <ShadTooltip content="Share" side="top">
-              <div className={classNames("extra-side-bar-buttons")}>
-                <IconComponent name="Share2" className="side-bar-button-size" />
-              </div>
-            </ShadTooltip>
-          </ConfirmationModal>
-        </div>
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">

src/frontend/src/pages/StorePage/index.tsx

@@ -22,8 +22,7 @@ import { FlowComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
 import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
+  const { setTabId } = useContext(TabsContext);
-    useContext(TabsContext);
 
   // set null id
   useEffect(() => {
@@ -51,7 +50,7 @@ export default function StorePage(): JSX.Element {
       .catch((err) => {
         setLoading(false);
         setErrorData({
-          title: "Error on delete user",
+          title: "Error to get components.",
           list: [err["response"]["data"]["detail"]],
         });
       });
@@ -104,12 +103,25 @@ export default function StorePage(): JSX.Element {
                   className="absolute h-12 px-5"
                   onChange={(e) => {
                     setInputText(e.target.value);
-                    handleSearch(e.target.value);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleSearch(inputText);
+                    }
                   }}
                   value={inputText}
                 />
                 <Search className="absolute bottom-0 right-4 top-0 my-auto h-6 stroke-1 text-muted-foreground " />
               </div>
+              <div className="flex items-center justify-center text-sm">
+                <Button
+                  onClick={() => {
+                    handleSearch(inputText);
+                  }}
+                >
+                  Search
+                </Button>
+              </div>
               <div className="flex w-[13%] items-center justify-center gap-3 text-sm">
                 <Select
                   onValueChange={(value) => {