Filtering projects not working
Hi everyone
I'm trying to filtering my projects list according to a "tabs", where I click and set the
I will leave the rest of the code in the thread
searchParam tab, but isn't working.
Only works if I refresh the page.
This is my createAsync:
const data = createAsync(async () => {
let currentPage = searchParams.page ? Number(searchParams.page) : 1;
const pages = await getPaginatedProjects(currentPage, DEFAULT_PAGINATION_OFFSET);
const numberOfPages = Math.ceil(pages.total / DEFAULT_PAGINATION_OFFSET);
if (currentPage > pages.total) {
currentPage = numberOfPages;
}
if (currentTab() !== 'all') {
const { data, total } = await getPaginatedProjectsByService(
currentTab(),
currentPage,
DEFAULT_PAGINATION_OFFSET,
);
return {
data,
total,
currentPage,
};
}
const { data, total } = await getPaginatedProjects(
currentPage,
DEFAULT_PAGINATION_OFFSET,
);
return {
data,
total,
currentPage,
};
});
const data = createAsync(async () => {
let currentPage = searchParams.page ? Number(searchParams.page) : 1;
const pages = await getPaginatedProjects(currentPage, DEFAULT_PAGINATION_OFFSET);
const numberOfPages = Math.ceil(pages.total / DEFAULT_PAGINATION_OFFSET);
if (currentPage > pages.total) {
currentPage = numberOfPages;
}
if (currentTab() !== 'all') {
const { data, total } = await getPaginatedProjectsByService(
currentTab(),
currentPage,
DEFAULT_PAGINATION_OFFSET,
);
return {
data,
total,
currentPage,
};
}
const { data, total } = await getPaginatedProjects(
currentPage,
DEFAULT_PAGINATION_OFFSET,
);
return {
data,
total,
currentPage,
};
});
2 Replies
For the tabs I have:
const [searchParams, setSearchParams] = useSearchParams();
/**
* Accessor to store the current service.
*/
const currentTab = createMemo(() => {
const service = searchParams.service;
if (!service || service === 'all') {
return 'all';
}
return service;
});
/**
* Callback function to change the service query parameter in order to filter
* the projects from a new service.
* @param service Current service.
*/
function handleServiceChange(service?: string) {
setSearchParams({ service }, { replace: true });
}
const [searchParams, setSearchParams] = useSearchParams();
/**
* Accessor to store the current service.
*/
const currentTab = createMemo(() => {
const service = searchParams.service;
if (!service || service === 'all') {
return 'all';
}
return service;
});
/**
* Callback function to change the service query parameter in order to filter
* the projects from a new service.
* @param service Current service.
*/
function handleServiceChange(service?: string) {
setSearchParams({ service }, { replace: true });
}
Possible solution: remove
currentTab() and use directly searchParams.tab