Merge pull request #119 from ChangePlusPlusVandy/survey-bug-fixes

added submit survey safeguard and cleaned up create survey buttons

Author: yifeifang11

frontend/src/pages/Admin/ComponentPage/SurveyCard.tsx

@@ -138,14 +138,14 @@ export default function SurveyCard({
 								onClick={handleEditClick}
 							>
 								<Plus className="w-4 h-4" />
-								Create New Survey
+								Create Or Select Survey
 							</button>
-							<button
+							{/* <button
 								className="text-[#8757A3] border border-[#8757A3] py-2.5 px-4 rounded-md w-full transition hover:bg-[#8757A3] hover:text-white"
 								onClick={handleEditClick}
 							>
 								Use Existing Survey
-							</button>
+							</button> */}
 						</div>
 					</>
 				)}

frontend/src/pages/courseDetailPage/SurveyModal.tsx

@@ -20,6 +20,7 @@ export default function SurveyModal({
 	const [questionNumber, setQuestionNumber] = useState<number>(0);
 	const [surveyQuestions, setSurveyQuestions] = useState<any[]>([]);
 	const [responses, setResponses] = useState<{ [key: string]: string }>({});
+	const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
 	useEffect(() => {
 		if (!surveyId) return;
@@ -47,14 +48,19 @@ export default function SurveyModal({
 	};
 
 	async function handleNextQuestion() {
+		if (isSubmitting) return;
+
 		if (questionNumber < surveyQuestions.length - 1) {
 			setQuestionNumber(questionNumber + 1);
 		} else {
+			if (!isCurrentAnswered) return;
+
+			setIsSubmitting(true);
 			try {
 				const userId = JSON.parse(localStorage.user)._id;
 
 				// Create question responses
-				let responseIds = [];
+				const responseIds: string[] = [];
 				for (let id of Object.keys(responses)) {
 					const response = await apiClient.post("questionResponses", {
 						userId,
@@ -73,19 +79,17 @@ export default function SurveyModal({
 				});
 
 				// Update progress
-				await apiClient.put(
-					`/courses/${courseId}/progress/single/${userId}`,
-					{
-						surveyComplete: true,
-						webinarComplete: true,
-					}
-				);
+				await apiClient.put(`/courses/${courseId}/progress/single/${userId}`, {
+					surveyComplete: true,
+					webinarComplete: true,
+				});
 				setSurveyCompleted(true);
+				onClose();
 			} catch (error) {
 				console.error(error);
+			} finally {
+				setIsSubmitting(false);
 			}
-
-			onClose();
 		}
 	}
 
@@ -107,6 +111,7 @@ export default function SurveyModal({
 					onClick={onClose}
 					className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 text-2xl font-bold"
 					aria-label="Close"
+					disabled={isSubmitting}
 				>
 					&times;
 				</button>
@@ -128,20 +133,25 @@ export default function SurveyModal({
 				<button
 					onClick={handlePreviousQuestion}
 					className="mt-6 px-6 py-3 bg-orange-400 hover:bg-orange-500 text-white font-semibold rounded-lg transition-all disabled:bg-orange-200"
-					disabled={questionNumber === 0}
+					disabled={questionNumber === 0 || isSubmitting}
 				>
 					Previous
 				</button>
 
 				<button
 					onClick={handleNextQuestion}
 					className={`mt-6 px-6 py-3 text-white font-semibold rounded-lg transition-all ${
-						isCurrentAnswered
+						isCurrentAnswered && !isSubmitting
 							? "bg-orange-400 hover:bg-orange-500"
 							: "bg-orange-200 cursor-not-allowed"
 					}`}
+					disabled={!isCurrentAnswered || isSubmitting}
 				>
-					{questionNumber < surveyQuestions.length - 1 ? "Next" : "Finish"}
+					{isSubmitting
+						? "Submitting..."
+						: questionNumber < surveyQuestions.length - 1
+							? "Next"
+							: "Finish"}
 				</button>
 			</div>
 		</div>