fix(client): added validation logic to flashcards

EchoSkorJjj · Apr 18, 2024 · 1e19a6c · 1e19a6c
1 parent d321aa6
commit 1e19a6c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 21 deletions.
diff --git a/client/src/pages/notes/GeneratedContent.tsx b/client/src/pages/notes/GeneratedContent.tsx
@@ -521,8 +521,8 @@ const GeneratedContent: React.FC = () => {
                       id,
                       "mcq",
                       newData,
-                      authorization,
-                    );
+                    authorization,
+                  );
                   }}
                 />
               </div>
@@ -531,7 +531,7 @@ const GeneratedContent: React.FC = () => {
         )}
         <Button
           m={10}
-          bg="blue"
+          bg="darkBlue.500"
           color="white"
           width="100%"
           size="lg"
@@ -545,7 +545,7 @@ const GeneratedContent: React.FC = () => {
       <Container maxW="6xl" mb={10}>
         <Flex justifyContent="flex-end">
           <Button
-            bg="blue"
+            bg="darkBlue.500"
             color="white"
             onClick={handleCommitTemporaryContents}
             isDisabled={isLoading}

diff --git a/client/src/pages/notes/components/PreFlashcard.tsx b/client/src/pages/notes/components/PreFlashcard.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Box, Button, Flex, Spacer } from "@chakra-ui/react";
+import React, { useState } from 'react';
+import { Box, Button, Flex, Spacer, useToast } from '@chakra-ui/react';
 
 interface GPTContent {
   id: string;
@@ -12,7 +12,7 @@ interface PreFlashcardProps {
   onDelete: (id: string) => void;
   onUpdate?: (
     id: string,
-    updatedContent: { question: string; answer: string },
+    updatedContent: { question: string; answer: string }
   ) => void;
 }
 
@@ -21,26 +21,62 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
   onDelete,
   onUpdate,
 }) => {
-  // Local state to track edits
   const [editQuestion, setEditQuestion] = useState(GPTContent.question);
   const [editAnswer, setEditAnswer] = useState(GPTContent.answer);
   const [pressState, setPressState] = useState(false);
+  const toast = useToast();
 
-  // Adjust handleContentEdit to immediately call onUpdate
   const handleContentEdit = (content: string, type: string) => {
     if (type === "question") {
-      setEditQuestion(content); // Update local state
+      setEditQuestion(content);
     } else if (type === "answer") {
-      setEditAnswer(content); // Update local state
+      setEditAnswer(content);
     }
   };
 
+  const validateAndEditContent = () => {
+    if (!editQuestion.trim() || !editAnswer.trim()) {
+      toast({
+        title: 'Error',
+        description: 'Question and answer cannot be empty or just spaces.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    if (editQuestion.trim().split(/\s+/).length > 300) {
+      toast({
+        title: 'Error',
+        description: 'Question cannot exceed 300 words.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    if (editAnswer.trim().split(/\s+/).length > 600) {
+      toast({
+        title: 'Error',
+        description: 'Answer cannot exceed 600 words.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    onUpdate?.(GPTContent.id, { question: editQuestion.trim(), answer: editAnswer.trim() });
+    setPressState(false);
+  };
+
   const handleOnClick = () => {
-    if (pressState == false) {
+    if (!pressState) {
       setPressState(true);
     } else {
-      setPressState(false);
-      onUpdate?.(GPTContent.id, { question: editQuestion, answer: editAnswer });
+      validateAndEditContent();
     }
   };
 
@@ -54,7 +90,7 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
             <Button
               colorScheme="gray"
               variant={pressState ? "solid" : "ghost"}
-              onClick={handleOnClick} // Removed the arrow function
+              onClick={handleOnClick}
               mr={5}
             >
               {pressState ? "Confirm your changes" : "Edit this flashcard"}
@@ -75,26 +111,27 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
             rounded="lg"
             border="1px"
             borderColor="gray.200"
-            contentEditable={pressState} // Only allow editing when pressState is true
+            contentEditable={pressState}
             suppressContentEditableWarning
             onBlur={(event: any) =>
               handleContentEdit(event.target.innerText, "question")
             }
+            style={{ pointerEvents: pressState ? "auto" : "none" }}
           >
-            {/* Display edited question if available, otherwise display original question */}
-            {editQuestion !== undefined ? editQuestion : GPTContent.question}
+            {editQuestion}
           </Box>
           <Box height="4"></Box>
           <Box
             p={4}
             rounded="lg"
             border="1px"
             borderColor="gray.200"
-            contentEditable={pressState} // Only allow editing when pressState is true
+            contentEditable={pressState}
             suppressContentEditableWarning
             onBlur={(event: any) =>
               handleContentEdit(event.target.innerText, "answer")
             }
+            style={{ pointerEvents: pressState ? "auto" : "none" }}
           >
             {editAnswer}
           </Box>

diff --git a/client/src/pages/notes/components/PreMCQ.tsx b/client/src/pages/notes/components/PreMCQ.tsx
@@ -45,7 +45,7 @@ const PreMCQ: React.FC<PreMCQProps> = ({
   };
 
   const handleOnClick = () => {
-    if (pressState == false) {
+    if (!pressState) {
       setPressState(true);
     } else {
       setPressState(false);
@@ -71,7 +71,7 @@ const PreMCQ: React.FC<PreMCQProps> = ({
         </Button>
       </Flex>
 
-      <Box bg="midBlue.500" w="100%" p={20} color="white" rounded="lg">
+      <Box bg="Blue.500" w="100%" p={20} color="white" rounded="lg">
         <Box
           p={4}
           mb={4}
@@ -81,6 +81,7 @@ const PreMCQ: React.FC<PreMCQProps> = ({
           border="1px"
           borderColor="gray.200"
           onBlur={(event: any) => handleQuestionEdit(event.target.innerText)}
+          style={{ pointerEvents: pressState ? 'auto' : 'none' }}
         >
           {editQuestion}
         </Box>
@@ -109,6 +110,7 @@ const PreMCQ: React.FC<PreMCQProps> = ({
               onBlur={(event: any) =>
                 handleOptionTextChange(index, event.target.innerText)
               }
+              style={{ pointerEvents: pressState ? 'auto' : 'none' }}
             >
               {opt.option}
             </Box>