Problem rerender a island when updating the value of a signal!
Hi there im trying to make a visual change to the selected category button. However it does not rerender when i change the value of the categorySignal. The attached image shows the log that i updated the category to "tournaments" but but the Current category is still "organizations".
6 Replies
Thank you in advance!🙏 :hooray_deno:
Have you tried implementing useState - //this is the islands/SearchFilter.tsx
import { useState } from 'preact/hooks';
import { categorySignal, handleSearch } from '../signals/search.ts';
interface SearchFilterProps {
initialCategory: string;
}
export default function SearchFilter(props: SearchFilterProps) {
const [currentCategory, setCurrentCategory] = useState(props.initialCategory);
const updateCategory = (newCategory:string) => {
console.log(
Updating category to: ${newCategory});
setCurrentCategory(newCategory);
// Optionally, update the browser's URL to reflect the new category without reloading the page
const url = new URL(window.location.toString());
url.searchParams.set('category', newCategory);
// Push the new URL with the updated category
window.history.pushState({}, '', url.toString());
search()
};
// Helper function to determine button classes based on current category
const buttonClass = (category: string) =>
text-xl py-1 text-white ${currentCategory === category ? "font-bold" : "font-medium"};
return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {currentCategory}</div>
<div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
<div class="flex flex-row items-center justify-start">
<ul class="flex gap-12">
<li>
<button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
Organizations
</button>
</li>
...Thank you! That made it work. My hypothesis was that it should work using the signals directly, but clearly it wasn't correct. Is there some fundamentals about fresh that i don't quite understand that I should read about?
Should be possible. Try something like this - //this is the islands/SearchFilter.tsx
import { useSignal } from "@preact/signals";
import { categorySignal, handleSearch } from '../signals/search.ts';
interface SearchFilterProps {
initialCategory: string;
}
export default function SearchFilter(props: SearchFilterProps) {
const [currentCategory, setCurrentCategory] = useSignal(props.initialCategory);
const updateCategory = (newCategory:string) => {
console.log(
Updating category to: ${newCategory});
setCurrentCategory(newCategory);
// Optionally, update the browser's URL to reflect the new category without reloading the page
const url = new URL(window.location.toString());
url.searchParams.set('category', newCategory);
// Push the new URL with the updated category
window.history.pushState({}, '', url.toString());
search()
};
// Helper function to determine button classes based on current category
const buttonClass = (category: string) =>
text-xl py-1 text-white ${currentCategory() === category ? "font-bold" : "font-medium"};
return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {currentCategory()}</div>
<div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
<div class="flex flex-row items-center justify-start">
<ul class="flex gap-12">
<li>
<button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
Organizations
</button>
</li>
...
UseState is a great way to check the code and respond is setup the right way, after that you should be able to replace it with signals.You could check out https://github.com/lucacasonato/fresh-with-signals to see how signals could be setup and just build on it.
GitHub
GitHub - lucacasonato/fresh-with-signals: Using @preact/signals in ...
Using @preact/signals in Fresh. Contribute to lucacasonato/fresh-with-signals development by creating an account on GitHub.
This can really come in handy, thanks allot!:)