Move language provider logic to LanguageContext

Author: benjaminaaron

src/App.js

@@ -14,21 +14,13 @@ import InfoScreenPrivacy from "./screens/info-screen/InfoScreenPrivacy";
 import OnboardingWelcomeTopics from "./screens/onboarding-welcome/OnboardingWelcomeTopics";
 import InfoScreenNewOrExistingUser from "./screens/info-screen/InfoScreenNewOrExistingUser";
 import ProfileScreen from "./screens/profile-screen/ProfileScreen";
-import {useState} from "react";
-import LanguageContext from './language/LanguageContext';
+import {LanguageProvider} from "./language/LanguageContext";
 
 const theme = createTheme({});
 
 const App = () => {
-    const [language, setLanguage] = useState(localStorage.getItem('language') || 'en');
-
-    const handleSetLanguage = (lang) => {
-        setLanguage(lang);
-        localStorage.setItem('language', lang);
-    };
-
     return (
-        <LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage }}>
+        <LanguageProvider>
             <ThemeProvider theme={theme}>
                 <ViewportUpdater/>
                 <Router basename={process.env.PUBLIC_URL}>
@@ -51,7 +43,7 @@ const App = () => {
                     </div>
                 </Router>
             </ThemeProvider>
-        </LanguageContext.Provider>
+        </LanguageProvider>
     );
 };
 

src/language/LanguageContext.js

@@ -1,8 +1,18 @@
-import {createContext} from 'react';
+import React, { createContext, useState } from 'react';
 
-const LanguageContext = createContext({
-    language: 'en',
-    setLanguage: (lang) => {},
-});
+export const LanguageContext = createContext();
 
-export default LanguageContext;
+export const LanguageProvider = ({ children }) => {
+    const [language, setLanguage] = useState(localStorage.getItem('language') || 'en');
+
+    const handleSetLanguage = (lang) => {
+        setLanguage(lang);
+        localStorage.setItem('language', lang);
+    };
+
+    return (
+        <LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage }}>
+            {children}
+        </LanguageContext.Provider>
+    );
+};

src/language/useTranslation.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import LanguageContext from './LanguageContext';
+import { LanguageContext } from './LanguageContext';
 import translations from './translations';
 
 function useTranslation() {

src/screens/landing-page/sections/header/views/HeaderBarDesktop.js

@@ -4,7 +4,7 @@ import HStack from "../../../../../components/HStack";
 import LandingPageWAppButton from "../../../components/LandingPageWAppButton";
 import NarBarLink from "../../../../../components/NavBarLink";
 import LandingPageHollowButton from "../../../components/LandingPageButton";
-import LanguageContext from "../../../../../language/LanguageContext";
+import { LanguageContext } from "../../../../../language/LanguageContext";
 import featureFlags from "../../../../../featureFlags";
 
 const HeaderBarDesktop = ({isApp}) => {