Merge pull request #39 from wajeshubham/dev

Dev

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";
 
@@ -119,7 +119,7 @@ const SnippngCodeArea: React.FC<Props> = ({ underConstructionTheme }) => {
   /**
    *
    * @returns editor compatible theme object
-   * @description  Function is responsible for constructing theme based on if it is a
+   * @description  Function is responsible for constructing theme based on if it is
    * - `predefined` - theme in the `@uiw/codemirror-themes-all` library
    * - `localCustom` - Build by user and saved locally
    * - `underConstructionTheme` - user is currently constructing/configuring new theme

components/editor/SnippngControlHeader.tsx

@@ -2,16 +2,16 @@ import { useSnippngEditor } from "@/context/SnippngEditorContext";
 import { useToast } from "@/context/ToastContext";
 import { ColorPicker } from "@/lib/color-picker";
 import {
-  defaultEditorConfig,
   DEFAULT_RANGES,
   DOWNLOAD_OPTIONS,
-  getAvailableThemes,
   LANGUAGES,
+  defaultEditorConfig,
+  getAvailableThemes,
   predefinedConfig,
 } from "@/lib/constants";
 import { ImagePicker } from "@/lib/image-picker";
 import { SelectOptionInterface } from "@/types";
-import { getEditorWrapperBg, LocalStorage } from "@/utils";
+import { getEditorWrapperBg, loadThemes } from "@/utils";
 import { Menu, Transition } from "@headlessui/react";
 import {
   ArrowPathIcon,
@@ -21,28 +21,39 @@ import {
   Cog6ToothIcon,
   CommandLineIcon,
   DocumentDuplicateIcon,
+  FireIcon,
   PhotoIcon,
   SparklesIcon,
 } 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 {
@@ -101,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
@@ -129,7 +164,7 @@ const SnippngControlHeader: React.FC<{
               }
               handleConfigChange("selectedTheme")(val);
             }}
-            options={getAvailableThemes()}
+            options={themes}
           />
         ) : null}
         <Select

components/editor/SnippngThemeBuilder.tsx

@@ -1,22 +1,28 @@
 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<{
   themeConfig?: SnippngThemeAttributesInterface;
 }> = ({ themeConfig = { ...defaultCustomTheme } }) => {
   const [theme, setTheme] = useState<SnippngThemeAttributesInterface>({
     ...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) => ({
@@ -28,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),
@@ -98,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

@@ -6,7 +6,11 @@ import React, { Fragment } from "react";
 
 export interface SelectComponentProps {
   value: SelectOptionInterface;
-  options: { id: string; label: string }[];
+  options: {
+    id: string;
+    label: string;
+    icon?: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  }[];
   onChange: (value: SelectOptionInterface) => void;
   children?: React.ReactNode;
   placeholder?: string | React.ReactNode;
@@ -73,9 +77,15 @@ const Select: React.FC<SelectComponentProps> = ({
                             value.id === option.id
                               ? "font-semibold"
                               : "font-normal",
-                            "block truncate"
+                            "inline-flex truncate justify-start items-center gap-2"
                           )}
                         >
+                          {option.icon ? (
+                            <option.icon
+                              className="h-5 w-5"
+                              aria-hidden="true"
+                            />
+                          ) : null}
                           {option.label}
                         </span>