feat: disable dnd on completed quiz

Selleo · Nov 5, 2024 · e3f6e3b · e3f6e3b
1 parent b9b057c
commit e3f6e3b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/apps/web/app/modules/Courses/Lesson/LessonItems/FillInTheBlanks/dnd/DraggableWord.tsx b/apps/web/app/modules/Courses/Lesson/LessonItems/FillInTheBlanks/dnd/DraggableWord.tsx
@@ -19,7 +19,7 @@ export const DraggableWord = ({
   isStudentAnswer,
 }: DraggableWordProps) => {
   const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useSortable({ id: word.id });
+    useSortable({ id: word.id, disabled: isQuiz && !!isStudentAnswer });
 
   const wordStyle = {
     transform: CSS.Transform?.toString(transform),
@@ -43,7 +43,7 @@ export const DraggableWord = ({
         !isDragging
           ? quizWordStyle
           : "px-2 py-1 bg-gray-100 text-neutral-700 rounded-md blur-[0.3px]",
-        { "-rotate-[6deg] w-min": isOverlay },
+        { "-rotate-[6deg] w-min": isOverlay }
       )}
     >
       {word?.studentAnswerText ? word?.studentAnswerText : word.value}

diff --git a/apps/web/app/modules/Courses/Lesson/LessonItems/FillInTheBlanks/dnd/FillInTheBlanksDnd.tsx b/apps/web/app/modules/Courses/Lesson/LessonItems/FillInTheBlanks/dnd/FillInTheBlanksDnd.tsx
@@ -23,7 +23,7 @@ type FillInTheBlanksDndProps = {
   questionLabel: string;
   content: string;
   sendAnswer: (
-    selectedOption: { value: string; index: number }[],
+    selectedOption: { value: string; index: number }[]
   ) => Promise<void>;
   answers: DndWord[];
   isQuizSubmitted?: boolean;
@@ -42,10 +42,19 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
     useState<DndWord | null>(null);
 
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: isQuiz && isQuizSubmitted ? Infinity : 0,
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    }),
+      keyboardCodes: {
+        start: isQuiz && isQuizSubmitted ? [] : ["Space"],
+        cancel: ["Escape"],
+        end: ["Space"],
+      },
+    })
   );
 
   useEffect(() => {
@@ -56,6 +65,8 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
   const maxAnswersAmount = content.match(/\[word]/g)?.length ?? 0;
 
   const handleDragStart = (event: DragStartEvent) => {
+    if (isQuiz && isQuizSubmitted) return;
+
     const { active } = event;
     const { id: activeId } = active;
 
@@ -67,6 +78,8 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
   };
 
   const handleDragOver = (event: DragOverEvent) => {
+    if (isQuiz && isQuizSubmitted) return;
+
     const { active, over } = event;
     const { id: activeId } = active;
     const { id: overId } = over || {};
@@ -80,7 +93,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
 
     setWords((prev) => {
       const activeWords = prev.filter(
-        ({ blankId }) => blankId === activeBlankId,
+        ({ blankId }) => blankId === activeBlankId
       );
       const activeWord = activeWords.find(({ id }) => id === activeId);
       const updatedWord = prev.find(({ id }) => id === activeWord?.id);
@@ -110,7 +123,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
 
     setWords((prev) => {
       const activeWords = prev.filter(
-        ({ blankId }) => blankId === activeBlankId,
+        ({ blankId }) => blankId === activeBlankId
       );
 
       const overWords = prev.filter(({ blankId }) => blankId === overBlankId);
@@ -125,7 +138,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
           ...arrayMove(
             overWords,
             activeWords.indexOf(activeWord),
-            overWord ? overWords.indexOf(overWord) : 0,
+            overWord ? overWords.indexOf(overWord) : 0
           ),
           ...prev,
         ]),
@@ -151,7 +164,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
             ...arrayMove(
               wordsWithUpdatedBlankId,
               activeWords.indexOf(firstWord),
-              overWord ? wordsWithUpdatedBlankId.indexOf(secondWord) : 0,
+              overWord ? wordsWithUpdatedBlankId.indexOf(secondWord) : 0
             ),
             ...prev,
           ]),
@@ -162,7 +175,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
           .map((item) => {
             const newIndex = parseInt(
               item.blankId.match(/\d+$/)?.[0] ?? "0",
-              10,
+              10
             );
             return {
               ...item,
@@ -213,7 +226,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
   }
 
   const wordBankWords = words.filter(
-    ({ blankId }) => blankId === "blank_preset",
+    ({ blankId }) => blankId === "blank_preset"
   );
 
   return (
@@ -242,7 +255,7 @@ export const FillInTheBlanksDnd: FC<FillInTheBlanksDndProps> = ({
             const blankId = `blank_${index}`;
 
             const wordsInBlank = words.filter(
-              (word) => word.blankId === blankId,
+              (word) => word.blankId === blankId
             );
 
             return (