Optional text field to add deck description

h16nning · Feb 6, 2024 · 86d9f5e · 86d9f5e
1 parent 5137d0f
commit 86d9f5e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/components/deck/DeckView.tsx b/src/components/deck/DeckView.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ActionIcon, Button, Group, Stack, Title } from "@mantine/core";
+import { ActionIcon, Button, Group, Stack, Title, Text } from "@mantine/core";
 import SubDeckSection from "./SubDeckSection";
 import { IconChevronLeft, IconPlus } from "@tabler/icons-react";
 import DeckMenu from "./DeckMenu";
@@ -77,7 +77,11 @@ function DeckView() {
         </Group>
 
         {deck && deck.description && (
-          <div dangerouslySetInnerHTML={{ __html: deck.description }} />
+          <Text
+            fz="sm"
+            c="dimmed"
+            dangerouslySetInnerHTML={{ __html: deck.description }}
+          ></Text>
         )}
         <Stack gap="xs" align="end">
           <Button

diff --git a/src/components/deck/NewDeckModal.tsx b/src/components/deck/NewDeckModal.tsx
@@ -12,13 +12,14 @@ function NewDeckModal({ opened, setOpened, superDeck }: NewDeckModalProps) {
   const navigate = useNavigate();
 
   const [nameValue, setNameValue] = useState<string>("");
+  const [descriptionValue, setDescriptionValue] = useState<string>("");
   const [addingDeck, setAddingDeck] = useState<boolean>(false);
   const [status, setStatus] = useState<string | null>(null);
 
   async function tryAddDeck() {
     setAddingDeck(true);
     try {
-      const id = await newDeck(nameValue, superDeck);
+      const id = await newDeck(nameValue, superDeck, descriptionValue);
       setNameValue("");
       setOpened(false);
       navigate("/deck/" + id);
@@ -27,6 +28,7 @@ function NewDeckModal({ opened, setOpened, superDeck }: NewDeckModalProps) {
     }
     setAddingDeck(false);
     setNameValue("");
+    setDescriptionValue("");
   }
 
   return (
@@ -44,6 +46,13 @@ function NewDeckModal({ opened, setOpened, superDeck }: NewDeckModalProps) {
           value={nameValue}
           onChange={(e) => setNameValue(e.currentTarget.value)}
         />
+        <TextInput
+          placeholder="Optional"
+          data-autofocus
+          label="Description"
+          value={descriptionValue}
+          onChange={(e) => setDescriptionValue(e.currentTarget.value)}
+        />
         {status ? <Text>{status}</Text> : <></>}
         <Group justify="flex-end">
           <Button

diff --git a/src/logic/CardTypeImplementations/ClozeCard.tsx b/src/logic/CardTypeImplementations/ClozeCard.tsx
@@ -73,15 +73,14 @@ function ClozeCardComponent({
       `<span class="cloze-field"/>`
     );
   }
-  //Use replacer function to strip all cloze tags from {{cn::Text}} to Text regardless of occlusion number using replacer function
   finalText = finalText.replace(/\{\{c\d::((?!\{\{|}}).)*\}\}/g, (match) =>
     match.slice(6, -2)
   );
   return (
     <Text
       dangerouslySetInnerHTML={{ __html: finalText }}
       className={classes.clozeCard}
-    ></Text>
+    />
   );
 }