adjust new vocabs pop up for situation where there are no more vocabs…

… in backlog
nora-kauczor · Nov 10, 2024 · 19cd69f · 19cd69f
1 parent cac8d50
commit 19cd69f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -277,6 +277,7 @@ function App() {
                                                     vocabs={vocabs}
                                                     finishedReviewing={vocabsToReview.length <
                                                         1}
+                                                    allVocabsActivated={getInactiveVocabs().length < 1}
                                                     setUseForm={setUseForm}
                                                     language={language}
                                                     setLanguage={setLanguage}

diff --git a/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.css b/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.css
@@ -1,7 +1,7 @@
 #new-vocabs-popup {
     width: 70%;
     max-width: 400px;
-    height: 60%;
+    height: auto;
     max-height: 600px;
     display: flex;
     flex-direction: column;

diff --git a/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.tsx b/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.tsx
@@ -9,6 +9,7 @@ type Props = {
     setUseForm: React.Dispatch<React.SetStateAction<boolean>>
     userId: string | undefined
     activateVocab: (id: string) => void
+    allVocabsActivated: boolean
 }
 
 export default function NewVocabsPopUp(props: Readonly<Props>) {
@@ -72,26 +73,28 @@ export default function NewVocabsPopUp(props: Readonly<Props>) {
             >Enter new
                 vocab
             </button>
-            <button className={"new-vocabs-button"}
-                    onClick={() => navigate("/backlog")}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') navigate(
-                            "/backlog");
-                    }}
-                    aria-label={"Pick from backlog"}
-            >Pick
-                from backlog
-            </button>
-            <button className={"new-vocabs-button"}
-                    onClick={activateAndGoToDisplayPageWithRandomVocab}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key ===
-                            ' ') activateAndGoToDisplayPageWithRandomVocab();
-                    }}
-                    aria-label={"Get random vocabulary"}
-            >Get random
-                vocab
-            </button>
+            {!props.allVocabsActivated &&
+                <button className={"new-vocabs-button"}
+                        onClick={() => navigate("/backlog")}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') navigate(
+                                "/backlog");
+                        }}
+                        aria-label={"Pick from backlog"}
+                >Pick
+                    from backlog
+                </button>}
+            {!props.allVocabsActivated &&
+                <button className={"new-vocabs-button"}
+                        onClick={activateAndGoToDisplayPageWithRandomVocab}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key ===
+                                ' ') activateAndGoToDisplayPageWithRandomVocab();
+                        }}
+                        aria-label={"Get random vocabulary"}
+                >Get random
+                    vocab
+                </button>}
         </div>
     </div>)
 }
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -8,6 +8,7 @@ import PickLanguagePopUp
 
 type Props = {
     finishedReviewing: boolean
+    allVocabsActivated: boolean
     setUseForm: React.Dispatch<React.SetStateAction<boolean>>
     language?: string
     vocabs: Vocab[]
@@ -30,7 +31,8 @@ export default function HomePage(props: Readonly<Props>) {
                     all of it. <br/><br/>To start learning
                     (more) words click below. </p>}
             {!props.finishedReviewing && props.language &&
-                <p className={"homepage-text"}>Nice to see you! <br/><br/>Click below
+                <p className={"homepage-text"}>Nice to see you! <br/><br/>Click
+                    below
                     to
                     get
                     started with your daily vocab
@@ -58,7 +60,8 @@ export default function HomePage(props: Readonly<Props>) {
                             vocabs={props.vocabs}
                             setUseForm={props.setUseForm}
                             setDisplayNewVocabsPopUp={props.setDisplayNewVocabsPopUp}
-                            activateVocab={props.activateVocab}/>}
+                            activateVocab={props.activateVocab}
+            allVocabsActivated={props.allVocabsActivated}/>}
         {!props.language && <div className={"overlay"}/>}
         {!props.language &&
             <PickLanguagePopUp setLanguage={props.setLanguage}/>}