[Solution] [Next13] Communicate with child component of Layout, when using Suspense

[harley-codes]

I thougt I would put this here to see what feedback people had.
Fairly new to react so go easy if I am breaking some cardian sins 😅

The problem to solve:
My Layout consist if of a header(Title and Button), and a Suspens wrapper for the Page component.
The page component gets data from the server then renders out client components.

For this reason, I cant add logic/ui to create new data entries in Layout components. As I don't want to refresh the wep page in order to get the Page component to refetch from server.

The tempoary solution
Therefore, I decided to create some 'trigger' style behaviour using the singleton pattern. In my layout, I can call the trigger, and somewhere down the line in the Page components, I can listen.

I can call trigger() from the button in Layout, and then subscribe from my child comonent that derives from Page.
It received props from the Page component which fetches from server. I then store intial props in hook state. And update when later adding data.

Red from Layout, green from Page.

Sorry, the code embed in not picking up all code, so I used screenshot.