Feature: Update window title on page change

[andrico1234]

Closes: #5893

Updates the window title to match with the title of the current page. This solves an issue with the browser history simply displaying the same title for every single page.

Note: I created a new hook called useDocumentTitle this is a way to set the document title. I added it to the hooks folder in ra-core and exported it. To me it doesn't feel like it should live there. Practically it would only be used in this Title component, so I'm not sure if we should keep the function located in ra-core, but there aren't any hooks exported in ra-ui-materialui`.

Saying that, if someone chooses to pass through their own Title component, they should be able to manage their document.title however they see fit, which means they should also be able to import useDocumentTitle.

tl;dr, useDocumentTitle lives in ra-core but i'll be happy to place it in ra-ui-materialui if you see it fit

[andrico1234]

@djhi I can't get my head around moving the tip of a branch (e.g. moving the last commit from the tip of master over to next), so I just made a new pull request

If you have a git helper doc to hand for the above issue, i'd be eternally grateful!

[andrico1234]

Morning folks! I'm wondering if there are any other changes you'd like me to make for this pull request. @fzaninotto @djhi

[fzaninotto]

Awesome!

This feature needs basic documentatoin, e.g. in https://marmelab.com/react-admin/CreateEdit.html#page-title, where you should explain that, when using an element as title, you have to set the document title by hand - and show an example usage of the hook.

[andrico1234]

Thanks for all the feedback and suggestions, @fzaninotto , I've pushed the fixes and resolved them all. I'll behappy to make any other changes as needed

Edit: Just realised I missed one of the changes, I'll get this updated

[andrico1234]

Thanks for the re-review @fzaninotto , I've implemented the requested changes!

[andrico1234]

Hi @fzaninotto , are there any other changes you'd like?

[fzaninotto]

I saw some more adjustments to make, I should've seen them during y first review, sorry.

[andrico1234]

Hi @fzaninotto , I've made the required changes. Is there anything else I should change before hand?

[fzaninotto]

Thanks!

[fzaninotto]

We haven't noticed, but this is a breaking change. If a developer has set the document title to "Acme" globally, it's replaced by the page title (e.g. "Posts"), without any simple way to insert the main app name globally.

So I'm going to revert this PR as is must provide an additional feature without removing the current abilities.

Feel free to open another PR to discuss possible implementations.

[andrico1234]

Thanks for the headsup, i'll see if there's a way in which we can implement this without a breaking change

[wmwart]

import { useEffect, useRef } from "react";


export const tryToSetDocumentTitle = (title) => {
    try {
        document.title = title;
    } catch (e) {
        console.warn("Document is undefined");
    }
};


const useDocumentTitle = ({
    title,
    revertOnUnmount = true,
}) => {

    const isBrowser = typeof document !== "undefined";
    const prevPageTitleRef = useRef(isBrowser ? document.title : null);

    useEffect(() => {
        if (isBrowser) {
            prevPageTitleRef.current = document.title;
        }
    }, [isBrowser]);

    useEffect(() => {
        if (isBrowser) {
            tryToSetDocumentTitle(title);
        }

        return () => {
            if (isBrowser && revertOnUnmount && prevPageTitleRef.current !== null) {
                tryToSetDocumentTitle(prevPageTitleRef.current);
            }
        };
    }, [isBrowser, title, revertOnUnmount]);
};

export default useDocumentTitle

[andrico1234]

thanks @wmwart for the excellent example , i'll give this a shot and see how it goes!

[yelworc]

@andrico1234 thanks for your work on this – I'd really appreciate this feature!