From f8368eab8f23ce90da844f0632c4323b8b461ac9 Mon Sep 17 00:00:00 2001
From: Edmel John Linaugo <68092712+EdmelKun@users.noreply.github.com>
Date: Thu, 7 Dec 2023 04:09:11 +0800
Subject: [PATCH] fix: put alert to encourage user to save changes (#239)

---
 .../expo/src/components/modals/AlertModal.tsx |  2 +-
 .../ReviewerDetailsHeader.tsx                 |  4 +-
 apps/expo/src/forms/CreateTestForm/index.tsx  | 28 ++++++---
 apps/expo/src/screens/create-collection.tsx   |  2 +-
 .../src/screens/create-question/index.tsx     | 61 ++++++++++++-------
 .../src/screens/create-reviewer/index.tsx     |  2 +-
 .../src/screens/edit-collection/index.tsx     |  2 +-
 apps/expo/src/screens/edit-personal-info.tsx  |  2 +-
 8 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/apps/expo/src/components/modals/AlertModal.tsx b/apps/expo/src/components/modals/AlertModal.tsx
index 6e379337..c9c81283 100644
--- a/apps/expo/src/components/modals/AlertModal.tsx
+++ b/apps/expo/src/components/modals/AlertModal.tsx
@@ -63,7 +63,7 @@ export const AlertModal = ({
                   Vwidth="24"
                   Vheight="10"
                   onPress={onCancel}
-                  isLoading={isLoading}
+                  disabled={isLoading}
                 />
               </View>
             )}
diff --git a/apps/expo/src/components/reviewer-details/ReviewerDetailsHeader.tsx b/apps/expo/src/components/reviewer-details/ReviewerDetailsHeader.tsx
index 14bf46ea..8d09d351 100644
--- a/apps/expo/src/components/reviewer-details/ReviewerDetailsHeader.tsx
+++ b/apps/expo/src/components/reviewer-details/ReviewerDetailsHeader.tsx
@@ -1,7 +1,7 @@
 import { View, Text, TouchableOpacity } from "react-native";
 import useGoBack from "../../hooks/useGoBack";
 import EditIcon from "../../icons/EditIcon";
-import LeftArrowIcon from "../../icons/LeftArrowIcon";
+import { Feather } from "@expo/vector-icons";
 
 interface ReviewerHeaderProps {
   showEditIcon: boolean;
@@ -21,7 +21,7 @@ export const ReviewerDetailsHeader = ({
             onPress={goBack}
             className="flex flex-row items-center self-center"
           >
-            <LeftArrowIcon />
+            <Feather name="x" size={24} color="black" />
           </TouchableOpacity>
           <Text className="font-nunito-bold text-2xl leading-[38.40px] text-neutral-800">
             Reviewer Details
diff --git a/apps/expo/src/forms/CreateTestForm/index.tsx b/apps/expo/src/forms/CreateTestForm/index.tsx
index f8accbc9..9e1b7d55 100644
--- a/apps/expo/src/forms/CreateTestForm/index.tsx
+++ b/apps/expo/src/forms/CreateTestForm/index.tsx
@@ -87,7 +87,6 @@ const CreateTestForm: FC<Props> = ({
   const [selectedReviewer, setSelectedReviewer] = useState<Reviewer | null>(
     null,
   );
-
   const [openAlert, setOpenAlert] = useState(false);
   const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
   const [errorInAIQuestion, setErrorInAIQuestion] = useState(false);
@@ -252,7 +251,11 @@ const CreateTestForm: FC<Props> = ({
   }, [image, testDetails?.image]);
 
   const handleExitScreen = () => {
-    if (isDirty || questions.length > 0) {
+    if (
+      (testTitle === "Create Test" && isDirty) ||
+      (testTitle === "Edit Test" && isDirty) ||
+      questions.length > 0
+    ) {
       setOpenAlert(true);
     } else {
       goBack();
@@ -261,7 +264,11 @@ const CreateTestForm: FC<Props> = ({
 
   useEffect(() => {
     const backAction = () => {
-      if (isDirty || questions.length > 0) {
+      if (
+        (testTitle === "Create Test" && isDirty) ||
+        (testTitle === "Edit Test" && isDirty) ||
+        questions.length > 0
+      ) {
         setOpenAlert(true);
       } else {
         goBack();
@@ -440,7 +447,13 @@ const CreateTestForm: FC<Props> = ({
         screenName={testTitle}
         optionIcon={<Octicons name="three-bars" size={24} color="black" />}
         onIconPress={() => setIsSidebarOpen(true)}
-        backIcon={<Feather name="x" size={24} color="black" />}
+        backIcon={
+          questions.length > 0 || testTitle === "Create Test" ? (
+            <Feather name="x" size={24} color="black" />
+          ) : (
+            ""
+          )
+        }
         handleExit={handleExitScreen}
         showDeleteIcon={testTitle === "Edit Test"}
         onDeletePress={() =>
@@ -776,9 +789,9 @@ const CreateTestForm: FC<Props> = ({
 
       <AlertModal
         isVisible={openAlert}
-        alertTitle={"Are you sure?"}
+        alertTitle={"Save your test?"}
         alertDescription={
-          "You will lose all unsaved progress if you exit this screen"
+          "You will lose all unsaved changes if you exit this screen"
         }
         confirmButtonText={"Yes"}
         isCancelButtonVisible={true}
@@ -786,7 +799,8 @@ const CreateTestForm: FC<Props> = ({
         onCancel={() => {
           setOpenAlert(false);
         }}
-        onConfirm={goBack}
+        isLoading={isCreatingQuiz}
+        onConfirm={handleSubmit(submitForm)}
       />
     </SafeAreaView>
   );
diff --git a/apps/expo/src/screens/create-collection.tsx b/apps/expo/src/screens/create-collection.tsx
index 8cea3528..8d345ea5 100644
--- a/apps/expo/src/screens/create-collection.tsx
+++ b/apps/expo/src/screens/create-collection.tsx
@@ -251,7 +251,7 @@ export const CreateCollection = () => {
         isVisible={openAlert}
         alertTitle={"Are you sure?"}
         alertDescription={
-          "You will lose all unsaved progress if you exit this screen"
+          "You will lose all unsaved changes if you exit this screen"
         }
         confirmButtonText={"Yes"}
         isCancelButtonVisible={true}
diff --git a/apps/expo/src/screens/create-question/index.tsx b/apps/expo/src/screens/create-question/index.tsx
index e6265d18..466a28e7 100644
--- a/apps/expo/src/screens/create-question/index.tsx
+++ b/apps/expo/src/screens/create-question/index.tsx
@@ -116,6 +116,7 @@ export const CreateQuestionScreen: FC = () => {
   const [choices, setChoices] = useState<Choice[]>([]);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isChoiceModalTouched, setIsChoiceModalTouched] = useState(false);
+  const [promptSaveModal, setPromptSaveModal] = useState(false);
 
   const { height, width } = Dimensions.get("window");
 
@@ -190,6 +191,7 @@ export const CreateQuestionScreen: FC = () => {
   const snapPoints = useMemo(() => ["5%", "25%", "70%"], []);
 
   const openBottomSheet = () => {
+    handleSaveQuestion();
     bottomSheetRef.current?.expand();
   };
 
@@ -569,12 +571,7 @@ export const CreateQuestionScreen: FC = () => {
   };
 
   const handleExitScreen = () => {
-    if (question?.inEdit) {
-      setOpenAlert(true);
-    } else {
-      resetQuestionImage();
-      goBack();
-    }
+    setOpenAlert(true);
   };
 
   const handleDelete = () => {
@@ -979,24 +976,29 @@ export const CreateQuestionScreen: FC = () => {
           </View>
         </ScrollView>
 
-        <BottomSheet
-          ref={bottomSheetRef}
-          index={-1}
-          snapPoints={snapPoints}
-          onChange={handleSheetChanges}
-          style={styles.bottomSheetContainer}
-        >
-          <ChoiceBottomSheet
-            goToCreateQuestion={goToCreateQuestion}
-            closeBottomSheet={() => bottomSheetRef.current?.close()}
-          />
-        </BottomSheet>
+        <AlertModal
+          isVisible={promptSaveModal}
+          alertTitle={"Save your question?"}
+          alertDescription={
+            "You will lose all unsaved changes if you exit this screen"
+          }
+          confirmButtonText={"Yes"}
+          isCancelButtonVisible={true}
+          cancelButtonText={"Cancel"}
+          onCancel={() => {
+            setPromptSaveModal(false);
+          }}
+          onConfirm={handleSaveAnswer(() => {
+            setIsSaved(false);
+            setPromptSaveModal(false);
+          })}
+        />
 
         <AlertModal
           isVisible={openAlert}
-          alertTitle={"Are you sure?"}
+          alertTitle={"Save your question?"}
           alertDescription={
-            "You will lose all unsaved progress if you exit this screen"
+            "You will lose all unsaved changes if you exit this screen"
           }
           confirmButtonText={"Yes"}
           isCancelButtonVisible={true}
@@ -1004,8 +1006,25 @@ export const CreateQuestionScreen: FC = () => {
           onCancel={() => {
             setOpenAlert(false);
           }}
-          onConfirm={goBack}
+          onConfirm={() => {
+            handleSaveQuestion();
+            resetQuestionImage();
+            goBack();
+          }}
         />
+
+        <BottomSheet
+          ref={bottomSheetRef}
+          index={-1}
+          snapPoints={snapPoints}
+          onChange={handleSheetChanges}
+          style={styles.bottomSheetContainer}
+        >
+          <ChoiceBottomSheet
+            goToCreateQuestion={goToCreateQuestion}
+            closeBottomSheet={() => bottomSheetRef.current?.close()}
+          />
+        </BottomSheet>
       </View>
     </SafeAreaView>
   );
diff --git a/apps/expo/src/screens/create-reviewer/index.tsx b/apps/expo/src/screens/create-reviewer/index.tsx
index d1254153..bd515a8f 100644
--- a/apps/expo/src/screens/create-reviewer/index.tsx
+++ b/apps/expo/src/screens/create-reviewer/index.tsx
@@ -726,7 +726,7 @@ export const CreateReviewerScreen = ({
         isVisible={openAlert}
         alertTitle={"Are you sure?"}
         alertDescription={
-          "You will lose all unsaved progress if you exit this screen"
+          "You will lose all unsaved changes if you exit this screen"
         }
         confirmButtonText={"Yes"}
         isCancelButtonVisible={true}
diff --git a/apps/expo/src/screens/edit-collection/index.tsx b/apps/expo/src/screens/edit-collection/index.tsx
index 286a7174..61d4f430 100644
--- a/apps/expo/src/screens/edit-collection/index.tsx
+++ b/apps/expo/src/screens/edit-collection/index.tsx
@@ -349,7 +349,7 @@ export const EditCollection: FC<RootStackScreenProps<"EditCollection">> = ({
         isVisible={openAlert}
         alertTitle={"Are you sure?"}
         alertDescription={
-          "You will lose all unsaved progress if you exit this screen"
+          "You will lose all unsaved changes if you exit this screen"
         }
         confirmButtonText={"Yes"}
         isCancelButtonVisible={true}
diff --git a/apps/expo/src/screens/edit-personal-info.tsx b/apps/expo/src/screens/edit-personal-info.tsx
index 088dde88..90be4755 100644
--- a/apps/expo/src/screens/edit-personal-info.tsx
+++ b/apps/expo/src/screens/edit-personal-info.tsx
@@ -330,7 +330,7 @@ export const EditPersonalInfoScreen = () => {
           isVisible={openAlert}
           alertTitle={"Are you sure?"}
           alertDescription={
-            "You will lose all unsaved progress if you exit this screen"
+            "You will lose all unsaved changes if you exit this screen"
           }
           confirmButtonText={"Yes"}
           isCancelButtonVisible={true}