highlighter style persisted in localStorage

Author: barrymun

src/components/HighlighterStyleSelector.tsx

@@ -5,7 +5,7 @@ import { SelectorOption } from "@types";
 import Selector from "./Selector";
 
 const HighlighterStyleSelector = () => {
-  const { highlighterStyle, setHighlighterStyle } = useAppContext();
+  const { highlighterStyle, toggleHighlighterStyle } = useAppContext();
 
   const options = highlighterStyles.map((style) => ({
     name: style.name,
@@ -18,7 +18,7 @@ const HighlighterStyleSelector = () => {
     if (!selected) {
       return;
     }
-    setHighlighterStyle(selected);
+    toggleHighlighterStyle(selected);
   };
 
   return (

src/contexts/AppContext.tsx

@@ -8,15 +8,24 @@ import {
 } from "react";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import { AppState, LanguageType, SnippetType } from "@types";
+import { highlighterStyles } from "@consts/highlighter-styles";
+import {
+  AppState,
+  HighlighterStyleType,
+  LanguageType,
+  SnippetType,
+} from "@types";
 
 // tokens
 const defaultLanguage: LanguageType = {
   lang: "JavaScript",
   icon: "/icons/javascript.svg",
 };
 
-const defaultHighlighterStyle = { name: "oneDark", style: oneDark };
+const defaultHighlighterStyle: HighlighterStyleType = {
+  name: "oneDark",
+  style: oneDark,
+};
 
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
@@ -29,7 +38,7 @@ const defaultState: AppState = {
   theme: "dark",
   toggleTheme: () => {},
   highlighterStyle: defaultHighlighterStyle,
-  setHighlighterStyle: () => {},
+  toggleHighlighterStyle: () => {},
 };
 
 const AppContext = createContext<AppState>(defaultState);
@@ -48,7 +57,13 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   );
   const [highlighterStyle, setHighlighterStyle] = useState<
     AppState["highlighterStyle"]
-  >(defaultHighlighterStyle);
+  >(
+    localStorage.getItem("highlighterStyleName")
+      ? highlighterStyles.find(
+          (style) => style.name === localStorage.getItem("highlighterStyleName")
+        ) || defaultHighlighterStyle
+      : defaultHighlighterStyle
+  );
 
   const toggleTheme = useCallback(() => {
     const newTheme = theme === "dark" ? "light" : "dark";
@@ -57,6 +72,13 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
     document.documentElement.setAttribute("data-theme", newTheme);
   }, [theme]);
 
+  const toggleHighlighterStyle = (
+    newHighlighterStyle: HighlighterStyleType
+  ) => {
+    setHighlighterStyle(newHighlighterStyle);
+    localStorage.setItem("highlighterStyleName", newHighlighterStyle.name);
+  };
+
   /**
    * set the theme on initial load
    */
@@ -77,7 +99,7 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
         theme,
         toggleTheme,
         highlighterStyle,
-        setHighlighterStyle,
+        toggleHighlighterStyle,
       }}
     >
       {children}

src/types/index.ts

@@ -31,9 +31,7 @@ export type AppState = {
   theme: "dark" | "light";
   toggleTheme: () => void;
   highlighterStyle: HighlighterStyleType;
-  setHighlighterStyle: React.Dispatch<
-    React.SetStateAction<HighlighterStyleType>
-  >;
+  toggleHighlighterStyle: (_: HighlighterStyleType) => void;
 };
 
 export interface SelectorOption {