D
Deno

help

Problem rerender a island when updating the value of a signal!

Wwedman2/12/2024
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
Wwedman2/12/2024
Thank you in advance!🙏 :hooray_deno:
MMaDsEn2/13/2024
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> ...
Wwedman2/13/2024
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?
MMaDsEn2/13/2024
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.
MMaDsEn2/13/2024
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.
Wwedman2/13/2024
This can really come in handy, thanks allot!:)

Looking for more? Join the community!

Recommended Posts
Cannot find namespace NodeJSHi Context: using deno with npm lib (imap). There seems to be a missing/unresolved to NodeJS that Which components exactly should be islands?Hi! I am currently developing a web app using fresh and I am getting confused about the usage of islError using npm:ssh2-sftp-client@10.0.3I am trying to connect to a sftp server using the library mentioned in the title (that is a wrapper How to restrict global scope in dynamically created function?I want to dynamically create a function using Function() constructor. How can I restrict access to gTyping for Dynamic importsSo I have a function like this that uses a dynamic import like ```ts export async function func1(imError with fetch called from npm moduleI am trying to use the `tsdav` NPM package with Deno, and have run into a problem with making an HTTCompile to exeEvery time I run my exe I get the following error, But when I start my code normally with node main.What does this library "assert" does?Hi https://deno.land/std@0.215.0/assert/mod.ts What does it do in this example? https://docs.deno.coWhat does this library "assert" does?https://deno.land/std@0.215.0/assert/mod.ts What does it do in this example? https://docs.deno.com/rLooking for an alternative to deno_domHi I'm looking for an alternative library to https://deno.land/x/deno_dom@v0.1.45/deno-dom-wasm.ts PCompile to exeEvery time I run my exe I get the following error: But when I start my code normally with node maiRunning untrusted code, eval-styleI have a project that on occassion I want to be able to execute JS code that I can then quickly get Available disk spaceI'm writing an API which will potentially create a large temporary file. I thought it would useful Verify AWS SNS signature with PEM certificateHello, I'm trying to verify aws sns messages in deno given a signing cert (in pem format, RSA sha1) Headers for WebSocket clientI need to connect Deno (as a client) to a WebSocket server that requires custom headers on connectioDeno testing with local oak serverI'm trying to setup a simple oak application for a few tests. The test steps work as expected but I