From 19a6ba79b39ec6bc1bbf991ee374bcb185cfd692 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 13 Nov 2023 16:20:15 -0300
Subject: [PATCH] fix(StorePage/index.tsx): fix indentation and formatting
 issues for better code readability feat(StorePage/index.tsx): add disabled
 attribute to buttons and input when loading to prevent user interaction

---
 src/frontend/src/pages/StorePage/index.tsx | 57 ++++++++++++++--------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 5d7eeda56..050cb1138 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -150,6 +150,7 @@ export default function StorePage(): JSX.Element {
             <div className="flex items-end gap-4">
               <div className="relative h-12 w-[40%]">
                 <Input
+                  disabled={loading}
                   placeholder="Search Flows and Components"
                   className="absolute h-12 px-5"
                   onChange={(e) => {
@@ -164,6 +165,7 @@ export default function StorePage(): JSX.Element {
                   value={inputText}
                 />
                 <button
+                  disabled={loading}
                   className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
                   onClick={() => {
                     setSearchText(inputText);
@@ -172,43 +174,51 @@ export default function StorePage(): JSX.Element {
                 >
                   <IconComponent
                     name={loading ? "Loader2" : "Search"}
-                    className={loading ? " animate-spin" : ""}
+                    className={
+                      loading ? " animate-spin cursor-not-allowed" : ""
+                    }
                   />
                 </button>
               </div>
               <div className="ml-4 flex w-full gap-2 border-b border-border">
                 <button
+                  disabled={loading}
                   onClick={() => {
                     setTabActive("All");
                   }}
                   className={
-                    tabActive === "All"
+                    (tabActive === "All"
                       ? "border-b-2 border-primary p-3"
-                      : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
+                      : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary") +
+                    (loading ? " cursor-not-allowed " : "")
                   }
                 >
                   All
                 </button>
                 <button
+                  disabled={loading}
                   onClick={() => {
                     setTabActive("Flows");
                   }}
                   className={
-                    tabActive === "Flows"
+                    (tabActive === "Flows"
                       ? "border-b-2 border-primary p-3"
-                      : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
+                      : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary") +
+                    (loading ? " cursor-not-allowed " : "")
                   }
                 >
                   Flows
                 </button>
                 <button
+                  disabled={loading}
                   onClick={() => {
                     setTabActive("Components");
                   }}
                   className={
-                    tabActive === "Components"
+                    (tabActive === "Components"
                       ? "border-b-2 border-primary p-3"
-                      : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
+                      : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary") +
+                    (loading ? " cursor-not-allowed " : "")
                   }
                 >
                   Components
@@ -224,24 +234,28 @@ export default function StorePage(): JSX.Element {
             <div className="flex h-6 items-center gap-2 px-2">
               {!loadingTags &&
                 tags.map((tag, idx) => (
-                  <Badge
-                    key={idx}
+                  <button
+                    disabled={loading}
+                    className={loading ? "cursor-not-allowed" : ""}
                     onClick={() => {
                       updateTags(tag.name);
                     }}
-                    variant="outline"
-                    size="sq"
-                    className={cn(
-                      "cursor-pointer",
-                      filteredCategories.some(
-                        (category) => category === tag.name
-                      )
-                        ? "bg-beta-foreground text-background hover:bg-beta-foreground"
-                        : ""
-                    )}
                   >
-                    {tag.name}
-                  </Badge>
+                    <Badge
+                      key={idx}
+                      variant="outline"
+                      size="sq"
+                      className={cn(
+                        filteredCategories.some(
+                          (category) => category === tag.name
+                        )
+                          ? "bg-beta-foreground text-background hover:bg-beta-foreground"
+                          : ""
+                      )}
+                    >
+                      {tag.name}
+                    </Badge>
+                  </button>
                 ))}
             </div>
             <div className="flex items-end justify-between">
@@ -255,6 +269,7 @@ export default function StorePage(): JSX.Element {
               </span>
 
               <Select
+                disabled={loading}
                 onValueChange={(e) => {
                   setPageOrder(e);
                 }}