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

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