Add localstorage persist logic for config on home page

Author: wajeshubham

components/editor/SnippngCodeArea.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { DEFAULT_BASE_SETUP } from "@/lib/constants";
 import {
@@ -7,6 +7,7 @@ import {
   getEditorWrapperBg,
   getLanguage,
   getTheme,
+  LocalStorage,
 } from "@/utils";
 
 import { langs, loadLanguage } from "@uiw/codemirror-extensions-langs";
@@ -107,6 +108,13 @@ const SnippngCodeArea = () => {
     }
   };
 
+  useEffect(() => {
+    // if there is a uid means we are on edit page where we want to avoid persisting the editor config
+    if (uid) return;
+    // persist the editor config changes only when user is creating new snippet
+    LocalStorage.set("config", { ...editorConfig, uid: undefined });
+  }, [editorConfig, uid]);
+
   return (
     <>
       <section

components/editor/SnippngControlHeader.tsx

@@ -213,7 +213,7 @@ const SnippngControlHeader: React.FC<{
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items className="absolute right-0 max-h-[500px] z-30 mt-2 w-72 origin-top-right divide-y-[1px] dark:divide-zinc-400 divide-zinc-300 dark:bg-black bg-white overflow-auto text-sm rounded-sm outline outline-[1px] dark:outline-zinc-400 outline-zinc-300 dark:text-white text-zinc-900">
+              <Menu.Items className="absolute right-0 max-h-[500px] z-30 mt-2 w-96 origin-top-right divide-y-[1px] dark:divide-zinc-400 divide-zinc-300 dark:bg-black bg-white overflow-auto text-sm rounded-sm outline outline-[1px] dark:outline-zinc-400 outline-zinc-300 dark:text-white text-zinc-900">
                 <Menu.Button
                   className="w-full text-left p-2 inline-flex items-center"
                   onClick={() => {

lib/constants.ts

@@ -1,4 +1,7 @@
 import { SnippngEditorConfigInterface } from "@/types";
+import { LocalStorage } from "@/utils";
+
+export const isBrowser = typeof window !== "undefined";
 
 export const THEMES = [
   {
@@ -514,31 +517,40 @@ export const PEXELS_QUERY_STRINGS = [
   "technology",
 ];
 
-export const defaultEditorConfig: SnippngEditorConfigInterface = {
-  code: DEFAULT_CODE_SNIPPET,
-  snippetsName: "",
-  editorFontSize: 16,
-  editorWindowControlsType: "mac-left",
-  fileName: "@utils/debounce.ts",
-  hasDropShadow: true,
-  lineHeight: 19,
-  paddingHorizontal: 70,
-  paddingVertical: 70,
-  rounded: true,
-  selectedLang:
-    LANGUAGES.find((language) => language.id === "typescript") || LANGUAGES[0],
-  selectedTheme:
-    THEMES.find((theme) => theme.id === "tokyoNightStorm") || THEMES[0],
-  showFileName: true,
-  showLineNumbers: true,
-  wrapperBg: "#eee811",
-  gradients: ["#ba68c8", "#ffa7c4", "#e57373"],
-  gradientAngle: 140,
-  editorWidth: 0,
-  bgImageVisiblePatch: null,
-  bgBlur: 0,
+const getConfig = (): SnippngEditorConfigInterface => {
+  let persistedConfig = LocalStorage.get(
+    "config"
+  ) as SnippngEditorConfigInterface;
+  if (persistedConfig) return persistedConfig;
+  return {
+    code: DEFAULT_CODE_SNIPPET,
+    snippetsName: "",
+    editorFontSize: 16,
+    editorWindowControlsType: "mac-left",
+    fileName: "@utils/debounce.ts",
+    hasDropShadow: true,
+    lineHeight: 19,
+    paddingHorizontal: 70,
+    paddingVertical: 70,
+    rounded: true,
+    selectedLang:
+      LANGUAGES.find((language) => language.id === "typescript") ||
+      LANGUAGES[0],
+    selectedTheme:
+      THEMES.find((theme) => theme.id === "tokyoNightStorm") || THEMES[0],
+    showFileName: true,
+    showLineNumbers: true,
+    wrapperBg: "#eee811",
+    gradients: ["#ba68c8", "#ffa7c4", "#e57373"],
+    gradientAngle: 140,
+    editorWidth: 0,
+    bgImageVisiblePatch: null,
+    bgBlur: 0,
+  };
 };
 
+export const defaultEditorConfig: SnippngEditorConfigInterface = getConfig();
+
 export const DEFAULT_BASE_SETUP = {
   foldGutter: false,
   highlightActiveLine: false,

pages/snippet/[uid].tsx

@@ -47,7 +47,8 @@ const SavedSnippet = () => {
     if (!router.isReady) return;
     fetchCodeSnippet();
     return () => {
-      setEditorConfig({ ...defaultEditorConfig });
+      // set uid to undefined because we are leaving the snippet details page, the only page where uid is required
+      setEditorConfig({ ...defaultEditorConfig, uid: undefined });
     };
   }, [router.isReady]);
 

utils/index.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_RANGES, DEFAULT_WIDTHS } from "@/lib/constants";
+import { DEFAULT_RANGES, DEFAULT_WIDTHS, isBrowser } from "@/lib/constants";
 import {
   exportedTypeSuite,
   SnippngEditorConfigInterface,
@@ -137,3 +137,32 @@ export const validateSnippngConfig = (config: SnippngEditorConfigInterface) => {
 export const copyJSONText = async <T extends object>(data: T) => {
   return navigator.clipboard?.writeText(JSON.stringify(data));
 };
+
+export class LocalStorage {
+  static get(key: string) {
+    if (!isBrowser) return;
+    let value = localStorage.getItem(key);
+    if (value) {
+      try {
+        return JSON.parse(value);
+      } catch (err) {
+        return null;
+      }
+    }
+    return null;
+  }
+  static set(key: string, value: any) {
+    if (!isBrowser) return;
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  static remove(key: string) {
+    if (!isBrowser) return;
+    localStorage.removeItem(key);
+  }
+
+  static clear() {
+    if (!isBrowser) return;
+    localStorage.clear();
+  }
+}