search

microeinhundert / radonis

Build monolithic applications with a modern, React-based frontend stack based on the Node.js MVC framework AdonisJS.
https://radonis.vercel.app/
MIT License
67 stars 2 forks source link

Question about using islands: useState and useEffect #40

Closed Eman134 closed 1 year ago

Eman134 commented 1 year ago

Description

Hello, I've been enjoying using radonis and thank you for fixing that earlier error. Now I'm stuck at a stage where I can't proceed without help, I've tried researching and everything but since it's something specific, I thought it best to ask here.

I'm trying to make a system to change the theme of the entire site, from what I've seen I can only use useState and useEffect inside the islands, so how would I do it in this case, since the Base is on top of everything? And couldn't she be an island?

I even found it strange, but it seems that the console.log is not returning anything, but it still sets the cookie

Package Version

image

Error Message & Stack Trace

Relevant Information

image image

microeinhundert commented 1 year ago

You could make the whole page an island, but that would be against the concept of an islands architecture. You should set and read cookies in the Adonis backend and forward the theme to the React frontend, either via props or via globals on the manifest. Changing the theme from the frontend could be achieved by using an HTML form, which submits the selected theme to the backend.

User selects theme -> form gets submitted -> Adonis backend writes theme preference to a cookie -> Radonis renders the frontend depending on theme preference.

Because the theme preference will change the rendered output of static parts of the page (which are not islands), the page must be fully reloaded.

Eman134 commented 1 year ago

You could make the whole page an island, but that would be against the concept of an islands architecture. You should set and read cookies in the Adonis backend and forward the theme to the React frontend, either via props or via globals on the manifest. Changing the theme from the frontend could be achieved by using an HTML form, which submits the selected theme to the backend.

User selects theme -> form gets submitted -> Adonis backend writes theme preference to a cookie -> Radonis renders the frontend depending on theme preference.

Because the theme preference will change the rendered output of static parts of the page (which are not islands), the page must be fully reloaded.

I got the concept, I'll give it a go and practice, thanks for the help!