error handling

uwblueprint · Feb 24, 2023 · 14b7350 · 14b7350
1 parent 272cef7
commit 14b7350
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/frontend/src/components/question-creation/QuestionElement.tsx b/frontend/src/components/question-creation/QuestionElement.tsx
@@ -1,24 +1,29 @@
 import React from "react";
-import { HStack, Box } from "@chakra-ui/react";
+import { Text, HStack, Box } from "@chakra-ui/react";
 import { DeleteOutlineIcon, HamburgerMenuIcon } from "../../assets/icons";
 
 export interface QuestionElementProps {
   children: React.ReactNode;
+  error?: string;
 }
 
 const QuestionElement = ({
   children,
+  error,
 }: QuestionElementProps): React.ReactElement => {
   return (
-    <HStack spacing="6" fontSize="24px">
-      <Box color="grey.300">
-        <HamburgerMenuIcon />
-      </Box>
-      {children}
-      <Box color="grey.300" fontSize="24px">
-        <DeleteOutlineIcon />
-      </Box>
-    </HStack>
+    <>
+      <HStack spacing="6" fontSize="24px">
+        <Box color="grey.300">
+          <HamburgerMenuIcon />
+        </Box>
+        {children}
+        <Box color="grey.300" fontSize="24px">
+          <DeleteOutlineIcon />
+        </Box>
+      </HStack>
+      {error && <Text color="red.200">{error}</Text>}
+    </>
   );
 };
 

diff --git a/frontend/src/components/question-creation/question-elements/TextElement.tsx b/frontend/src/components/question-creation/question-elements/TextElement.tsx
@@ -5,22 +5,25 @@ import QuestionElement from "../QuestionElement";
 
 const TextElement = (): React.ReactElement => {
   const [text, setText] = useState("");
+  const error = "There is a limit of 800 characters in the text block.";
 
   return (
-    <QuestionElement>
-      <Textarea
-        maxLength={800}
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        placeholder="This is a text component which can be added for any additional information."
-        variant="unstyled"
-        minH="unset"
-        overflow="hidden"
-        resize="none"
-        minRows={1}
-        as={ResizeTextarea}
-      />
-    </QuestionElement>
+    <>
+      <QuestionElement error={text.length > 800 ? error : ""}>
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="This is a text component which can be added for any additional information."
+          maxLength={801}
+          variant="unstyled"
+          minH="unset"
+          overflow="hidden"
+          resize="none"
+          minRows={1}
+          as={ResizeTextarea}
+        />
+      </QuestionElement>
+    </>
   );
 };