News Site Next: simplify message popup integration

[flashdesignory]

This pr fixes the issue #441 for news site next.

Previously, we used an useEffect hook, which is async, to determine if a page should display a message to the user or not.
Since we have the data for the page already available, we don't have to use a hook to make that determination.

Previous logic:

const [showMessage, setShowMessage] = useState(false);
 const { content, links } = useDataContext();

useEffect(() => {
        setShowMessage(content[id].message);
    }, [id]);

new logic:

const { content, links } = useDataContext();
const [showMessage, setShowMessage] = useState(content[id].message);

Scores - main:

browser	Safari	Firefox	Chrome
NewsSite-Next	205.7 ± 1.0%	77.1 ± 1.8%	79.7 ± 1.4%

Scores - pr:

browser	Safari	Firefox	Chrome
NewsSite-Next	204.63 ± 0.48%	74.9 ± 1.7%	77.6 ± 1.8%

[rniwa]

Seems okay to me.

[julienw]

This looks good but unfortunately this doesn't work like you expect :) See explanations below

[julienw]

Note that this works only if id is constant. Indeed the parameter defines only the default value and is taken into account only at the first render.

Depending on how the router works, the behavior might be surprising. And in this case it produces IMO a bug: with this change, the message isn't shown if you don't start the app on the US section.

You can try this STR:

1. Open the app: http://127.0.0.1:8080/resources/newssite/news-next/dist/
2. Click the "US" section

=> Previously, the message would be displayed. After the change, the message isn't displayed.

Also this STR has changed:

1. Open the app on the US section directly: http://127.0.0.1:8081/resources/newssite/news-next/dist/#/us => the message is displayed
2. Close the message bar
3. Display another section (eg World)
4. Display the US section again

=> Previously, the message would be displayed again. After the change, the message isn't displayed again.

With the router (src/pages/index.js) every route uses the Page component. So React being clever, the same component is reused and only the properties are updated. As a result, the state isn't changed (remember what I wrote above: what you pass as a parameter to useState is used only at the first render).

To avoid the update, you can force the Page component to be remounted, by using a key prop in src/pages/index.js. A different key will force a different component instance. It might be cleaner actually, and easier to deal with the state inside the Page later, so I'd be in favor of doing that.

Alternatives are to not do the change, or use useLayoutEffect like you wanted to (according to the branch name).

[julienw]

it would be good to make showMessage always a boolean, for example using:

Boolean(content[id].message);

[julienw]

Note: I noticed src/partials/page/page.jsx has the same pattern for notification, it could be good to handle it in the same PR.