wedmaniac
wedmaniac9mo ago

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".
//this is the islands/SearchFilter.tsx
import { categorySignal, handleSearch } from '../signals/search.ts';


interface SearchFilterProps {
initialCategory: string;
}


export default function SearchFilter(props: SearchFilterProps) {

const updateCategory = (newCategory:string) => {
console.log(`Updating category to: ${newCategory}`);
categorySignal.value = 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 ${categorySignal.value === category ? "font-bold" : "font-medium"}`;


return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {categorySignal.value}</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>
...
//this is the islands/SearchFilter.tsx
import { categorySignal, handleSearch } from '../signals/search.ts';


interface SearchFilterProps {
initialCategory: string;
}


export default function SearchFilter(props: SearchFilterProps) {

const updateCategory = (newCategory:string) => {
console.log(`Updating category to: ${newCategory}`);
categorySignal.value = 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 ${categorySignal.value === category ? "font-bold" : "font-medium"}`;


return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {categorySignal.value}</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>
...
No description
6 Replies
wedmaniac
wedmaniac9mo ago
Thank you in advance!🙏 :hooray_deno:
MaDsEn
MaDsEn9mo ago
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> ...
wedmaniac
wedmaniac9mo ago
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?
MaDsEn
MaDsEn9mo ago
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.
MaDsEn
MaDsEn9mo ago
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.
wedmaniac
wedmaniac9mo ago
This can really come in handy, thanks allot!:)