fix(client): fixed the ui for flashcard and MCQ at the generation page

EchoSkorJjj · Apr 18, 2024 · 19f199a · 19f199a
1 parent 2821283
commit 19f199a
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 247 deletions.
diff --git a/client/src/pages/notes/GeneratedContent.tsx b/client/src/pages/notes/GeneratedContent.tsx
@@ -160,33 +160,31 @@ const GeneratedContent: React.FC = () => {
     if (!noteId || !authorization || !contentId) {
       return;
     }
-    if(type === "flashcard") {
+    if (type === "flashcard") {
       // if gtpcontent.length is 1 do not let it delete anymore
       if (GPTContent.length === 1) {
-      // create toast
-      toast({
-        title: "Cannot delete last flashcard",
-        status: "error",
-        position: "top",
-        duration: 3000,
-      });
+        // create toast
+        toast({
+          title: "Cannot delete last flashcard",
+          status: "error",
+          position: "top",
+          duration: 3000,
+        });
         return;
       }
-
     }
-    if(type === "mcq") {
+    if (type === "mcq") {
       // if gtpcontent.length is 1 do not let it delete anymore
       if (GPTContent.length === 1) {
-      // create toast
-      toast({
-        title: "Cannot delete last MCQ",
-        status: "error",
-        position: "top",
-        duration: 3000,
-      });
+        // create toast
+        toast({
+          title: "Cannot delete last MCQ",
+          status: "error",
+          position: "top",
+          duration: 3000,
+        });
         return;
       }
-
     }
     const response = await deleteTemporaryContent(
       noteId,
@@ -277,38 +275,6 @@ const GeneratedContent: React.FC = () => {
     if (!noteId || !authorization) {
       return;
     }
-    if (title.trim() === "") {
-      toast({
-        title: "Error",
-        description: "You must enter a title before adding new content.",
-        status: "error",
-        duration: 3000,
-        isClosable: true,
-      });
-      return;
-    }
-    // if there is no flash card or no mcq throw error
-    if (GPTContent.length === 0 && MCQs.length === 0) {
-      toast({
-        title: "Error",
-        description: "You must have at least one content.",
-        status: "error",
-        duration: 3000,
-        isClosable: true,
-      });
-      return;
-    }
-
-    if (!selectedTopic) {
-      toast({
-        title: "Error",
-        description: "You must select a topic before adding new content.",
-        status: "error",
-        duration: 3000,
-        isClosable: true,
-      });
-      return;
-    }
 
     if (type === "flashcard") {
       const newFlashcard = {
@@ -383,6 +349,38 @@ const GeneratedContent: React.FC = () => {
     if (!noteId || !authorization) {
       return;
     }
+    if (title.trim() === "") {
+      toast({
+        title: "Error",
+        description: "You must enter a title before adding new content.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
+    // if there is no flash card or no mcq throw error
+    if (GPTContent.length === 0 && MCQs.length === 0) {
+      toast({
+        title: "Error",
+        description: "You must have at least one content.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    if (!selectedTopic) {
+      toast({
+        title: "Error",
+        description: "You must select a topic before adding new content.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
 
     const response = await commitTemporaryContents(
       noteId,
@@ -460,7 +458,7 @@ const GeneratedContent: React.FC = () => {
               borderColor="gray.200"
             >
               {/* title if its not empty string other wise "placeholder" */}
-              {title? title : "Enter a title"}
+              {title ? title : "Enter a title"}
             </Box>
           </Box>
 

diff --git a/client/src/pages/notes/components/PreFlashcard.tsx b/client/src/pages/notes/components/PreFlashcard.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Box, Button, Flex, Spacer, useToast } from "@chakra-ui/react";
+import { Box,  Flex, Spacer, useToast, Text, useColorModeValue, Tooltip, IconButton } from "@chakra-ui/react";
+import { EditIcon, DeleteIcon, CheckIcon } from '@chakra-ui/icons';
 
 interface GPTContent {
   id: string;
@@ -26,6 +27,8 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
   const [pressState, setPressState] = useState(false);
   const toast = useToast();
 
+  const bg = useColorModeValue("gray.50", "gray.700");
+
   const handleContentEdit = (content: string, type: string) => {
     if (type === "question") {
       setEditQuestion(content);
@@ -84,60 +87,62 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
   };
 
   return (
-    <Box width="100%">
-      <Box>
-        <Box py={4}>
-          <Flex>
-            <Box p={4}>Flashcard {GPTContent.id}</Box>
-            <Spacer />
-            <Button
-              colorScheme="gray"
-              variant={pressState ? "solid" : "ghost"}
-              onClick={handleOnClick}
-              mr={5}
-            >
-              {pressState ? "Confirm your changes" : "Edit this flashcard"}
-            </Button>
-            <Button
-              colorScheme="red"
-              variant="ghost"
-              onClick={() => onDelete(GPTContent.id)}
-            >
-              Delete this flashcard
-            </Button>
-          </Flex>
+    <Box width="100%" p={4} bg={bg} boxShadow="md" rounded="lg" mb={3}>
+      <Flex align="center">
+        <Text fontSize="md" fontWeight="bold" flex="1">Flashcard {GPTContent.id}</Text>
+        <Spacer />
+        <Tooltip label={pressState ? "Confirm Changes" : "Edit Flashcard"}>
+          <IconButton
+            aria-label="Edit Flashcard"
+            icon={pressState ? <CheckIcon /> : <EditIcon />}
+            onClick={handleOnClick}
+            colorScheme={pressState ? "green" : "blue"}
+            mr={2}
+          />
+        </Tooltip>
+        <Tooltip label="Delete Flashcard">
+          <IconButton
+            aria-label="Delete Flashcard"
+            icon={<DeleteIcon />}
+            onClick={() => onDelete(GPTContent.id)}
+            colorScheme="red"
+          />
+        </Tooltip>
+      </Flex>
+      <Box mt={4} p={4} bg="white" rounded="lg">
+        <Text mb={2} fontSize="md" fontWeight="semibold" color="blue.600">Question:</Text>
+        <Box
+          p={3}
+          bg="gray.100"
+          rounded="md"
+          border="1px"
+          borderColor="gray.200"
+          contentEditable={pressState}
+          suppressContentEditableWarning
+          onBlur={(event: any) =>
+            handleContentEdit(event.target.innerText, "question")
+          }
+          style={{ minHeight: '60px', cursor: pressState ? 'text' : 'default' }}
+        >
+          {editQuestion}
         </Box>
-
-        <Box bg="midBlue.500" width="100%" p={20} color="white" rounded="lg">
-          <Box
-            p={4}
-            rounded="lg"
-            border="1px"
-            borderColor="gray.200"
-            contentEditable={pressState}
-            suppressContentEditableWarning
-            onBlur={(event: any) =>
-              handleContentEdit(event.target.innerText, "question")
-            }
-            style={{ pointerEvents: pressState ? "auto" : "none" }}
-          >
-            {editQuestion}
-          </Box>
-          <Box height="4"></Box>
-          <Box
-            p={4}
-            rounded="lg"
-            border="1px"
-            borderColor="gray.200"
-            contentEditable={pressState}
-            suppressContentEditableWarning
-            onBlur={(event: any) =>
-              handleContentEdit(event.target.innerText, "answer")
-            }
-            style={{ pointerEvents: pressState ? "auto" : "none" }}
-          >
-            {editAnswer}
-          </Box>
+      </Box>
+      <Box mt={4} p={4} bg="white" rounded="lg">
+        <Text mb={2} fontSize="md" fontWeight="semibold" color="green.600">Answer:</Text>
+        <Box
+          p={3}
+          bg="gray.100"
+          rounded="md"
+          border="1px"
+          borderColor="gray.200"
+          contentEditable={pressState}
+          suppressContentEditableWarning
+          onBlur={(event: any) =>
+            handleContentEdit(event.target.innerText, "answer")
+          }
+          style={{ minHeight: '60px', cursor: pressState ? 'text' : 'default' }}
+        >
+          {editAnswer}
         </Box>
       </Box>
     </Box>