Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TES-281: Refactor Create Question Screen #250

Merged
merged 4 commits into from
Dec 11, 2023
Merged

TES-281: Refactor Create Question Screen #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d403f1c
Add question saving when changing views
HansGabriel Dec 10, 2023
159a376
Fix requested changes
HansGabriel Dec 11, 2023
0d42a06
Fix flashlist warning
HansGabriel Dec 11, 2023
b4c313e
Fix choice error outlines
HansGabriel Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 49 additions & 44 deletions apps/expo/src/forms/CreateTestForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,43 +613,46 @@ 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})

<View className="mb-10 h-full flex-1 flex-col">
{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>
<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>
<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>
<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>
) : (
<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>
) : (
<>
{questions.length > 0 && (
<FlashList
estimatedItemSize={10}
data={readyQuestions}
Expand All @@ -665,10 +668,10 @@ const CreateTestForm: FC<Props> = ({
}}
/>
)}
</SafeAreaView>
</View>
</>
)}
</>
)}
</SafeAreaView>
</View>

<View className="mb-24 flex flex-row items-center justify-between">
<TouchableOpacity
Expand Down Expand Up @@ -790,19 +793,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>
);
Expand Down
16 changes: 4 additions & 12 deletions apps/expo/src/screens/create-question/ChoiceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
>
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -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)}
>
Expand Down Expand Up @@ -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)}
>
Expand Down
57 changes: 45 additions & 12 deletions apps/expo/src/screens/create-question/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,18 @@ 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();
};

Expand Down Expand Up @@ -406,7 +417,11 @@ export const CreateQuestionScreen: FC = () => {

const selectedImage = getSelectedImage();

const handleSaveQuestion = () => {
const handleSaveQuestion = ({
showToasts = true,
}: {
showToasts?: boolean;
} = {}) => {
if (!questionType) return false;
resetErrors();
const errors = checkErrors({
Expand Down Expand Up @@ -462,10 +477,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;
};

Expand Down Expand Up @@ -532,6 +549,23 @@ export const CreateQuestionScreen: FC = () => {
};

const handleClickQuestion = (index: number) => () => {
if (index === selectedIndex) {
return;
}

const isValidInput = handleSaveQuestion({
showToasts: false,
});

if (typeof isValidInput !== "boolean" || !isValidInput) {
errorToast({
title: "Missing field",
message: "Please fill out all required fields",
});
return;
}

resetErrors();
setSelectedIndex(index);
setSelectedQuestionId(index);
setQuestionImage(questions[index]?.image ?? undefined);
Expand Down Expand Up @@ -849,7 +883,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}
Expand All @@ -860,9 +894,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}

Expand Down Expand Up @@ -996,9 +1030,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}
Expand All @@ -1007,7 +1041,6 @@ export const CreateQuestionScreen: FC = () => {
setOpenAlert(false);
}}
onConfirm={() => {
handleSaveQuestion();
resetQuestionImage();
goBack();
}}
Expand Down
4 changes: 2 additions & 2 deletions apps/expo/src/screens/edit-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -179,7 +179,7 @@ export const EditTestScreen: FC<RootStackScreenProps<"EditTest">> = ({
onSubmit={submitTestDetails}
isCreatingQuiz={isEditingTest}
isUploading={isUploading}
isLoading={isLoading}
isLoading={isFetching}
/>
</View>
</SafeAreaView>
Expand Down
Loading