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

🐛 fix(API/index.ts): add missing type annotations and handle null values in getStoreComponents and searchComponent functions

Browse source 
✨ feat(API/index.ts): add support for additional query parameters in getStoreComponents and searchComponent functions to enable filtering and sorting of results
🐛 fix(StorePage/index.tsx): handle null values and update searchData and totalRowsCount in StorePage component to prevent errors and ensure accurate data display
✨ feat(StorePage/index.tsx): add support for sorting by popularity and alphabetical order in handleOrderPage function in StorePage component
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-11-07 15:43:52 -03:00
commit 225d6da419
2 changed files with 48 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/frontend/src/controllers/API/index.ts
View file

@ -593,11 +593,36 @@ export async function getFlowsStore(): Promise<AxiosResponse<FlowType[]>> {
export async function getStoreComponents(
page: number = 1,
limit: number = 10,
is_component?: boolean | null
is_component?: boolean | null,
sort?: string | null,
tags?: string[] | null,
filter_by_user?: boolean | null,
status?: string | null,
search?: string | null
): Promise<StoreComponentResponse | undefined> {
try {
let url = `${BASE_URL_API}store/components/`;
const queryParams: any = [];
if (search !== undefined && search !== null) {
queryParams.push(`search=${search}`);
}
if (status !== undefined && status !== null) {
queryParams.push(`status=${status}`);
}
if (tags !== undefined && tags !== null) {
queryParams.push(`tags=${tags}`);
}
if (sort !== undefined && sort !== null) {
queryParams.push(`sort=${sort}`);
} else {
queryParams.push(`sort=-count(liked_by)`); // default sort
}
if (filter_by_user !== undefined && filter_by_user !== null) {
queryParams.push(`filter_by_user=${filter_by_user}`);
}
if (page !== undefined) {
queryParams.push(`page=${page}`);
}
@ -670,23 +695,23 @@ export async function searchComponent(
limit?: number | null,
status?: string | null,
tags?: string[]
) {
): Promise<StoreComponentResponse | undefined> {
try {
let url = `${BASE_URL_API}store/search/`;
let url = `${BASE_URL_API}store/components/`;
const queryParams: any = [];
if (query !== undefined) {
queryParams.push(`query=${query}`);
if (query !== undefined && query !== null) {
queryParams.push(`search=${query}`);
}
if (page !== undefined) {
if (page !== undefined && page !== null) {
queryParams.push(`page=${page}`);
}
if (limit !== undefined) {
if (limit !== undefined && limit !== null) {
queryParams.push(`limit=${limit}`);
}
if (status !== undefined) {
if (status !== undefined && status !== null) {
queryParams.push(`status=${status}`);
}
if (tags !== undefined) {
if (tags !== undefined && tags !== null) {
queryParams.push(`tags=${tags}`);
}
if (queryParams.length > 0) {

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

@ -109,10 +109,11 @@ export default function StorePage(): JSX.Element {
setLoading(true);
searchComponent(inputText).then(
(res) => {
setSearchData(res);
setSearchData(res?.results ?? []);
setTotalRowsCount(Number(res?.count ?? 0));
setLoading(false);
setRenderPagination(false);
setTotalRowsCount(res.length);
setTotalRowsCount(Number(res?.count ?? 0));
},
(error) => {
setLoading(false);
@ -125,7 +126,7 @@ export default function StorePage(): JSX.Element {
setRenderPagination(true);
getStoreComponents(pageIndex, pageSize, filterComponent.current)
.then((res) => {
setSearchData(res);
setSearchData(res?.results ?? []);
setPageIndex(pageIndex);
setPageSize(pageSize);
setLoading(false);
@ -148,9 +149,9 @@ export default function StorePage(): JSX.Element {
setRenderPagination(false);
searchComponent(null, 1, 10000, null, filterArray).then(
(res) => {
setSearchData(res);
setSearchData(res?.results ?? []);
setLoading(false);
setTotalRowsCount(res.length);
setTotalRowsCount(Number(res?.count ?? 0));
},
(error) => {
setLoading(false);
@ -173,17 +174,12 @@ export default function StorePage(): JSX.Element {
}
const handleOrderPage = (e) => {
let sortedData = cloneDeep(searchData);
let sort;
if (e === "Popular") {
sortedData = sortedData.sort(
(a, b) => Number(b.liked_by_count) - Number(a.liked_by_count)
);
sort = "-count(liked_by)";
} else if (e === "Alphabetical") {
sortedData = sortedData.sort((a, b) => a.name.localeCompare(b.name));
sort = "name";
}
setSearchData([...sortedData]);
};
return (
@ -290,13 +286,13 @@ export default function StorePage(): JSX.Element {
<div className="flex items-center gap-2 px-2">
{!loading &&
tags.map((i, idx) => (
tags.map((tag, idx) => (
<Badge
onClick={() => {
const index = filteredCategories?.indexOf(i.id);
const index = filteredCategories?.indexOf(tag.name);
const copyFilterArray = cloneDeep(filteredCategories);
if (index === -1) {
copyFilterArray.push(i.id);
copyFilterArray.push(tag.name);
} else {
copyFilterArray.splice(index, 1);
}
@ -307,12 +303,12 @@ export default function StorePage(): JSX.Element {
size="sq"
className={cn(
"cursor-pointer",
filteredCategories.some((category) => category === i.id)
filteredCategories.some((category) => category === tag.name)
? "bg-beta-foreground text-background hover:bg-beta-foreground"
: ""
)}
>
{i.name}
{tag.name}
</Badge>
))}
</div>