♻️ Refactor Onboarding component and step handling

This commit is contained in:
Philipp Stracker 2024-10-31 15:11:36 +01:00
parent 426230bee9
commit 05657b8b27
No known key found for this signature in database

View file

@ -2,44 +2,35 @@ import Container from '../../ReusableComponents/Container';
import { useOnboardingStep } from '../../../data';
import { getSteps } from './availableSteps';
const getCurrentStep = ( requestedStep, steps ) => {
const isValidStep = ( step ) =>
typeof step === 'number' &&
Number.isInteger( step ) &&
step >= 0 &&
step < steps.length;
const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0;
return steps[ safeCurrentStep ];
};
const Onboarding = () => {
const { step, setStep, setCompleted, flags } = useOnboardingStep();
const steps = getSteps( flags );
const CurrentStepComponent = getCurrentStep( step, steps );
return (
<Container page="onboarding">
<div className="ppcp-r-card">
<OnboardingStep
currentStep={ step }
<CurrentStepComponent
setStep={ setStep }
currentStep={ step }
setCompleted={ setCompleted }
flags={ flags }
stepperOrder={ steps }
/>
</div>
</Container>
);
};
const OnboardingStep = ( { currentStep, setStep, setCompleted, flags } ) => {
const stepperOrder = getSteps( flags );
const isValidStep = ( step ) =>
typeof step === 'number' &&
Number.isInteger( step ) &&
step >= 0 &&
step < stepperOrder.length;
const safeCurrentStep = isValidStep( currentStep ) ? currentStep : 0;
const CurrentStepComponent = stepperOrder[ safeCurrentStep ];
return (
<CurrentStepComponent
setStep={ setStep }
currentStep={ safeCurrentStep }
setCompleted={ setCompleted }
stepperOrder={ stepperOrder }
/>
);
};
export default Onboarding;