Merge pull request #174 from PedroMarianoAlmeida/persist-preferredLanguage

persist-preferredLanguage

Author: DavidHDev

src/App.jsx

@@ -1,5 +1,6 @@
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'
 import { SearchProvider } from './components/context/SearchContext/SearchContext';
+import { LanguageProvider } from './components/context/LanguageContext/LanguageContext'
 import { useEffect } from 'react';
 import { Toaster } from 'sonner'
 import { forceChakraDarkTheme } from './utils/utils';
@@ -24,21 +25,23 @@ export default function App() {
         <Route exact path="/showcase" element={<ShowcasePage />} />
         <Route path="/:category/:subcategory" element={
           <SearchProvider>
-            <main className='app-container'>
-              <Header />
-              <section className='category-wrapper'>
-                <Sidebar />
-                <CategoryPage />
-              </section>
-              <Toaster
-                toastOptions={toastStyles}
-                position='bottom-right'
-                visibleToasts={1}
-              />
-            </main>
+            <LanguageProvider>
+              <main className='app-container'>
+                <Header />
+                <section className='category-wrapper'>
+                  <Sidebar />
+                  <CategoryPage />
+                </section>
+                <Toaster
+                  toastOptions={toastStyles}
+                  position='bottom-right'
+                  visibleToasts={1}
+                />
+              </main>
+            </LanguageProvider>
           </SearchProvider>
         } />
       </Routes>
     </Router>
   )
-}
+}

src/components/code/CodeOptions.jsx

@@ -2,17 +2,10 @@ import { Children, useEffect, useState } from "react";
 import { Tabs, TabList, Tab, TabPanels, TabPanel, Icon, Text, Flex, Select } from "@chakra-ui/react";
 import { RiEmotionSadLine, RiTailwindCssFill } from "react-icons/ri";
 import { FiCode } from "react-icons/fi";
+import { useLanguage } from '../context/LanguageContext/useLanguage';
 
 const CodeOptions = ({ children }) => {
-  const [isJS, setIsJS] = useState(true);
-  const [languagePreset, setLanguagePreset] = useState(null);
-
-  useEffect(() => {
-    const language = localStorage.getItem('preferredLanguage') || 'JS';
-
-    handleLanguageSelection(language);
-    setLanguagePreset(language);
-  }, [])
+  const { languagePreset, setLanguagePreset } = useLanguage();
 
   const tabComponents = {
     JS: { css: CSSTab, tailwind: TailwindTab },
@@ -28,12 +21,10 @@ const CodeOptions = ({ children }) => {
     return acc;
   }, { JS: { css: null, tailwind: null }, TS: { css: null, tailwind: null } });
 
-  const handleLanguageSelection = (language) => setIsJS(language === "JS");
-
   const hasValidContent = (content) => content?.props?.children;
 
   const renderTabContent = (type) => {
-    const content = isJS ? categorizedTabs.JS[type] : categorizedTabs.TS[type];
+    const content = languagePreset === "JS" ? categorizedTabs.JS[type] : categorizedTabs.TS[type];
     return hasValidContent(content) ? content : (
       <Flex alignItems="center" gap={2} my={6} color="#a1a1aa">
         <Text>Nothing here yet!</Text>
@@ -68,8 +59,8 @@ const CodeOptions = ({ children }) => {
           <Select
             width="fit-content"
             sx={selectStyles}
-            onChange={(e) => handleLanguageSelection(e.target.value)}
-            defaultValue={localStorage.getItem('preferredLanguage') || 'JS'}
+            onChange={(e) => setLanguagePreset(e.target.value)}
+            value={languagePreset}
           >
             <option value="JS">JS</option>
             <option value="TS">TS</option>

src/components/context/LanguageContext/LanguageContext.jsx

@@ -0,0 +1,22 @@
+import { createContext, useState, useEffect } from 'react';
+
+export const LanguageContext = createContext();
+
+export function LanguageProvider({ children }) {
+  const [languagePreset, setLanguagePreset] = useState(null);
+
+  useEffect(() => {
+    const language = localStorage.getItem('preferredLanguage') || 'JS';
+    setLanguagePreset(language);
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('preferredLanguage', languagePreset)
+  }, [languagePreset])
+
+  return (
+    <LanguageContext.Provider value={{ languagePreset, setLanguagePreset }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}

src/components/context/LanguageContext/useLanguage.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { LanguageContext } from './LanguageContext';
+
+export function useLanguage() {
+  return useContext(LanguageContext);
+}

src/components/navs/Header.jsx

@@ -22,6 +22,7 @@ import { TiStarFullOutline } from "react-icons/ti";
 import { useStars } from '../../hooks/useStars';
 import { useDeviceOS } from 'react-haiku';
 import { useSearch } from '../context/SearchContext/useSearch';
+import { useLanguage } from '../context/LanguageContext/useLanguage'
 
 
 import Logo from '../../assets/logos/reactbits-logo.svg';
@@ -31,6 +32,7 @@ import FadeContent from '../../content/Animations/FadeContent/FadeContent';
 const Header = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { toggleSearch } = useSearch();
+  const { languagePreset, setLanguagePreset } = useLanguage();
   const stars = useStars();
   const os = useDeviceOS();
 
@@ -84,8 +86,8 @@ const Header = () => {
               rounded="xl"
               width="fit-content"
               fontWeight={600}
-              onChange={(e) => localStorage.setItem('preferredLanguage', e.target.value)}
-              defaultValue={localStorage.getItem('preferredLanguage') || 'JS'}
+              onChange={(e) => setLanguagePreset(e.target.value)}
+              value={languagePreset}
             >
               <option value="JS">JS</option>
               <option value="TS">TS</option>