From d403f1c348ae5ea5353e8ec16838feb9a513e47a Mon Sep 17 00:00:00 2001
From: hansgabriel <hansdaduya@yahoo.com>
Date: Sun, 10 Dec 2023 23:27:23 +0800
Subject: [PATCH 1/4] Add question saving when changing views

---
 apps/expo/src/forms/CreateTestForm/index.tsx  | 117 +++++++++---------
 .../src/screens/create-question/index.tsx     |  64 ++++++++--
 apps/expo/src/screens/edit-test.tsx           |   4 +-
 3 files changed, 112 insertions(+), 73 deletions(-)

diff --git a/apps/expo/src/forms/CreateTestForm/index.tsx b/apps/expo/src/forms/CreateTestForm/index.tsx
index ba22029..dffd8c3 100644
--- a/apps/expo/src/forms/CreateTestForm/index.tsx
+++ b/apps/expo/src/forms/CreateTestForm/index.tsx
@@ -613,62 +613,59 @@ const CreateTestForm: FC<Props> = ({
               </TouchableOpacity>
             </View>
           )}
-          {questions.length > 0 && (
-            <>
-              <View className="mb-10 h-full flex-1 flex-col">
-                <View className="mb-6 flex flex-row items-center justify-between">
-                  <Text className="text-xl font-bold leading-loose text-neutral-800">
-                    Question ({questions.length})
-                  </Text>
-                  <TouchableOpacity
-                    className="flex flex-row items-center gap-1"
-                    onPress={goToViewAllQuestions}
-                  >
-                    <Text className="font-nunito-bold w-70 text-right text-lg font-semibold leading-6 text-[#6949FF]">
-                      View All
-                    </Text>
-                    <RightArrowIcon />
-                  </TouchableOpacity>
-                </View>
 
-                <SafeAreaView className="min-h-full flex-1">
-                  {isLoading ? (
-                    <View className="h-[50%] w-full flex-col justify-between self-center">
-                      <View className="my-7">
-                        <SkeletonLoader
-                          isCircular={true}
-                          width={"100%"}
-                          height={75}
-                        />
-                      </View>
-                      <View className="my-7">
-                        <SkeletonLoader
-                          isCircular={true}
-                          width={"100%"}
-                          height={75}
-                        />
-                      </View>
-                    </View>
-                  ) : (
-                    <FlashList
-                      estimatedItemSize={10}
-                      data={readyQuestions}
-                      showsVerticalScrollIndicator={true}
-                      renderItem={({ item: question, index }) => {
-                        return (
-                          <QuestionCard
-                            question={question}
-                            index={index}
-                            goToEditQuestion={goToEditQuestion}
-                          />
-                        );
-                      }}
+          <View className="mb-10 h-full flex-1 flex-col">
+            <View className="mb-6 flex flex-row items-center justify-between">
+              <Text className="text-xl font-bold leading-loose text-neutral-800">
+                Question {questions.length > 0 ? `(${questions.length})` : "()"}
+              </Text>
+              <TouchableOpacity
+                className="flex flex-row items-center gap-1"
+                onPress={goToViewAllQuestions}
+              >
+                <Text className="font-nunito-bold w-70 text-right text-lg font-semibold leading-6 text-[#6949FF]">
+                  View All
+                </Text>
+                <RightArrowIcon />
+              </TouchableOpacity>
+            </View>
+
+            <SafeAreaView className="min-h-full flex-1">
+              {isLoading ? (
+                <View className="h-[50%] w-full flex-col justify-between self-center">
+                  <View className="my-7">
+                    <SkeletonLoader
+                      isCircular={true}
+                      width={"100%"}
+                      height={75}
                     />
-                  )}
-                </SafeAreaView>
-              </View>
-            </>
-          )}
+                  </View>
+                  <View className="my-7">
+                    <SkeletonLoader
+                      isCircular={true}
+                      width={"100%"}
+                      height={75}
+                    />
+                  </View>
+                </View>
+              ) : (
+                <FlashList
+                  estimatedItemSize={10}
+                  data={readyQuestions}
+                  showsVerticalScrollIndicator={true}
+                  renderItem={({ item: question, index }) => {
+                    return (
+                      <QuestionCard
+                        question={question}
+                        index={index}
+                        goToEditQuestion={goToEditQuestion}
+                      />
+                    );
+                  }}
+                />
+              )}
+            </SafeAreaView>
+          </View>
 
           <View className="mb-24 flex flex-row items-center justify-between">
             <TouchableOpacity
