Skip to content

Commit 655820d

Browse files
ArneiArnei
authored
Merge pull request #1169 from Arnei/make-wizard-stepper-more-robust
Make wizard stepping more robust
2 parents c37029d + ce743a6 commit 655820d

File tree

12 files changed

+281
-278
lines changed

12 files changed

+281
-278
lines changed

‎src/components/configuration/partials/wizard/NewThemeWizard.tsx

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,20 @@ import BumperPage from "./BumperPage";
55
import TitleSlidePage from "./TitleSlidePage";
66
import WatermarkPage from "./WatermarkPage";
77
import ThemeSummaryPage from "./ThemeSummaryPage";
8-
import WizardStepper from "../../../shared/wizard/WizardStepper";
8+
import WizardStepper, { WizardStep } from "../../../shared/wizard/WizardStepper";
99
import { initialFormValuesNewThemes } from "../../../../configs/modalConfig";
1010
import { usePageFunctions } from "../../../../hooks/wizardHooks";
1111
import { NewThemeSchema } from "../../../../utils/validate";
1212
import { useAppDispatch } from "../../../../store";
1313
import { postNewTheme, ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
14-
import { ParseKeys } from "i18next";
1514

1615
/**
1716
* This component manages the pages of the new theme wizard and the submission of values
1817
*/
19-
const NewThemeWizard: React.FC<{
18+
const NewThemeWizard = ({
19+
close
20+
}: {
2021
close: () => void
21-
}> = ({
22-
close,
2322
}) => {
2423
const dispatch = useAppDispatch();
2524
const initialValues = initialFormValuesNewThemes;
@@ -34,11 +33,13 @@ const NewThemeWizard: React.FC<{
3433
setPageCompleted,
3534
} = usePageFunctions(0, initialValues);
3635

36+
type StepName = "generalForm" | "bumperForm" | "trailerForm" | "titleSlideForm" | "watermarkForm" | "summary";
37+
type Step = WizardStep & {
38+
name: StepName,
39+
}
40+
3741
// Caption of steps used by Stepper
38-
const steps: {
39-
name: string
40-
translation: ParseKeys
41-
}[] = [
42+
const steps: Step[] = [
4243
{
4344
name: "generalForm",
4445
translation: "CONFIGURATION.THEMES.DETAILS.GENERAL.CAPTION",
@@ -66,7 +67,7 @@ const NewThemeWizard: React.FC<{
6667
];
6768

6869
// Validation schema of current page
69-
const currentValidationSchema = NewThemeSchema[page];
70+
const currentValidationSchema = NewThemeSchema[steps[page].name];
7071

7172
const handleSubmit = (values: ThemeDetailsInitialValues) => {
7273
dispatch(postNewTheme(values));
@@ -94,46 +95,46 @@ const NewThemeWizard: React.FC<{
9495
{/* Stepper that shows each step of wizard as header */}
9596
<WizardStepper
9697
steps={steps}
97-
page={page}
98-
setPage={setPage}
98+
activePageIndex={page}
99+
setActivePage={setPage}
99100
completed={pageCompleted}
100101
setCompleted={setPageCompleted}
101102
formik={formik}
102103
/>
103104
<div>
104-
{page === 0 && (
105+
{steps[page].name === "generalForm" && (
105106
<GeneralPage formik={formik} nextPage={nextPage} />
106107
)}
107-
{page === 1 && (
108+
{steps[page].name === "bumperForm" && (
108109
<BumperPage
109110
formik={formik}
110111
nextPage={nextPage}
111112
previousPage={previousPage}
112113
/>
113114
)}
114-
{page === 2 && (
115+
{steps[page].name === "trailerForm" && (
115116
<BumperPage
116117
formik={formik}
117118
nextPage={nextPage}
118119
previousPage={previousPage}
119120
isTrailer
120121
/>
121122
)}
122-
{page === 3 && (
123+
{steps[page].name === "titleSlideForm" && (
123124
<TitleSlidePage
124125
formik={formik}
125126
nextPage={nextPage}
126127
previousPage={previousPage}
127128
/>
128129
)}
129-
{page === 4 && (
130+
{steps[page].name === "watermarkForm" && (
130131
<WatermarkPage
131132
formik={formik}
132133
nextPage={nextPage}
133134
previousPage={previousPage}
134135
/>
135136
)}
136-
{page === 5 && (
137+
{steps[page].name === "summary" && (
137138
<ThemeSummaryPage
138139
formik={formik}
139140
previousPage={previousPage}

‎src/components/configuration/partials/wizard/ThemeDetails.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const ThemeDetails = ({
4343

4444
// information about tabs
4545
const tabs: {
46-
name: string
46+
name: "generalForm" | "bumperForm" | "trailerForm" | "titleSlideForm" | "watermarkForm" | "usage"
4747
tabTranslation: ParseKeys
4848
translation: ParseKeys
4949
accessRole: string
@@ -87,7 +87,7 @@ const ThemeDetails = ({
8787
];
8888

8989
// Validation schema of current page
90-
const currentValidationSchema = NewThemeSchema[page];
90+
const currentValidationSchema = NewThemeSchema[tabs[page].name];
9191

9292
// update theme
9393
const handleSubmit = (values: ThemeDetailsInitialValues) => {

‎src/components/events/partials/modals/EditScheduledEventsModal.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from "react";
22
import { Formik } from "formik";
33
import { initialFormValuesEditScheduledEvents } from "../../../../configs/modalConfig";
4-
import WizardStepper from "../../../shared/wizard/WizardStepper";
4+
import WizardStepper, { WizardStep } from "../../../shared/wizard/WizardStepper";
55
import EditScheduledEventsGeneralPage from "../ModalTabsAndPages/EditScheduledEventsGeneralPage";
66
import EditScheduledEventsEditPage from "../ModalTabsAndPages/EditScheduledEventsEditPage";
77
import EditScheduledEventsSummaryPage from "../ModalTabsAndPages/EditScheduledEventsSummaryPage";
@@ -21,7 +21,6 @@ import {
2121
} from "../../../../slices/eventSlice";
2222
import { fetchRecordings } from "../../../../slices/recordingSlice";
2323
import { Event } from "../../../../slices/eventSlice";
24-
import { ParseKeys } from "i18next";
2524

2625
/**
2726
* This component manages the pages of the edit scheduled bulk action
@@ -58,10 +57,12 @@ const EditScheduledEventsModal = ({
5857
// eslint-disable-next-line react-hooks/exhaustive-deps
5958
}, []);
6059

61-
const steps: {
62-
translation: ParseKeys
63-
name: string
64-
}[] = [
60+
type StepName = "general" | "edit" | "summary";
61+
type Step = WizardStep & {
62+
name: StepName,
63+
}
64+
65+
const steps: Step[] = [
6566
{
6667
translation: "BULK_ACTIONS.EDIT_EVENTS.GENERAL.CAPTION",
6768
name: "general",
@@ -137,20 +138,20 @@ const EditScheduledEventsModal = ({
137138
{/* Stepper that shows each step of wizard as header */}
138139
<WizardStepper
139140
steps={steps}
140-
page={page}
141-
setPage={setPage}
141+
activePageIndex={page}
142+
setActivePage={setPage}
142143
completed={pageCompleted}
143144
setCompleted={setPageCompleted}
144145
formik={formik}
145146
/>
146147
<div>
147-
{page === 0 && (
148+
{steps[page].name === "general" && (
148149
<EditScheduledEventsGeneralPage
149150
formik={formik}
150151
nextPage={nextPage}
151152
/>
152153
)}
153-
{page === 1 && (
154+
{steps[page].name === "edit" && (
154155
<EditScheduledEventsEditPage
155156
formik={formik}
156157
nextPage={nextPage}
@@ -160,7 +161,7 @@ const EditScheduledEventsModal = ({
160161
setPageCompleted={setPageCompleted}
161162
/>
162163
)}
163-
{page === 2 && (
164+
{steps[page].name === "summary" && (
164165
<EditScheduledEventsSummaryPage
165166
formik={formik}
166167
previousPage={previousPage}

‎src/components/events/partials/modals/StartTaskModal.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from "react";
22
import { Formik } from "formik";
33
import { initialFormValuesStartTask } from "../../../../configs/modalConfig";
4-
import WizardStepper from "../../../shared/wizard/WizardStepper";
4+
import WizardStepper, { WizardStep } from "../../../shared/wizard/WizardStepper";
55
import StartTaskGeneralPage from "../ModalTabsAndPages/StartTaskGeneralPage";
66
import StartTaskWorkflowPage from "../ModalTabsAndPages/StartTaskWorkflowPage";
77
import StartTaskSummaryPage from "../ModalTabsAndPages/StartTaskSummaryPage";
@@ -11,7 +11,6 @@ import { usePageFunctions } from "../../../../hooks/wizardHooks";
1111
import { checkValidityStartTaskEventSelection } from "../../../../utils/bulkActionUtils";
1212
import { useAppDispatch } from "../../../../store";
1313
import { Event } from "../../../../slices/eventSlice";
14-
import { ParseKeys } from "i18next";
1514

1615
/**
1716
* This component manages the pages of the task start bulk action
@@ -35,10 +34,12 @@ const StartTaskModal = ({
3534
setPageCompleted,
3635
} = usePageFunctions(0, initialValues);
3736

38-
const steps: {
39-
translation: ParseKeys
40-
name: string
41-
}[] = [
37+
type StepName = "general" | "tasks" | "summary";
38+
type Step = WizardStep & {
39+
name: StepName,
40+
}
41+
42+
const steps: Step[] = [
4243
{
4344
translation: "BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CAPTION",
4445
name: "general",
@@ -103,28 +104,28 @@ const StartTaskModal = ({
103104
{/* Stepper that shows each step of wizard as header */}
104105
<WizardStepper
105106
steps={steps}
106-
page={page}
107-
setPage={setPage}
107+
activePageIndex={page}
108+
setActivePage={setPage}
108109
completed={pageCompleted}
109110
setCompleted={setPageCompleted}
110111
formik={formik}
111112
/>
112113
<div>
113-
{page === 0 && (
114+
{steps[page].name === "general" && (
114115
<StartTaskGeneralPage
115116
formik={formik}
116117
nextPage={nextPage}
117118
/>
118119
)}
119-
{page === 1 && (
120+
{steps[page].name === "tasks" && (
120121
<StartTaskWorkflowPage
121122
formik={formik}
122123
nextPage={nextPage}
123124
previousPage={previousPage}
124125
setPageCompleted={setPageCompleted}
125126
/>
126127
)}
127-
{page === 2 && (
128+
{steps[page].name === "summary" && (
128129
<StartTaskSummaryPage
129130
formik={formik}
130131
previousPage={previousPage}

0 commit comments

Comments
 (0)