language persisted in localStorage

Author: barrymun

src/components/LanguageSelector.tsx

@@ -7,7 +7,7 @@ import { SelectorOption } from "@types";
 import Selector from "./Selector";
 
 const LanguageSelector = () => {
-  const { language, setLanguage } = useAppContext();
+  const { language, toggleLanguage } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const options = useMemo(
@@ -24,7 +24,7 @@ const LanguageSelector = () => {
     if (!selected) {
       return;
     }
-    setLanguage(selected);
+    toggleLanguage(selected);
   };
 
   if (loading) {

src/contexts/AppContext.tsx

@@ -9,6 +9,7 @@ import {
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 import { highlighterStyles } from "@consts/highlighter-styles";
+import { useLanguages } from "@hooks/useLanguages";
 import {
   AppState,
   HighlighterStyleType,
@@ -30,7 +31,7 @@ const defaultHighlighterStyle: HighlighterStyleType = {
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
   language: defaultLanguage,
-  setLanguage: () => {},
+  toggleLanguage: () => {},
   category: "",
   setCategory: () => {},
   snippet: null,
@@ -46,6 +47,8 @@ const AppContext = createContext<AppState>(defaultState);
 export const AppProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
+  const { fetchedLanguages } = useLanguages();
+
   const [language, setLanguage] = useState<LanguageType>(defaultLanguage);
   const [category, setCategory] = useState<string>("");
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
@@ -65,6 +68,11 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
       : defaultHighlighterStyle
   );
 
+  const toggleLanguage = (newLanguage: LanguageType) => {
+    setLanguage(newLanguage);
+    localStorage.setItem("languageName", newLanguage.lang);
+  };
+
   const toggleTheme = useCallback(() => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
@@ -79,6 +87,29 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
     localStorage.setItem("highlighterStyleName", newHighlighterStyle.name);
   };
 
+  /**
+   * check if the language is saved in local storage
+   */
+  useEffect(() => {
+    if (fetchedLanguages.length === 0) {
+      return;
+    }
+
+    const languageName = localStorage.getItem("languageName");
+    if (!languageName) {
+      return;
+    }
+
+    const selected = fetchedLanguages.find(
+      (lang) => lang.lang === languageName
+    );
+    if (!selected) {
+      return;
+    }
+
+    setLanguage(selected);
+  }, [fetchedLanguages]);
+
   /**
    * set the theme on initial load
    */
@@ -91,7 +122,7 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
     <AppContext.Provider
       value={{
         language,
-        setLanguage,
+        toggleLanguage,
         category,
         setCategory,
         snippet,

src/types/index.ts

@@ -23,7 +23,7 @@ export type HighlighterStyleType = {
 
 export type AppState = {
   language: LanguageType;
-  setLanguage: React.Dispatch<React.SetStateAction<LanguageType>>;
+  toggleLanguage: (_: LanguageType) => void;
   category: string;
   setCategory: React.Dispatch<React.SetStateAction<string>>;
   snippet: SnippetType | null;