add experiment about page as Router option

[BeritJanssen]

This would be an option towards #1337 : the about page can also function as a landing page.

[drikusroor]

I don't think the proposed code will do what it is supposed to do and my advice would be to improve the logic in the Experiment component (see my comment).

[drikusroor]

I am a bit confused :-) Is this supposed to be an about page for an experiment? In that case, I don't think this route will work properly as there the route / page component won't know for which experiment they will have to show the about page. I think it might be better to modify the Experiment component's logic to decide whether we want to show the consent already if the user wants to go to the experiment's about page.

Either here by checking the current location and see if the current location contains "/about":

MUSCLE/frontend/src/components/Experiment/Experiment.tsx

Lines 59 to 71 in b15fd10

	if (!hasShownConsent && showConsent) {
	const attrs = {
	participant,
	onNext,
	experiment,
	...experiment.consent,
	}
	return (
	<DefaultPage className='aha__consent-wrapper' title={experiment.name}>
	<Consent {...attrs} />
	</DefaultPage>
	)
	}

Or here, by moving the logic that decides whether we want to show the consent form to a separate "Guard Component" (and something similar for the logic that decides whether participant will be redirected to next experiment instead of the dashboard):

export const RequireConsent = ({ experiment, hasShownConsent, children }: RequireConsentProps) => {
    const showConsent = experiment?.consent;
    
    if (!hasShownConsent && showConsent) {
        return <Navigate to={`/experiment/${experiment.slug}`} replace />;
    }

    return <>{children}</>;
};

export const RequireDashboardOrRedirect = ({ experiment, children }: RequireDashboardOrRedirectProps) => {
    const displayDashboard = experiment?.dashboard.length;
    const nextBlock = experiment?.nextBlock;
    const participantIdUrl = experiment?.participantIdUrl;
    
    if (!displayDashboard && nextBlock) {
        return <Navigate 
            to={`/block/${nextBlock.slug}${participantIdUrl ? `?participant_id=${participantIdUrl}` : ""}`} 
            replace 
        />;
    }

    return <>{children}</>;
};

            <Routes>
                {/* About route is always accessible */}
                <Route
                    path="/about"
                    element={<ExperimentAbout content={experiment?.aboutContent} slug={experiment.slug} />}
                />
                
                {/* Main experiment route with nested guards */}
                <Route
                    path="*"
                    element={
                        <RequireConsent experiment={experiment} hasShownConsent={hasShownConsent}>
                            <RequireDashboardOrRedirect experiment={experiment}>
                                <ExperimentDashboard 
                                    experiment={experiment} 
                                    participantIdUrl={participantIdUrl} 
                                    totalScore={experiment.totalScore} 
                                />
                            </RequireDashboardOrRedirect>
                        </RequireConsent>
                    }
                />
            </Routes>

[BeritJanssen]

Yup, I rushed this PR and forgot to pass the slug in the Route, silly mistake. When you do though, this (more specific) route {slug}/about should take precedence over the {slug} route, right? I do think it's a good idea to rework the Experiment component and factor out the consent & redirect/dashboard logic into their own components. Can you open an issue for it?

As we now got yet another feature request for a landing page, which cannot be solved with this approach (as it specifies a landing page for two different experiments), closing this PR. I'm now thinking of a dedicated Django landing app and route, and a React Landing component, which would probably be no more than a wrapper around HTML entered from the Django admin.