Add theme -> firebase and auth HOC

Author: wajeshubham

HOC/withAuth.tsx

@@ -0,0 +1,31 @@
+import { SigninButton } from "@/components";
+import { useAuth } from "@/context/AuthContext";
+import Layout from "@/layout/Layout";
+import { ComponentType } from "react";
+
+/**
+ * @function withAuth (HOC)
+ * @description Handles the authentication logic and returns the wrapped `Component` if the user is `authenticated` else renders signin button
+ */
+const withAuth = <T extends Object>(Component: ComponentType<T>) => {
+  const InnerComponent = (props: T) => {
+    const { user } = useAuth();
+
+    if (!user)
+      return (
+        <Layout title={`Snippng | code snippets to image`}>
+          <div
+            data-testid="signin-btn-container"
+            className="w-full h-full flex justify-center items-center py-32"
+          >
+            <SigninButton />
+          </div>
+        </Layout>
+      );
+
+    return <Component {...props} />;
+  };
+  return InnerComponent;
+};
+
+export default withAuth;

components/editor/SnippngCodeArea.tsx

@@ -2,13 +2,13 @@ import { useEffect, useRef, useState } from "react";
 
 import { DEFAULT_BASE_SETUP, THEMES } from "@/lib/constants";
 import {
+  LocalStorage,
   clsx,
   constructTheme,
   deepClone,
   getEditorWrapperBg,
   getLanguage,
   getTheme,
-  LocalStorage,
 } from "@/utils";
 
 import { langs, loadLanguage } from "@uiw/codemirror-extensions-langs";
@@ -17,9 +17,9 @@ import CodeMirror from "@uiw/react-codemirror";
 
 import { useSnippngEditor } from "@/context/SnippngEditorContext";
 import { WidthHandler } from "@/lib/width-handler";
+import NoSSRWrapper from "../NoSSRWrapper";
 import Button from "../form/Button";
 import Input from "../form/Input";
-import NoSSRWrapper from "../NoSSRWrapper";
 import SnippngControlHeader from "./SnippngControlHeader";
 import SnippngWindowControls from "./SnippngWindowControls";
 

components/editor/SnippngControlHeader.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/lib/constants";
 import { ImagePicker } from "@/lib/image-picker";
 import { SelectOptionInterface } from "@/types";
-import { getEditorWrapperBg } from "@/utils";
+import { getEditorWrapperBg, loadThemes } from "@/utils";
 import { Menu, Transition } from "@headlessui/react";
 import {
   ArrowPathIcon,
@@ -27,23 +27,33 @@ import {
 } from "@heroicons/react/24/outline";
 import * as htmlToImage from "html-to-image";
 import { useRouter } from "next/router";
-import { Fragment, RefObject, useState } from "react";
+import { Fragment, RefObject, useEffect, useState } from "react";
 import Button from "../form/Button";
 import Checkbox from "../form/Checkbox";
 import Range from "../form/Range";
 import Select from "../form/Select";
 import SnippngConfigImportExporter from "./SnippngConfigImportExporter";
+import { useAuth } from "@/context/AuthContext";
+
+interface DropDownThemeItem {
+  icon?: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  id: string;
+  label: string;
+  isCustom?: boolean | undefined;
+}
 
 const SnippngControlHeader: React.FC<{
   wrapperRef: RefObject<HTMLDivElement>;
   creatingTheme?: boolean;
 }> = ({ wrapperRef, creatingTheme }) => {
   const [openImportExportSidebar, setOpenImportExportSidebar] = useState(false);
+  const [themes, setThemes] = useState<DropDownThemeItem[]>([]);
 
   const { editorConfig, handleConfigChange, setEditorConfig } =
     useSnippngEditor();
 
   const { addToast } = useToast();
+  const { user } = useAuth();
   const router = useRouter();
 
   const {
@@ -102,6 +112,30 @@ const SnippngControlHeader: React.FC<{
       });
   };
 
+  const setThemesForDropDown = () => {
+    const dropDownThemes = getAvailableThemes()?.map((op) => {
+      if (op?.isCustom) {
+        // render icon for a custom theme
+        return {
+          ...op,
+          icon: FireIcon,
+        };
+      }
+      return { ...op, icon: undefined };
+    });
+    setThemes(dropDownThemes);
+  };
+
+  useEffect(() => {
+    if (!user) {
+      setThemesForDropDown();
+    } else {
+      loadThemes(user, (themes) => {
+        setThemesForDropDown();
+      });
+    }
+  }, [user]);
+
   return (
     <>
       <SnippngConfigImportExporter
@@ -130,16 +164,7 @@ const SnippngControlHeader: React.FC<{
               }
               handleConfigChange("selectedTheme")(val);
             }}
