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