jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(StorePage/index.tsx): fix indentation and formatting issues for better code readability

Browse source 
feat(StorePage/index.tsx): add disabled attribute to buttons and input when loading to prevent user interaction
This commit is contained in:
anovazzi1 2023-11-13 16:20:15 -03:00
commit 19a6ba79b3
1 changed files with 36 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/frontend/src/pages/StorePage/index.tsx
View file

@ -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);
}}