-            options={getAvailableThemes()?.map((op) => {
-              if (op?.isCustom) {
-                // render icon for a custom theme
-                return {
-                  ...op,
-                  icon: FireIcon,
-                };
-              }
-              return op;
-            })}
+            options={themes}
           />
         ) : null}
         <Select

components/editor/SnippngThemeBuilder.tsx

@@ -1,11 +1,14 @@
 import { Button, Input, SnippngCodeArea } from "@/components";
+import { db } from "@/config/firebase";
+import { useAuth } from "@/context/AuthContext";
 import { useSnippngEditor } from "@/context/SnippngEditorContext";
 import { useToast } from "@/context/ToastContext";
 import { ColorPicker } from "@/lib/color-picker";
 import { defaultCustomTheme, defaultEditorConfig } from "@/lib/constants";
 import { SnippngThemeAttributesInterface } from "@/types";
-import { LocalStorage } from "@/utils";
+import { LocalStorage, deepClone } from "@/utils";
 import { ArrowDownOnSquareIcon } from "@heroicons/react/24/outline";
+import { addDoc, collection } from "firebase/firestore";
 import React, { useEffect, useState } from "react";
 
 const SnippngThemeBuilder: React.FC<{
@@ -15,9 +18,11 @@ const SnippngThemeBuilder: React.FC<{
     ...themeConfig,
     isCustom: true,
   });
+  const [saving, setSaving] = useState(false);
 
   const { handleConfigChange, setEditorConfig } = useSnippngEditor();
   const { addToast } = useToast();
