Simpler Flow

src/components/ProgramManagement/CourseManagementFlow.jsx

@@ -19,27 +19,7 @@ export const CourseManagementFlow = ({ courseID, isShown, onFinish }) => {
 
   const [course, updateCourse] = useState(emptyState); // replace with api data
 
-  const canGoNext = (index) => {
-    switch (index) {
-      case 0:
-        return isCourseValid(course.content);
-      case 1:
-        return true;
-      case 2:
-        return isQuizValid(course.quiz);
-    }
-  };
-
-  const runBeforeNext = (index) => {
-    switch (index) {
-      case 0:
-        console.debug(course.content); //TODO: replace with an api call
-        break;
-      case 2:
-        console.debug(course.quiz); //TODO: replace with an api call
-        break;
-    }
-  };
+  const [modalKey, setModalKey] = useState(0);
 
   const flowStops = [
     {
@@ -52,10 +32,14 @@ export const CourseManagementFlow = ({ courseID, isShown, onFinish }) => {
           }
         />
       ),
+      canGoNext: () => isCourseValid(course.content),
+      action: () => console.debug(course.content),
     },
     {
       title: "إضافة دروس",
       content: <LessonsListing courseID={courseID} lessons={course.lessons} />,
+      canGoNext: () => true,
+      action: () => {},
     },
     {
       title: "إنشاء كويز",
@@ -67,17 +51,24 @@ export const CourseManagementFlow = ({ courseID, isShown, onFinish }) => {
           }}
         />
       ),
+      canGoNext: () => isQuizValid(course.quiz),
+      action: () => console.debug(course.quiz),
     },
   ];
 
+  const resetFlow = () => {
+    updateCourse(emptyState);
+    setModalKey(modalKey + 1);
+    onFinish();
+  };
+
   return (
     <FlowModal
-      flowStops={flowStops}
+      key={modalKey}
       isShown={isShown}
-      canGoNext={canGoNext}
-      runBeforeNext={runBeforeNext}
-      onFinish={onFinish}
-      onCancel={onFinish}
+      flowStops={flowStops}
+      onFinish={resetFlow}
+      onCancel={resetFlow}
     />
   );
 };
@@ -125,7 +116,7 @@ export const CoursesListing = ({ programID }) => {
         onMinus={() => {
           if (userIsSure()) manageCourses.removeLast();
         }}
-        minusDisabled={manageCourses.collection.length == 0}
+        minusDisabled={manageCourses.collection.length === 0}
       />
     </div>
   );

src/components/ProgramManagement/LessonManagementFlow.jsx

@@ -19,25 +19,7 @@ export const LessonManagementFlow = ({ lessonID, isShown, onFinish }) => {
   };
   const [lesson, updateLesson] = useState(emptyState); // replace with api data
 
-  const canGoNext = (index) => {
-    switch (index) {
-      case 0:
-        return isLessonValid(lesson.content);
-      case 1:
-        return isQuizValid(lesson.quiz);
-    }
-  };
-
-  const runBeforeNext = (index) => {
-    switch (index) {
-      case 0:
-        console.debug(lesson.content); //TODO: replace with an api call
-        break;
-      case 1:
-        console.debug(lesson.quiz); //TODO: replace with an api call
-        break;
-    }
-  };
+  const [modalKey, setModalKey] = useState(0);
 
   const flowStops = [
     {
@@ -50,6 +32,8 @@ export const LessonManagementFlow = ({ lessonID, isShown, onFinish }) => {
           }
         />
       ),
+      canGoNext: () => isLessonValid(lesson.content),
+      action: () => console.debug(lesson.content),
     },
     {
       title: "إنشاء كويز",
@@ -61,17 +45,24 @@ export const LessonManagementFlow = ({ lessonID, isShown, onFinish }) => {
           }}
         />
       ),
+      canGoNext: () => isQuizValid(lesson.quiz),
+      action: () => console.debug(lesson.quiz),
     },
   ];
 
+  const resetFlow = () => {
+    updateLesson(emptyState);
+    setModalKey(modalKey + 1);
+    onFinish();
+  };
+
   return (
     <FlowModal
+      key={modalKey}
       isShown={isShown}
-      runBeforeNext={runBeforeNext}
-      canGoNext={canGoNext}
       flowStops={flowStops}
-      onFinish={onFinish}
-      onCancel={onFinish}
+      onFinish={resetFlow}
+      onCancel={resetFlow}
     />
   );
 };
