detect language added

AB10110F · Aug 15, 2023 · a8b38b2 · a8b38b2
1 parent 25adc9d
commit a8b38b2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/src/app/context/language.tsx b/src/app/context/language.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { createContext, useContext, useState, ReactNode } from "react";
+import { createContext, useContext, useState, ReactNode, useEffect } from "react";
 
 interface LanguageContextProviderProps 
 {
@@ -15,15 +15,33 @@ interface LanguageContextValue
 const LanguageContext = createContext<LanguageContextValue | undefined>(undefined);
 
 export const LanguageContextProvider = ({ children }: LanguageContextProviderProps) => {
-  const [language, setLanguage] = useState('Spanish');
-
-  console.log(navigator.language)
-
-  return (
-    <LanguageContext.Provider value={{ language, setLanguage }}>
-      {children}
-    </LanguageContext.Provider>
-  );
+
+    const detectLanguage = ():string => { //function used to execute useEffect before useState
+        if (navigator.language.includes('es')) 
+        {
+            return 'Spanish';
+        } 
+        else 
+        {
+            return 'English';
+        }
+    };
+
+    const startLanguage = detectLanguage();
+
+    useEffect(() => {
+        setLanguage(startLanguage);
+    }, []);
+
+    const [language, setLanguage] = useState(startLanguage);
+
+    console.log(navigator.language)
+
+    return (
+        <LanguageContext.Provider value={{ language, setLanguage }}>
+        {children}
+        </LanguageContext.Provider>
+    );
 };
 
 export const useLanguageContext = (): LanguageContextValue => {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, {use, useState} from 'react';
+import React, {useState} from 'react';
 import styles from '../css/page.module.css';
 import  Terminal  from '@/components/Terminal';
 import Typewriter from '@/components/Typewriter';

diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx
@@ -27,7 +27,7 @@ const Typewriter = () => {
 
     const changeState = (language:string) => {
         setLanguage(language);
-      };
+    };
       console.log(language) //TODO delete this line
 
     return (
@@ -37,19 +37,21 @@ const Typewriter = () => {
                     className={styles.checkbox}
                     type="radio"
                     name='language'
+                    checked={language=='English'}
                     onClick={() => changeState('English')}
                     />
-                <label style={vt323.style} htmlFor="">{l1}</label>
+                <label style={vt323.style} htmlFor="" >{l1}</label>
             </section>
             <section className={styles.section}>
                 <input
                     className={styles.checkbox}
                     type="radio"
                     id='language'
                     name='language'
+                    checked={language=='Spanish'}
                     onClick={() => changeState('Spanish')}
                 />
-                <label style={vt323.style} htmlFor="language" id='label'>{l2}</label>
+                <label style={vt323.style} htmlFor="" >{l2}</label>
             </section>
         </section>
     )

diff --git a/src/css/switch.module.css b/src/css/switch.module.css
@@ -2,8 +2,8 @@
 {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    justify-content: center;
     height: 100%;
     width: 30%;
     font-size: 3.2vh;
@@ -21,7 +21,6 @@
 {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
     height: 100%;
     width: 50%;
@@ -40,6 +39,7 @@
     -webkit-appearance: none;
     outline: none;
     cursor: pointer;
+    margin-right:10%;
 }
 
 .checkbox:checked {
@@ -56,18 +56,20 @@
     {
         width: 50%;
         font-size: 2vh;
+        justify-content: space-between;
     }
     .languageSwitchContainer
     {
         display: flex;
         flex-direction: row;
         height: 100%;
+        justify-content: center;
     }
     .section
     {
         width: 50%;
-        justify-content: space-around;
         font-size: 2vh;
+        justify-content: center;
     }
 }