Merge pull request #37 from nora-kauczor/pick-language

Pick language

frontend/src/App.tsx

@@ -22,7 +22,7 @@ function App() {
     const [useForm, setUseForm] = useState<boolean>(false)
     const [userName, setUserName] = useState<string>("")
     const [language, setLanguage] = useLocalStorageState("language",
-        {defaultValue: "Spanish"});
+        {defaultValue: ""});
     const [vocabsLeftToReview, setVocabsLeftToReview] = useLocalStorageState<Vocab[]>(
         "vocabsLeftToReview", {defaultValue: []})
     const [todaysVocabs, setTodaysVocabs] = useLocalStorageState<Vocab[]>(
@@ -44,9 +44,10 @@ function App() {
     }
 
     useEffect(() => {
-
         getUserName()
-        getAllVocabsOfLanguage()
+        if (language) {
+            getAllVocabsOfLanguage()
+        }
     }, []);
 
     useEffect(() => {
@@ -165,6 +166,7 @@ function App() {
         return (
             <div id={"app"}>
             <Header userName={userName} logout={logout}
+                    language={language}
                     setLanguage={setLanguage}/>
             <div style={{height: "60px"}}/>
             {useForm && <Form userName={userName} language={language} editVocab={editVocab} createVocab={createVocab} vocabToEdit={vocabToEdit}/>}
@@ -180,7 +182,8 @@ function App() {
                                vocabs={vocabs}
                                finishedReviewing={vocabsLeftToReview.length < 1}
                                setUseForm={setUseForm}
-                               language={language}/>}/>
+                               language={language}
+                           setLanguage={setLanguage} />}/>
                     <Route path={"/calendar"} element={<CalendarPage
                         openForm={openForm}
                         vocabs={vocabs}

frontend/src/components/Header/Header.tsx

@@ -1,33 +1,25 @@
 import './Header.css'
-import React from "react";
 
 type Props = {
     userName: string
     logout: () => void
+    language: string
     setLanguage: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export default function Header(props: Readonly<Props>) {
 
-    function selectLanguage(language: string): void {
-        props.setLanguage(language)
+    function handleChange(event: React.ChangeEvent<HTMLSelectElement>){
+        props.setLanguage(event.target.value)
     }
 
     return (<div id={"header"}>
         <p id={"app-name"}>Wordio</p>
-        {props.userName &&<select id={"select-language"}>
-            <option value="" disabled>Choose
-                language
-            </option>
-            <option
-                onClick={() => selectLanguage("Spanish")}
-                onKeyDown={() => selectLanguage("Spanish")}>🇪🇸
-                Spanish
-            </option>
-            <option   onClick={() => selectLanguage("French")}
-                      onKeyDown={() => selectLanguage("French")}>🇫🇷 French</option>
-            <option   onClick={() => selectLanguage("Italian")}
-                      onKeyDown={() => selectLanguage("Italian")}>🇮🇹 Italian</option>
+        {props.userName && props.language &&
+            <select id={"select-language"} value={props.language} onChange={handleChange}>
+            <option value={"Spanish"}>🇪🇸 Spanish</option>
+            <option value={"French"}>🇫🇷 French</option>
+            <option value={"Italian"}>🇮🇹 Italian</option>
         </select>}
 
         {props.userName && <button id={"logout-button"}

frontend/src/components/PickLanguagePopUp/PickLanguagePopUp.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import './PickLanguagePopUp.css'
+type Props = {
+    setLanguage: React.Dispatch<React.SetStateAction<string>>
+}
+export default function PickLanguagePopUp(props: Readonly<Props>) {
+    return (<div id={"language-pop-up"}><p>Pick a language to start learning</p>
+        <article>
+            <button
+                onClick={() => props.setLanguage("Spanish")}
+                onKeyDown={() => props.setLanguage("Spanish")}>🇪🇸
+                Spanish
+            </button>
+            <button onClick={() => props.setLanguage("French")}
+                    onKeyDown={() => props.setLanguage("French")}>🇫🇷 French
+            </button>
+            <button onClick={() => props.setLanguage("Italian")}
+                    onKeyDown={() => props.setLanguage("Italian")}>🇮🇹 Italian
+            </button>
+        </article>
+    </div>)
+}

frontend/src/pages/HomePage/HomePage.tsx

@@ -1,48 +1,50 @@
 import './HomePage.css'
-import NewVocabsPopUp
-    from "../../components/NewVocabsPopUp/NewVocabsPopUp.tsx";
+import NewVocabsPopUp from "../../components/NewVocabsPopUp/NewVocabsPopUp.tsx";
 import {useNavigate} from "react-router-dom";
 import React, {useState} from "react";
 import {Vocab} from "../../types/Vocab.ts";
+import PickLanguagePopUp
+    from "../../components/PickLanguagePopUp/PickLanguagePopUp.tsx";
 
 type Props = {
     finishedReviewing: boolean
     setUseForm: React.Dispatch<React.SetStateAction<boolean>>
-    language: string
+    language?: string
     vocabs: Vocab[]
+    setLanguage: React.Dispatch<React.SetStateAction<string>>
 }
 export default function HomePage(props: Readonly<Props>) {
     const [showPopUp, setShowPopUp] = useState(false)
     const navigate = useNavigate()
 
-    return (
-        <div id={"homepage"}>
-            <article id={"homepage-text-and-button"}>
-                {props.finishedReviewing ?
-                    <p>You've got no vocabulary scheduled
-                        for today or you've already reviewed
-                        all of it. To start learning
-                        (more) words click below </p> : <p>
-                        Nice to see you! Click below to get
-                        started with your daily vocab
-                        review</p>}
-                {props.finishedReviewing ?
-                    <button
-                        onClick={() => setShowPopUp(true)}
-                        onKeyDown={() => setShowPopUp(true)}>
-                        New vocabulary</button>
-                    :
-                    <button
-                        onClick={() => navigate("/review")}
-                        onKeyDown={() => navigate("/review")}>Review
-                    </button>
-                }
-            </article>
-            {
-                showPopUp && props.vocabs && <NewVocabsPopUp
-                    vocabs={props.vocabs}
-                    setUseForm={props.setUseForm}
-                    setShowPopUp={setShowPopUp}/>}
-        </div>
-    )
+    return (<div id={"homepage"}>
+        <article id={"homepage-text-and-button"}>
+            {props.finishedReviewing && props.language &&
+                <p>You've got no vocabulary scheduled
+                    for today or you've already reviewed
+                    all of it. To start learning
+                    (more) words click below </p>}
+
+            {!props.finishedReviewing && props.language &&
+                <p>Nice to see you! Click below to get
+                    started with your daily vocab
+                    review</p>}
+            {props.finishedReviewing && props.language && <button
+                onClick={() => setShowPopUp(true)}
+                onKeyDown={() => setShowPopUp(true)}>
+                New vocabulary</button>}
+            {!props.finishedReviewing && props.language &&
+                <button
+                onClick={() => navigate("/review")}
+                onKeyDown={() => navigate("/review")}>Review
+            </button>}
+        </article>
+        {showPopUp && props.vocabs && <NewVocabsPopUp
+            vocabs={props.vocabs}
+            setUseForm={props.setUseForm}
+            setShowPopUp={setShowPopUp}/>}
+        {!props.language &&
+            <PickLanguagePopUp setLanguage={props.setLanguage}/>}
+
+    </div>)
 }