teonbrooks.com
An easy-to-use platform for EEG experimentation in the classroom
1import React, { useMemo, useState } from 'react';
2import { Button } from '../ui/button';
3import { EXPERIMENTS } from '../../constants/constants';
4import SecondaryNavComponent from '../SecondaryNavComponent';
5import { getExperimentFromType } from '../../utils/labjs/functions';
6
7enum OVERVIEW_STEPS {
8 OVERVIEW = 'OVERVIEW',
9}
10
11interface Props {
12 type: EXPERIMENTS;
13 onStartExperiment: (experiment: EXPERIMENTS) => void;
14 onCloseOverview: () => void;
15}
16
17// Generic curried enum type guard
18function isEnum<T extends object>(en: T) {
19 return (val: unknown): val is T[keyof T] => Object.values(en).includes(val as T[keyof T]);
20}
21
22const OverviewComponent: React.FC<Props> = ({
23 type,
24 onStartExperiment,
25 onCloseOverview,
26}) => {
27 const [activeStep, setActiveStep] = useState(OVERVIEW_STEPS.OVERVIEW);
28
29 const handleStepClick = (step: string) => {
30 if (isEnum(OVERVIEW_STEPS)(step)) {
31 setActiveStep(step);
32 }
33 };
34
35 const experiment = useMemo(() => getExperimentFromType(type), [type]);
36
37 const renderSectionContent = () => {
38 switch (activeStep) {
39 case OVERVIEW_STEPS.OVERVIEW:
40 default:
41 return (
42 <div className="flex items-center gap-8 h-[90%]">
43 <div className="flex-1 text-right">
44 <h1>{experiment?.text.overview.title}</h1>
45 </div>
46 <div className="flex-1">
47 <p>{experiment?.text.overview.overview}</p>
48 </div>
49 </div>
50 );
51 }
52 };
53
54 return (
55 <>
56 <button
57 className="flex justify-end w-full border-none shadow-none"
58 onClick={onCloseOverview}
59 aria-label="Close"
60 >
61 ✕
62 </button>
63 <SecondaryNavComponent
64 title={type}
65 steps={OVERVIEW_STEPS}
66 activeStep={activeStep}
67 onStepClick={handleStepClick}
68 saveButton={
69 <Button variant="default" onClick={() => onStartExperiment(type)}>
70 Start Experiment
71 </Button>
72 }
73 />
74 <div className="pt-5 h-full overflow-y-auto">
75 {renderSectionContent()}
76 </div>
77 </>
78 );
79};
80
81export default OverviewComponent;