@@ -790,19 +787,21 @@ const CreateTestForm: FC<Props> = ({
 
       <AlertModal
         isVisible={openAlert}
-        alertTitle={"Save your changes?"}
+        alertTitle={"Are you sure you want to exit?"}
         alertDescription={
-          "You will lose all unsaved changes if you exit this screen"
+          "Please make sure to save your changes before exiting."
         }
         confirmButtonText={"Yes"}
         isCancelButtonVisible={true}
-        cancelButtonText={"Exit"}
+        cancelButtonText={"Cancel"}
         onCancel={() => {
           setOpenAlert(false);
-          goBack();
         }}
         isLoading={isCreatingQuiz}
-        onConfirm={handleSubmit(submitForm)}
+        onConfirm={() => {
+          setOpenAlert(false);
+          goBack();
+        }}
       />
     </SafeAreaView>
   );
diff --git a/apps/expo/src/screens/create-question/index.tsx b/apps/expo/src/screens/create-question/index.tsx
index 466a28e..057e1ba 100644
--- a/apps/expo/src/screens/create-question/index.tsx
+++ b/apps/expo/src/screens/create-question/index.tsx
@@ -191,7 +191,17 @@ export const CreateQuestionScreen: FC = () => {
   const snapPoints = useMemo(() => ["5%", "25%", "70%"], []);
 
   const openBottomSheet = () => {
-    handleSaveQuestion();
+    const isValidInput = handleSaveQuestion({
+      showToasts: false,
+    });
+
+    if (typeof isValidInput !== "boolean" || !isValidInput) {
+      errorToast({
+        title: "Missing field",
+        message: "Please fill out all required fields",
+      });
+      return;
+    }
     bottomSheetRef.current?.expand();
   };
 
@@ -406,7 +416,11 @@ export const CreateQuestionScreen: FC = () => {
 
   const selectedImage = getSelectedImage();
 
-  const handleSaveQuestion = () => {
+  const handleSaveQuestion = ({
+    showToasts = true,
+  }: {
+    showToasts?: boolean;
+  } = {}) => {
     if (!questionType) return false;
     resetErrors();
     const errors = checkErrors({
@@ -462,10 +476,12 @@ export const CreateQuestionScreen: FC = () => {
     editQuestion(selectedIndex!, question);
     resetQuestionImage();
     resetErrors();
-    successToast({
-      title: "Success",
-      message: "Question saved successfully",
-    });
+    if (showToasts) {
+      successToast({
+        title: "Success",
+        message: "Question saved successfully",
+      });
+    }
     return true;
   };
 
@@ -532,6 +548,18 @@ export const CreateQuestionScreen: FC = () => {
   };
 
   const handleClickQuestion = (index: number) => () => {
+    const isValidInput = handleSaveQuestion({
+      showToasts: false,
+    });
+
+    if (typeof isValidInput !== "boolean" || !isValidInput) {
+      errorToast({
+        title: "Missing field",
+        message: "Please fill out all required fields",
+      });
+      return;
+    }
+
     setSelectedIndex(index);
     setSelectedQuestionId(index);
     setQuestionImage(questions[index]?.image ?? undefined);
@@ -849,7 +877,7 @@ export const CreateQuestionScreen: FC = () => {
                     </Text>
                     <TextInput
                       multiline={true}
-                      maxLength={100}
+                      maxLength={150}
                       className={`mx-5 mt-5 h-[50%] flex-col items-center justify-center rounded-2xl border-b-2 ${selectedChoice?.styles} p-2 text-center text-lg font-bold leading-[28.80px] text-white`}
                       selectionColor="white"
                       value={selectedChoice?.text}
@@ -860,9 +888,9 @@ export const CreateQuestionScreen: FC = () => {
                       placeholderTextColor="#FFFFFF"
                     />
                     {selectedChoice?.text &&
-                    selectedChoice?.text.length >= 100 ? (
+                    selectedChoice?.text.length >= 150 ? (
                       <Text className="mt-2 text-center text-red-500 ">
-                        You've reached the maximum of 100 characters.
+                        You've reached the maximum of 150 characters.
                       </Text>
                     ) : null}
 
@@ -996,9 +1024,9 @@ export const CreateQuestionScreen: FC = () => {
 
         <AlertModal
           isVisible={openAlert}
-          alertTitle={"Save your question?"}
+          alertTitle={"Are you sure you want to exit?"}
           alertDescription={
-            "You will lose all unsaved changes if you exit this screen"
+            "Please make sure to save in order to keep your changes"
           }
           confirmButtonText={"Yes"}
           isCancelButtonVisible={true}
@@ -1007,7 +1035,19 @@ export const CreateQuestionScreen: FC = () => {
             setOpenAlert(false);
           }}
           onConfirm={() => {
-            handleSaveQuestion();
+            const isValidInput = handleSaveQuestion({
+              showToasts: false,
+            });
+
+            if (typeof isValidInput !== "boolean" || !isValidInput) {
+              setOpenAlert(false);
+              errorToast({
+                title: "Missing field",
+                message: "Please fill out all required fields",
+              });
+              return;
+            }
+
             resetQuestionImage();
             goBack();
           }}
diff --git a/apps/expo/src/screens/edit-test.tsx b/apps/expo/src/screens/edit-test.tsx
index c8755b5..5fb0eaa 100644
--- a/apps/expo/src/screens/edit-test.tsx
+++ b/apps/expo/src/screens/edit-test.tsx
@@ -37,7 +37,7 @@ export const EditTestScreen: FC<RootStackScreenProps<"EditTest">> = ({
 
   const [isUploading, setIsUploading] = useState<boolean>(false);
 
-  const { data: testDetails, isLoading } = trpc.test.getById.useQuery(
+  const { data: testDetails, isFetching } = trpc.test.getById.useQuery(
     { testId },
     {
       onSuccess: (data) => {
@@ -179,7 +179,7 @@ export const EditTestScreen: FC<RootStackScreenProps<"EditTest">> = ({
           onSubmit={submitTestDetails}
           isCreatingQuiz={isEditingTest}
           isUploading={isUploading}
-          isLoading={isLoading}
+          isLoading={isFetching}
         />
       </View>
     </SafeAreaView>

From 159a37693a21f6b38f1d9fdd9b3a3b0a7e29030c Mon Sep 17 00:00:00 2001
From: hansgabriel <hansdaduya@yahoo.com>
Date: Mon, 11 Dec 2023 22:42:35 +0800
Subject: [PATCH 2/4] Fix requested changes

---
 apps/expo/src/forms/CreateTestForm/index.tsx  | 28 ++++++++++---------
 .../src/screens/create-question/index.tsx     | 13 ---------
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/apps/expo/src/forms/CreateTestForm/index.tsx b/apps/expo/src/forms/CreateTestForm/index.tsx
index dffd8c3..8ce9359 100644
--- a/apps/expo/src/forms/CreateTestForm/index.tsx
+++ b/apps/expo/src/forms/CreateTestForm/index.tsx
@@ -615,20 +615,22 @@ const CreateTestForm: FC<Props> = ({
           )}
 
           <View className="mb-10 h-full flex-1 flex-col">
-            <View className="mb-6 flex flex-row items-center justify-between">
-              <Text className="text-xl font-bold leading-loose text-neutral-800">
-                Question {questions.length > 0 ? `(${questions.length})` : "()"}
-              </Text>
-              <TouchableOpacity
-                className="flex flex-row items-center gap-1"
-                onPress={goToViewAllQuestions}
-              >
-                <Text className="font-nunito-bold w-70 text-right text-lg font-semibold leading-6 text-[#6949FF]">
-                  View All
+            {questions.length > 0 && (
+              <View className="mb-6 flex flex-row items-center justify-between">
+                <Text className="text-xl font-bold leading-loose text-neutral-800">
+                  Question ({questions.length})
                 </Text>
-                <RightArrowIcon />
-              </TouchableOpacity>
-            </View>
+                <TouchableOpacity
+                  className="flex flex-row items-center gap-1"
+                  onPress={goToViewAllQuestions}
+                >
+                  <Text className="font-nunito-bold w-70 text-right text-lg font-semibold leading-6 text-[#6949FF]">
+                    View All
+                  </Text>
+                  <RightArrowIcon />
+                </TouchableOpacity>
+              </View>
+            )}
 
             <SafeAreaView className="min-h-full flex-1">
               {isLoading ? (
diff --git a/apps/expo/src/screens/create-question/index.tsx b/apps/expo/src/screens/create-question/index.tsx
index 057e1ba..7875e74 100644
--- a/apps/expo/src/screens/create-question/index.tsx
+++ b/apps/expo/src/screens/create-question/index.tsx
@@ -1035,19 +1035,6 @@ export const CreateQuestionScreen: FC = () => {
             setOpenAlert(false);
           }}
           onConfirm={() => {
-            const isValidInput = handleSaveQuestion({
-              showToasts: false,
-            });
-
-            if (typeof isValidInput !== "boolean" || !isValidInput) {
-              setOpenAlert(false);
-              errorToast({
-                title: "Missing field",
-                message: "Please fill out all required fields",
-              });
-              return;
-            }
-
             resetQuestionImage();
             goBack();
           }}

From 0d42a06f57ba762fa9e83003efed9718ed130b72 Mon Sep 17 00:00:00 2001
From: hansgabriel <hansdaduya@yahoo.com>
Date: Mon, 11 Dec 2023 23:09:25 +0800
Subject: [PATCH 3/4] Fix flashlist warning

---
 apps/expo/src/forms/CreateTestForm/index.tsx | 32 +++++++++++---------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/expo/src/forms/CreateTestForm/index.tsx b/apps/expo/src/forms/CreateTestForm/index.tsx
index 8ce9359..521265d 100644
--- a/apps/expo/src/forms/CreateTestForm/index.tsx
+++ b/apps/expo/src/forms/CreateTestForm/index.tsx
@@ -651,20 +651,24 @@ const CreateTestForm: FC<Props> = ({
                   </View>
                 </View>
               ) : (
-                <FlashList
-                  estimatedItemSize={10}
-                  data={readyQuestions}
-                  showsVerticalScrollIndicator={true}
-                  renderItem={({ item: question, index }) => {
-                    return (
-                      <QuestionCard
-                        question={question}
-                        index={index}
-                        goToEditQuestion={goToEditQuestion}
-                      />
-                    );
-                  }}
-                />
+                <>
+                  {questions.length > 0 && (
+                    <FlashList
+                      estimatedItemSize={10}
+                      data={readyQuestions}
+                      showsVerticalScrollIndicator={true}
+                      renderItem={({ item: question, index }) => {
+                        return (
+                          <QuestionCard
+                            question={question}
+                            index={index}
+                            goToEditQuestion={goToEditQuestion}
+                          />
+                        );
+                      }}
+                    />
+                  )}
+                </>
               )}
             </SafeAreaView>
           </View>

From b4c313e109ded71d9e99c84b569dbb47614d71ec Mon Sep 17 00:00:00 2001
From: hansgabriel <hansdaduya@yahoo.com>
Date: Tue, 12 Dec 2023 01:07:50 +0800
Subject: [PATCH 4/4] Fix choice error outlines

---
 .../src/screens/create-question/ChoiceCard.tsx   | 16 ++++------------
 apps/expo/src/screens/create-question/index.tsx  |  6 ++++++
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/expo/src/screens/create-question/ChoiceCard.tsx b/apps/expo/src/screens/create-question/ChoiceCard.tsx
index c5d2b6d..ef7c20c 100644
--- a/apps/expo/src/screens/create-question/ChoiceCard.tsx
+++ b/apps/expo/src/screens/create-question/ChoiceCard.tsx
@@ -113,9 +113,7 @@ export const MultipleChoiceCard: FC<MultipleChoiceCardProps> = ({
         className={`flex h-36 w-36 flex-col flex-wrap items-center justify-evenly self-center rounded-2xl ${
           choice.styles
         } ${
-          errorState.choicesError[choice.id]?.length !== undefined
-            ? "border-2 border-red-500"
-            : ""
+          errorState.choicesError[choice.id]?.length !== undefined ? "" : ""
         } p-5`}
         onPress={handleOpenModal(choice.id)}
       >
@@ -219,9 +217,7 @@ export const TrueOrFalseCard: FC<TrueOrFalseCardProps> = ({
       className={`flex h-[220px] w-36 flex-col flex-wrap items-center justify-evenly self-center rounded-2xl ${
         choice.styles
       } ${
-        errorState.choicesError[choice.id]?.length !== undefined
-          ? "border-2 border-red-500"
-          : ""
+        errorState.choicesError[choice.id]?.length !== undefined ? "" : ""
       } p-5`}
       onPress={onPressCard}
     >
@@ -328,9 +324,7 @@ export const MultiSelectCard: FC<MultiSelectCardProps> = ({
         className={`flex h-16 w-[85vw] flex-col flex-wrap items-center justify-evenly self-center rounded-2xl ${
           choice.styles
         } ${
-          errorState.choicesError[choice.id]?.length !== undefined
-            ? "border-2 border-red-500"
-            : ""
+          errorState.choicesError[choice.id]?.length !== undefined ? "" : ""
         } p-5`}
         onPress={handleOpenModal(choice.id)}
       >
@@ -442,9 +436,7 @@ export const IdentificationCard: FC<IdentificationCardProps> = ({
         className={`flex h-16 w-[85vw] flex-col flex-wrap items-center justify-evenly self-center rounded-2xl ${
           choice.styles
         } ${
-          errorState.choicesError[choice.id]?.length !== undefined
-            ? "border-2 border-red-500"
-            : ""
+          errorState.choicesError[choice.id]?.length !== undefined ? "" : ""
         } p-5`}
         onPress={handleOpenModal(choice.id)}
       >
diff --git a/apps/expo/src/screens/create-question/index.tsx b/apps/expo/src/screens/create-question/index.tsx
index 7875e74..d69f398 100644
--- a/apps/expo/src/screens/create-question/index.tsx
+++ b/apps/expo/src/screens/create-question/index.tsx
@@ -202,6 +202,7 @@ export const CreateQuestionScreen: FC = () => {
       });
       return;
     }
+
     bottomSheetRef.current?.expand();
   };
 
@@ -548,6 +549,10 @@ export const CreateQuestionScreen: FC = () => {
   };
 
   const handleClickQuestion = (index: number) => () => {
+    if (index === selectedIndex) {
+      return;
+    }
+
     const isValidInput = handleSaveQuestion({
       showToasts: false,
     });
@@ -560,6 +565,7 @@ export const CreateQuestionScreen: FC = () => {
       return;
     }
 
+    resetErrors();
     setSelectedIndex(index);
     setSelectedQuestionId(index);
     setQuestionImage(questions[index]?.image ?? undefined);