Searching on server
Answered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
const { query } = await searchParams;
console.log(query);
if (!companyId) {
return redirect("/error");
}
let users = (await getUsersForControler(companyId)) as User[];
if (query) {
users = users.filter((user) =>
user.name.toLowerCase().includes(query.toLowerCase())
);
}<Input
onChange={(e) => {
params.set("query", e.target.value);
window.history.pushState(null, "", `?${params.toString()}`);
}}
/>Why the input doesnt refresh the data?
Answered by Arinji
<input
type="text"
placeholder="Search by name..."
onChange={(e) => {
params.delete("search_link");
params.set("search_name", e.target.value);
window.history.pushState(null, "", `?${params.toString()}`);
}}
className="w-full h-[40px] bg-palette-bg text-palette-text border-neo-brutalist border-black rounded-neo-brutalist p-2"
/>
<button
onClick={() => {
startTransitionName(() => {
router.replace(`${pathname}?${params.toString()}`);
});
}}
className="size-[40px] shrink-0 bg-palette-accent border-neo-brutalist border-black flex flex-col items-center justify-center rounded-neo-brutalist"
>You always need to either do a router.push or a router.replace, window.history will only update for the client, i mentioned that before i think
9 Replies
@African Slender-snouted Crocodile ts
const { query } = await searchParams;
console.log(query);
if (!companyId) {
return redirect("/error");
}
let users = (await getUsersForControler(companyId)) as User[];
if (query) {
users = users.filter((user) =>
user.name.toLowerCase().includes(query.toLowerCase())
);
}
ts
<Input
onChange={(e) => {
params.set("query", e.target.value);
window.history.pushState(null, "", `?${params.toString()}`);
}}
/>
Why the input doesnt refresh the data?
it looks like you only set them clientside. Make sure to redirect the user to the new location. You can redirect the client by using
router.push('/your/path?query=something')African Slender-snouted CrocodileOP
Im 100% sure there was an implementation without using router.push
@Arinji can you help please? ^^ sry for ping, but i remember u imeplemented smth like this and it was working, i was looking around your code as well, but didn't see anything that would cause the problem
const { query } = await searchParams;
console.log(query);
if (!companyId) {
return redirect("/error");
}
let users = (await getUsersForControler(companyId)) as User[];
if (query) {
users = users.filter((user) =>
user.name.toLowerCase().includes(query.toLowerCase())
);
}This stuff is on the server right?
@African Slender-snouted Crocodile
<input
type="text"
placeholder="Search by name..."
onChange={(e) => {
params.delete("search_link");
params.set("search_name", e.target.value);
window.history.pushState(null, "", `?${params.toString()}`);
}}
className="w-full h-[40px] bg-palette-bg text-palette-text border-neo-brutalist border-black rounded-neo-brutalist p-2"
/>
<button
onClick={() => {
startTransitionName(() => {
router.replace(`${pathname}?${params.toString()}`);
});
}}
className="size-[40px] shrink-0 bg-palette-accent border-neo-brutalist border-black flex flex-col items-center justify-center rounded-neo-brutalist"
>You always need to either do a router.push or a router.replace, window.history will only update for the client, i mentioned that before i think
Answer
@African Slender-snouted Crocodile
any updates?
@Arinji <@588814479438118913>
African Slender-snouted CrocodileOP
Yeap, fixed, ty, sry i got into work and forgot to reply