+  const { user } = useAuth();
 
   const onConfigChange = (key: keyof typeof theme.config, value: string) => {
     setTheme((prevTheme) => ({
@@ -29,30 +34,54 @@ const SnippngThemeBuilder: React.FC<{
     }));
   };
 
-  const saveAndApplyTheme = () => {
-    let previousThemes =
-      (LocalStorage.get("local_themes") as SnippngThemeAttributesInterface[]) ||
-      [];
-    let id = crypto.randomUUID();
-    let themeToBeApplied = {
-      id,
-      label: theme.label,
-    };
-    previousThemes.push({
-      ...theme,
-      id,
-    });
-    LocalStorage.set("local_themes", previousThemes);
-    handleConfigChange("selectedTheme")(themeToBeApplied);
-    addToast({
-      message: "Theme saved successfully!",
-      description: "You can view your custom themes in your profile",
-    });
+  const saveAndApplyTheme = async () => {
+    if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+    if (!user) return;
+    setSaving(true);
+    try {
+      const dataToBeAdded = {
+        ...deepClone(theme), // deep clone the theme to avoid mutation
+        ownerUid: user.uid,
+        owner: {
+          displayName: user?.displayName,
+          email: user?.email,
+          photoURL: user?.photoURL,
+        },
+      };
+      const savedDoc = await addDoc(collection(db, "themes"), {
+        ...dataToBeAdded,
+      });
+      if (savedDoc.id) {
+        // get previously saved themes
+        let previousThemes =
+          (LocalStorage.get(
+            "local_themes"
+          ) as SnippngThemeAttributesInterface[]) || [];
+
+        // push newly created theme inside the previous themes array
+        previousThemes.push({
+          ...dataToBeAdded,
+          id: savedDoc.id,
+        });
+        // store the newly created theme inside local storage
+        LocalStorage.set("local_themes", previousThemes);
+
+        addToast({
+          message: "Theme saved successfully!",
+          description: "You can view your custom themes in your profile",
+        });
+      }
+    } catch (e) {
+      console.error("Error adding document: ", e);
+    } finally {
+      setSaving(false);
+    }
   };
 
   useEffect(() => {
     return () => {
-      // to avoid changing main editor's config state while creating theme we will set the persisted editor state
+      // to avoid changing main editor's config state while creating theme
+      // we will set the persisted editor state
       let persistedEditorConfig = LocalStorage.get("config");
       setEditorConfig({
         ...(persistedEditorConfig || defaultEditorConfig),
@@ -99,11 +128,12 @@ const SnippngThemeBuilder: React.FC<{
           })}
         </div>
         <Button
+          disabled={saving}
           StartIcon={ArrowDownOnSquareIcon}
           className="w-full justify-center"
           onClick={saveAndApplyTheme}
         >
-          Save theme
+          {saving ? "Saving..." : "Save theme"}
         </Button>
       </div>
       <div className="w-full -mb-10 p-4">

components/form/Select.tsx

@@ -2,7 +2,6 @@ import { SelectOptionInterface } from "@/types";
 import { clsx } from "@/utils";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
-import { FireIcon } from "@heroicons/react/24/outline";
 import React, { Fragment } from "react";
 
 export interface SelectComponentProps {

components/profile/SnippngThemeItem.tsx

@@ -2,12 +2,16 @@ import { useToast } from "@/context/ToastContext";
 import { DEFAULT_BASE_SETUP, DEFAULT_CODE_SNIPPET } from "@/lib/constants";
 import { SnippngThemeAttributesInterface } from "@/types";
 import { constructTheme, LocalStorage } from "@/utils";
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { TrashIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 import { langs } from "@uiw/codemirror-extensions-langs";
 import CodeMirror from "@uiw/react-codemirror";
 
-import React from "react";
+import React, { useState } from "react";
 import ErrorText from "../ErrorText";
+import { db } from "@/config/firebase";
+import { useAuth } from "@/context/AuthContext";
+import { deleteDoc, doc } from "firebase/firestore";
+import Loader from "../Loader";
 
 interface Props {
   theme: SnippngThemeAttributesInterface;
@@ -16,6 +20,35 @@ interface Props {
 
 const SnippngThemeItem: React.FC<Props> = ({ theme, onDelete }) => {
   const { addToast } = useToast();
+  const { user } = useAuth();
+
+  const [deletingTheme, setDeletingTheme] = useState(false);
+
+  const deleteThemeItem = async (themeId: string) => {
+    if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+    if (!user || !themeId) return;
+    setDeletingTheme(true);
+
+    try {
+      await deleteDoc(doc(db, "themes", themeId));
+      let localThemes =
+        (LocalStorage.get(
+          "local_themes"
+        ) as SnippngThemeAttributesInterface[]) || [];
+      localThemes = localThemes.filter((thm) => thm.id !== themeId);
+      LocalStorage.set("local_themes", localThemes);
+      onDelete(themeId || "");
+
+      addToast({
+        message: "Theme deleted successfully",
+      });
+    } catch (error) {
+      console.log("Error fetching snippets", error);
+    } finally {
+      setDeletingTheme(false);
+    }
+  };
+
   if (!theme)
     return (
       <ErrorText
@@ -53,33 +86,26 @@ const SnippngThemeItem: React.FC<Props> = ({ theme, onDelete }) => {
           <button
             aria-label="delete-theme"
             title="Delete theme"
+            disabled={deletingTheme}
             onClick={() => {
               let ok = confirm(
                 "Are you sure you want to delete this theme permanently?"
               );
               if (!ok) return;
-              let toBeDeletedId = theme.id;
-              let localThemes =
-                (LocalStorage.get(
-                  "local_themes"
-                ) as SnippngThemeAttributesInterface[]) || [];
-              localThemes = localThemes.filter(
-                (thm) => thm.id !== toBeDeletedId
-              );
-              LocalStorage.set("local_themes", localThemes);
-              onDelete(toBeDeletedId);
-              addToast({
-                message: "Theme deleted successfully!",
-              });
+              deleteThemeItem(theme.id);
             }}
             className="inline-flex items-center gap-2 dark:text-white text-zinc-700"
           >
             {/* <PencilIcon className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer" /> */}
-            <TrashIcon
-              role={"button"}
-              tabIndex={0}
-              className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer"
-            />
+            {deletingTheme ? (
+              <EllipsisHorizontalIcon className="animate-pulse h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer" />
+            ) : (
+              <TrashIcon
+                role={"button"}
+                tabIndex={0}
+                className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer"
+              />
+            )}
           </button>
         </span>
       </div>

context/AuthContext.tsx

@@ -11,6 +11,7 @@ import { auth } from "@/config/firebase";
 import { useToast } from "./ToastContext";
 import Layout from "@/layout/Layout";
 import { Loader } from "@/components";
+import { LocalStorage } from "@/utils";
 
 const GithubProvider = new GithubAuthProvider();
 const GoogleProvider = new GoogleAuthProvider();
@@ -90,6 +91,7 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   const logout = async () => {
     if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     await signOut(auth);
+    LocalStorage.remove("local_themes");
     addToast({
       message: "Logged out successfully",
       description: "See you again!",