Function TopHatTutorial

src/app/tutorial.tsx:16–154

()

import { useSelector } from "../state/shared/hooks";
import { AppColours, WHITE } from "../styles/colours";
import { FileHandlerContext } from "./context";

export const MIN_WIDTH_FOR_APPLICATION = 1200;

export const TopHatTutorial: React.FC = () => {
    const open = useUserData((user) => user.tutorial);
    const storage = useSelector((state) => state.app.storage);
    const running = isAppRunning(storage);

    // While the tutorial is up, a file dropped anywhere is a backup to import rather than a statement
    const { isDragActive, openFileDialog, setFileImportHandler } = useContext(FileHandlerContext);
    const jsonImportStatus = useSelector((state) => state.app.jsonImport);
    useEffect(() => {
        if (!open || !running) return;

        setFileImportHandler("JSON-IMPORT");
        return () => {
            setFileImportHandler("GENERAL-IMPORT");
            resetJSONImportStatus();
        };
    }, [open, running, setFileImportHandler]);

    const [page, setPage] = useState<"welcome" | "import">("welcome");
    useEffect(() => {
        if (open) setPage("welcome");
    }, [open]);
    const showWelcome = useCallback(() => {
        setPage("welcome");
        resetJSONImportStatus();
    }, []);
    const showImport = useCallback(() => setPage("import"), []);

    const [width, setWidth] = useState(9001);
    useEffect(() => {
        const observer = new ResizeObserver((entries) => setWidth(entries[0].contentRect.width));
        observer.observe(document.body);
        return () => observer.disconnect();
    }, [setWidth]);
    const [widthDismissed, setWidthDismissed] = useState(false);
    const dismissWidth = useCallback(() => setWidthDismissed(true), []);

    // The store starts in the tutorial state, and is left in it when boot or saved data fails. None of
    // that is an invitation, so the tutorial is only offered once the app itself can be shown.
    if (!running) return null;

    // The narrow-window warning is shown to everyone, not only while the tutorial is open
    if (width < MIN_WIDTH_FOR_APPLICATION && !widthDismissed)
        return (
            <Dialog open={true} maxWidth="md" fullWidth={true}>
                <TutorialNarrowWindowContents onContinue={dismissWidth} />
            </Dialog>
        );

    return (
        <Dialog
            open={open}
            maxWidth="md"
            fullWidth={true}