write closeForm function in App.tsx and pass it to form

nora-kauczor · Nov 21, 2024 · 467bba2 · 467bba2
1 parent 817ceab
commit 467bba2
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 50 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -268,6 +268,11 @@ function App() {
         }
     }
 
+    function closeForm(){
+        setVocabToEdit(undefined)
+        setUseForm(false)
+    }
+
     function getInactiveVocabs() {
         return vocabs.filter(vocab => {
             if (!vocab.datesPerUser) {
@@ -294,12 +299,15 @@ function App() {
                 language={language}
                 setLanguage={setLanguage}/>
         {useForm && <div className={"overlay"}/>}
-        {useForm && <Form userId={userId} language={language}
+        {useForm && <Form userId={userId}
+                          language={language}
+                          vocabToEdit={vocabToEdit}
                           editVocab={editVocab}
                           editAndActivateVocab={editAndActivateVocab}
                           createVocab={createVocab}
                           createAndActivateVocab={createAndActivateVocab}
-                          vocabToEdit={vocabToEdit} setUseForm={setUseForm}/>}
+                          closeForm={closeForm}
+        />}
         {userId && <NavBar useForm={useForm} setUseForm={setUseForm}/>}
         <Routes>
             <Route path={"/login"}

diff --git a/frontend/src/components/CalendarDay/CalendarDay.tsx b/frontend/src/components/CalendarDay/CalendarDay.tsx
@@ -6,55 +6,53 @@ import './CalendarDay.css'
 import {GoDotFill} from "react-icons/go";
 import {FaPlus} from "react-icons/fa";
 
-
 type Props = {
     vocabIdsOfDate: VocabIdsOfDate | null
     openDayPopUpAndPassItVocabs: (vocabIdsOfDate: VocabIdsOfDate) => void
 }
 
 export default function CalendarDay(props: Readonly<Props>) {
+
     const displayDate: string = props.vocabIdsOfDate?.date?.substring(8, 10) +
         "." + props.vocabIdsOfDate?.date?.substring(5, 7) + "."
+    const numberOfVocabs = props.vocabIdsOfDate?.vocabIds ?
+        props.vocabIdsOfDate?.vocabIds?.length : 0;
 
-    return (<div id={"calendar-day-wrapper"} >
-            {props.vocabIdsOfDate && <button id={"calendar-day"}
-                                             disabled={props.vocabIdsOfDate?.vocabIds?.length >
-                                                 0}
-                                             className={props.vocabIdsOfDate?.vocabIds?.length >
-                                             0 ? '' : 'empty-day'}
-                                             onClick={() => props.vocabIdsOfDate &&
-                                                 props.openDayPopUpAndPassItVocabs(
-                                                     props.vocabIdsOfDate)}
-                                             aria-label={`Open details for ${displayDate}`}
-                                             aria-disabled={!props.vocabIdsOfDate}>
-                <p id={"calendar-date"}> {displayDate}</p>
-                <div id={"dot-container"}
-                     aria-hidden={!props.vocabIdsOfDate?.vocabIds?.length}>
-                    {props.vocabIdsOfDate?.vocabIds?.length > 0 ?
-                        <GoDotFill id={"dot-1"} className={"dot"}
-                                   aria-label={"1 vocab item available"}/> :
-                        <GoDotFill id={"invisible-dot"} className={"dot"}
-                                   aria-hidden={"true"}/>}
-                    {props.vocabIdsOfDate?.vocabIds?.length > 1 &&
-                        <GoDotFill id={"dot-2"}
-                                   className={"dot"}
-                                   aria-label={"2 vocab items available"}/>}
-                    {props.vocabIdsOfDate?.vocabIds?.length > 2 && <GoDotFill
-                        id={"dot-3"}
-                        className={"dot"}
-                        aria-label={"3 vocab items available"}/>}
-                    {props.vocabIdsOfDate?.vocabIds?.length > 3 && <GoDotFill
-                        id={"dot-4"}
-                        className={"dot"}
-                        aria-label={"4 vocab items available"}/>}
-                    {props.vocabIdsOfDate?.vocabIds?.length > 4 && <GoDotFill
-                        id={"dot-5"} className={"dot"}
-                        aria-label={"5 vocab items available"}/>}
-                    {props.vocabIdsOfDate?.vocabIds?.length > 5 &&
-                        <FaPlus id={"plus"} className={"dot"}
-                                aria-label={"More than 5 vocab items available"}/>}
-                </div>
-            </button>}
-        </div>)
+    return (<div id={"calendar-day-wrapper"}>
+        {props.vocabIdsOfDate && <button id={"calendar-day"}
+                                         disabled={numberOfVocabs < 1}
+                                         className={numberOfVocabs > 0 ? '' :
+                                             'empty-day'}
+                                         onClick={() => props.vocabIdsOfDate &&
+                                             props.openDayPopUpAndPassItVocabs(
+                                                 props.vocabIdsOfDate)}
+                                         aria-label={`Open details for ${displayDate}`}
+                                         aria-disabled={!props.vocabIdsOfDate}>
+            <p id={"calendar-date"}> {displayDate}</p>
+            <div id={"dot-container"}
+                 aria-hidden={!numberOfVocabs}>
+                {numberOfVocabs > 0 ? <GoDotFill id={"dot-1"} className={"dot"}
+                                                 aria-label={"1 vocab item available"}/> :
+                    <GoDotFill id={"invisible-dot"} className={"dot"}
+                               aria-hidden={"true"}/>}
+                {numberOfVocabs > 1 && <GoDotFill id={"dot-2"}
+                                                  className={"dot"}
+                                                  aria-label={"2 vocab items available"}/>}
+                {numberOfVocabs > 2 && <GoDotFill
+                    id={"dot-3"}
+                    className={"dot"}
+                    aria-label={"3 vocab items available"}/>}
+                {numberOfVocabs > 3 && <GoDotFill
+                    id={"dot-4"}
+                    className={"dot"}
+                    aria-label={"4 vocab items available"}/>}
+                {numberOfVocabs > 4 && <GoDotFill
+                    id={"dot-5"} className={"dot"}
+                    aria-label={"5 vocab items available"}/>}
+                {numberOfVocabs > 5 && <FaPlus id={"plus"} className={"dot"}
+                                               aria-label={"More than 5 vocab items available"}/>}
+            </div>
+        </button>}
+    </div>)
 }
 
diff --git a/frontend/src/components/Form/Form.tsx b/frontend/src/components/Form/Form.tsx
@@ -10,7 +10,7 @@ type Props = {
     editVocab: (vocab: Vocab) => void
     editAndActivateVocab: (vocab: Vocab) => void
     userId: string
-    setUseForm: React.Dispatch<React.SetStateAction<boolean>>
+    closeForm: () => void
 }
 
 export default function Form(props: Readonly<Props>) {
@@ -66,11 +66,15 @@ export default function Form(props: Readonly<Props>) {
         setInfoInput(value)
     }
 
+    const vocabIsAlreadyActive: undefined | boolean = props.vocabToEdit &&
+        props.vocabToEdit?.datesPerUser?.[props.userId] &&
+        props.vocabToEdit?.datesPerUser[props.userId].length > 0
+
     return (<div id={"form"} className={"pop-up"}
                  role={"dialog"} aria-labelledby={"form-title"}
                  aria-modal={"true"}>
         <button className={"close-button"}
-                onClick={() => props.setUseForm(false)}
+                onClick={props.closeForm}
                 aria-label={"Close form"}
         >✕
         </button>
@@ -102,10 +106,10 @@ export default function Form(props: Readonly<Props>) {
         <button className={"form-button"}
                 onClick={() => handleClick("submit")}>submit
         </button>
-        <button className={"form-button"}
-                                       onClick={() => handleClick(
-                                           "submit-and-activate")}
+        {!vocabIsAlreadyActive && <button className={"form-button"}
+                                          onClick={() => handleClick(
+                                              "submit-and-activate")}
         >submit and activate
-        </button>
+        </button>}
     </div>)
 }