OV-369: + add constants

frontend/src/bundles/common/components/stepper/stepper.tsx

@@ -24,7 +24,9 @@ type Properties = {
 
 const Stepper: React.FC<Properties> = ({ steps, currentStep, onClickBack }) => {
     const activeStepIndex = steps.indexOf(currentStep);
-    const progressPercent = (activeStepIndex / (steps.length - 1)) * 100;
+    const MAX_PERCENT = 100;
+    const progressPercent =
+        (activeStepIndex / (steps.length - 1)) * MAX_PERCENT;
 
     const backButton = (
         <IconButton

frontend/src/bundles/create-avatar/enums/steps.ts

@@ -0,0 +1,7 @@
+const Steps = {
+    INSTRUCTIONS: 'Instructions',
+    UPLOAD: 'Upload',
+    CONSENT: 'Consent',
+} as const;
+
+export { Steps };

frontend/src/bundles/create-avatar/pages/create-avatar.tsx

@@ -10,21 +10,27 @@ import {
 } from '~/bundles/common/hooks/hooks.js';
 
 import { Consent, Instruction } from '../components/components.js';
+import { Steps } from '../enums/steps.js';
 import styles from './styles.module.css';
 
 const CreateAvatar: React.FC = () => {
-    const steps = useMemo(() => ['Instructions', 'Upload', 'Consent'], []);
-    const [step, setStep] = useState<string>('Instructions');
+    const steps = useMemo(
+        () => [Steps.INSTRUCTIONS, Steps.UPLOAD, Steps.CONSENT],
+        [],
+    );
+    const [step, setStep] = useState<(typeof Steps)[keyof typeof Steps]>(
+        Steps.INSTRUCTIONS,
+    );
 
     const renderStepContent = (step: string): JSX.Element | null => {
         switch (step) {
-            case 'Instructions': {
+            case Steps.INSTRUCTIONS: {
                 return <Instruction onClickNext={nextStep} />;
             }
-            case 'Upload': {
+            case Steps.UPLOAD: {
                 return <UploadVideo onClickNext={nextStep} />;
             }
-            case 'Consent': {
+            case Steps.CONSENT: {
                 return <Consent />;
             }
             default: {