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

fix(market-card.tsx): remove unnecessary code related to Badge component

Browse source 
feat(index.tsx): add tags state and fetch tags from API to display as badges in the StorePage
This commit is contained in:
anovazzi1 2023-10-27 09:19:18 -03:00
commit acb957fadf
2 changed files with 35 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/pages/StorePage/components/market-card.tsx
View file

@ -125,11 +125,7 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
<div className="flex w-full flex-wrap items-end justify-between gap-2">
<div className=" flex items-center gap-3">
<Badge size="md" variant="outline">
chain
<IconComponent
name="Link"
className="ml-1.5 w-3 text-green-700"
/>
text
</Badge>
<ShadTooltip content="Components">
<span className="flex items-center gap-1.5 text-xs text-foreground">

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

@ -1,5 +1,5 @@
import { cloneDeep } from "lodash";
import { Link, Search } from "lucide-react";
import { Search } from "lucide-react";
import { useContext, useEffect, useState } from "react";
import PaginatorComponent from "../../components/PaginatorComponent";
import IconComponent from "../../components/genericIconComponent";
@ -47,6 +47,7 @@ export default function StorePage(): JSX.Element {
const [index, setPageIndex] = useState(1);
const [errorApiKey, setErrorApiKey] = useState(false);
const { setSavedFlows } = useContext(StoreContext);
const [tags, setTags] = useState<string[]>([]);
async function getSavedComponents() {
setLoading(true);
@ -58,6 +59,11 @@ export default function StorePage(): JSX.Element {
setSavedFlows(savedIds);
}
useEffect(() => {
//TODO get tags from API
setTags(["tag1", "tag2", "tag3"]);
}, []);
useEffect(() => {
getNumberOfComponents().then((res) => {
setTotalRowsCount(Number(res["count"]));
@ -208,36 +214,33 @@ export default function StorePage(): JSX.Element {
</div>
<div className="flex h-2 items-center justify-center gap-4">
{!loading &&
Array.from(new Set(searchData.map((i) => i.is_component))).map(
(i, idx) => (
<Badge
onClick={() => {
filteredCategories.has(i)
? setFilteredCategories((old) => {
let newFilteredCategories = cloneDeep(old);
newFilteredCategories.delete(i);
return newFilteredCategories;
})
: setFilteredCategories((old) => {
let newFilteredCategories = cloneDeep(old);
newFilteredCategories.add(i);
return newFilteredCategories;
});
}}
variant="gray"
size="md"
className={cn(
"cursor-pointer border-none",
filteredCategories.has(i)
? "bg-beta-foreground text-background hover:bg-beta-foreground"
: ""
)}
>
<Link className="mr-1.5 w-4" />
{i}
</Badge>
)
)}
tags.map((i, idx) => (
<Badge
onClick={() => {
filteredCategories.has(i)
? setFilteredCategories((old) => {
let newFilteredCategories = cloneDeep(old);
newFilteredCategories.delete(i);
return newFilteredCategories;
})
: setFilteredCategories((old) => {
let newFilteredCategories = cloneDeep(old);
newFilteredCategories.add(i);
return newFilteredCategories;
});
}}
variant="gray"
size="md"
className={cn(
"cursor-pointer border-none",
filteredCategories.has(i)
? "bg-beta-foreground text-background hover:bg-beta-foreground"
: ""
)}
>
{i}
</Badge>
))}
</div>
<div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
{loading ? (