@@ -119,7 +110,7 @@ export const LessonsListing = ({ courseID }) => {
         onMinus={() => {
           if (userIsSure()) manageLessons.removeLast();
         }}
-        minusDisabled={manageLessons.collection.length == 0}
+        minusDisabled={manageLessons.collection.length === 0}
       />
     </div>
   );

src/components/ProgramManagement/ManageQuiz.jsx

@@ -32,8 +32,6 @@ const ManageQuiz = React.memo(({ existingQuestions, update }) => {
             type: "WRITTEN",
             fullMark: 0,
           });
-          console.log(manageQuizzes.collection);
-
         }}
         onMinus={() => {
           manageQuizzes.removeLast();

src/components/ProgramManagement/ProgramManagementFlow.jsx

@@ -18,39 +18,20 @@ export const ProgramManagementFlow = ({ programID, isShown, onFinish }) => {
 
   const [program, updateProgram] = useState(emptyState); // replace with api data
 
-  const canGoNext = (index) => {
-    switch (index) {
-      case 0:
-        return true; //TODO: handle program creation
-      case 1:
-        return true;
-      case 2:
-        return isQuizValid(program.assessmentQuiz);
-    }
-  };
-
-  const runBeforeNext = (index) => {
-    switch (index) {
-      case 0:
-        console.debug("program"); //TODO: replace with an api call
-        break;
-      case 1:
-        console.debug("courses"); //TODO: replace with an api call
-        break;
-      case 2:
-        console.debug(program.quiz); //TODO: replace with an api call
-        break;
-    }
-  };
+  const [modalKey, setModalKey] = useState(0);
 
   const flowStops = [
     {
       title: "إنشاء برنامج جديد",
       content: <ProgramCreation />,
+      canGoNext: () => true,
+      action: () => console.debug("program"),
     },
     {
       title: "الكورسات",
       content: <CoursesListing programID={programID} />,
+      canGoNext: () => true,
+      action: () => console.debug("courses"),
     },
     {
       title: "امتحان القبول",
@@ -62,17 +43,24 @@ export const ProgramManagementFlow = ({ programID, isShown, onFinish }) => {
           }}
         />
       ),
+      canGoNext: () => isQuizValid(program.assessmentQuiz),
+      action: () => console.debug(program.assessmentQuiz),
     },
   ];
 
+  const resetFlow = () => {
+    updateProgram(emptyState);
+    setModalKey(modalKey + 1);
+    onFinish();
+  };
+
   return (
     <FlowModal
+      key={modalKey}
       isShown={isShown}
-      runBeforeNext={runBeforeNext}
-      canGoNext={canGoNext}
       flowStops={flowStops}
-      onFinish={onFinish}
-      onCancel={onFinish}
+      onFinish={resetFlow}
+      onCancel={resetFlow}
     />
   );
 };
@@ -120,7 +108,7 @@ export const ProgramsListing = ({ userID }) => {
         onMinus={() => {
           if (userIsSure()) managePrograms.removeLast();
         }}
-        minusDisabled={managePrograms.collection.length == 0}
+        minusDisabled={managePrograms.collection.length === 0}
       />
     </div>
   );

src/components/Shared/Flow/Flow.jsx

@@ -3,14 +3,7 @@ import { SwitchTransition, CSSTransition } from "react-transition-group";
 import "./Flow.scss";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
 
-export const FlowModal = ({
-  flowStops,
-  isShown,
-  canGoNext,
-  runBeforeNext,
-  onFinish,
-  onCancel,
-}) => {
+export const FlowModal = ({ flowStops, isShown, onFinish, onCancel }) => {
   const [currentStop, updateCurrentStop] = useState(0);
 
   const firstStop = currentStop === 0;
@@ -32,16 +25,17 @@ export const FlowModal = ({
           <div className="navigationBtns">
             <button
               type="button"
-              disabled={!canGoNext(currentStop)}
+              disabled={!flowStops[currentStop].canGoNext()}
               className="btn btn-success"
               onClick={() => {
-                if (window.confirm("تأكيد؟"))
+                if (window.confirm("تأكيد؟")) {
+                  flowStops[currentStop].action();
                   if (lastStop) {
                     if (onFinish) onFinish();
                   } else {
-                    runBeforeNext(currentStop);
                     updateCurrentStop(currentStop + 1);
                   }
+                }
               }}
             >
               {lastStop