Add explore theme nav link with clone theme functionality

wajeshubham · wajeshubham · commit c5c2df505603 · 2023-05-28T20:54:21.000+05:30
diff --git a/components/explore/PublishedThemeListing.tsx b/components/explore/PublishedThemeListing.tsx
@@ -1,18 +1,19 @@
 import { db } from "@/config/firebase";
 import { SnippngThemeAttributesInterface } from "@/types";
-import { collection, getDocs, query, where } from "firebase/firestore";
-import React, { useEffect, useState } from "react";
-import ErrorText from "../ErrorText";
 import { SparklesIcon } from "@heroicons/react/24/outline";
-import SnippngThemeItem from "../profile/SnippngThemeItem";
-import Button from "../form/Button";
+import { collection, getDocs, query, where } from "firebase/firestore";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import ErrorText from "../ErrorText";
 import Loader from "../Loader";
+import SnippngThemeItem from "../profile/SnippngThemeItem";
+import { useAuth } from "@/context/AuthContext";
 
 const PublishedThemeListing = () => {
   const [themes, setThemes] = useState<SnippngThemeAttributesInterface[]>([]);
   const [loadingThemes, setLoadingThemes] = useState(false);
   const router = useRouter();
+  const { user } = useAuth();
 
   const fetchPublishedThemes = 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.
@@ -23,8 +24,10 @@ const PublishedThemeListing = () => {
         query(collection(db, "themes"), where("isPublished", "==", true))
       );
       docRef.forEach((doc) => {
+        const theme = doc.data();
+        if (theme.ownerUid === user?.uid) return; // filter the own themes
         _themes.push({
-          ...doc.data(),
+          ...theme,
           uid: doc.id,
         } as unknown as SnippngThemeAttributesInterface);
       });
@@ -37,8 +40,9 @@ const PublishedThemeListing = () => {
   };
 
   useEffect(() => {
+    if (!user) return;
     fetchPublishedThemes();
-  }, []);
+  }, [user]);
 
   if (loadingThemes) return <Loader />;
 
diff --git a/components/profile/SnippngThemeItem.tsx b/components/profile/SnippngThemeItem.tsx
@@ -1,22 +1,28 @@
 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 { LocalStorage, constructTheme, deepClone } from "@/utils";
 import {
-  TrashIcon,
+  ClipboardDocumentIcon,
   EllipsisHorizontalIcon,
   EyeIcon,
   EyeSlashIcon,
+  TrashIcon,
 } from "@heroicons/react/24/outline";
 import { langs } from "@uiw/codemirror-extensions-langs";
 import CodeMirror from "@uiw/react-codemirror";
 
-import React, { useState } from "react";
-import ErrorText from "../ErrorText";
 import { db } from "@/config/firebase";
 import { useAuth } from "@/context/AuthContext";
-import { deleteDoc, doc, updateDoc } from "firebase/firestore";
-import Loader from "../Loader";
+import {
+  addDoc,
+  collection,
+  deleteDoc,
+  doc,
+  updateDoc,
+} from "firebase/firestore";
+import React, { useState } from "react";
+import ErrorText from "../ErrorText";
 import Button from "../form/Button";
 
 interface Props {
@@ -92,6 +98,53 @@ const SnippngThemeItem: React.FC<Props> = ({
     }
   };
 
+  const forkTheme = 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;
+    try {
+      let data = deepClone(theme);
+      // delete original theme's uid and id to persist them as they are unique
+      delete data.uid;
+      delete data.id;
+      const dataToBeAdded = {
+        ...data, // deep clone the theme to avoid mutation
+        ownerUid: user.uid,
+        isPublished: false,
+        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 forked successfully!",
+          description: "You can view your forked themes in your profile",
+        });
+      }
+    } catch (e) {
+      console.error("Error adding document: ", e);
+    } finally {
+    }
+  };
+
   if (!theme)
     return (
       <ErrorText
@@ -103,7 +156,7 @@ const SnippngThemeItem: React.FC<Props> = ({
     <CodeMirror
       readOnly
       editable={false}
-      className="CodeMirror__Theme__Preview__Editor"
+      className={"CodeMirror__Theme__Preview__Editor"}
       value={DEFAULT_CODE_SNIPPET}
       extensions={[langs.javascript()]}
       basicSetup={{
@@ -127,60 +180,62 @@ const SnippngThemeItem: React.FC<Props> = ({
             {theme.label}
           </span>
           {theme?.ownerUid === user?.uid ? (
-            <button
-              aria-label="delete-theme"
-              title="Delete theme"
-              disabled={deletingTheme}
-              onClick={() => {
-                let ok = confirm(
-                  `Are you sure you want to ${
-                    theme.isPublished ? "unpublish" : "publish"
-                  } this theme?`
-                );
-                if (!ok) return;
-                togglePublishThemeItem(theme.id);
-              }}
-              className="inline-flex ml-auto mr-2 items-center gap-2 dark:text-white text-zinc-700 outline outline-[1px] dark:outline-zinc-500 rounded-md outline-zinc-200"
-            >
-              {theme.isPublished ? (
-                <EyeIcon
-                  title="Theme is published"
-                  className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer"
-                />
-              ) : (
-                <EyeSlashIcon
-                  role={"button"}
-                  title="Theme is private"
-                  tabIndex={0}
-                  className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer"
-                />
-              )}
-            </button>
+            <>
+              <button
+                aria-label="delete-theme"
+                title="Delete theme"
+                disabled={deletingTheme}
+                onClick={() => {
+                  let ok = confirm(
+                    `Are you sure you want to ${
+                      theme.isPublished ? "unpublish" : "publish"
+                    } this theme?`
+                  );
+                  if (!ok) return;
+                  togglePublishThemeItem(theme.id);
+                }}
+                className="inline-flex ml-auto mr-2 items-center gap-2 dark:text-white text-zinc-700 outline outline-[1px] dark:outline-zinc-500 rounded-md outline-zinc-200"
+              >
+                {theme.isPublished ? (
+                  <EyeIcon
+                    title="Theme is published"
+                    className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer"
+                  />
+                ) : (
+                  <EyeSlashIcon
+                    role={"button"}
+                    title="Theme is private"
+                    tabIndex={0}
+                    className="h-7 w-7 hover:dark:bg-zinc-600 hover:bg-zinc-200 p-1 rounded-md cursor-pointer"
+                  />
+                )}
+              </button>
+              <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;
+                  deleteThemeItem(theme.id);
+                }}
+                className="inline-flex items-center gap-2 dark:text-white text-zinc-700 outline outline-[1px] dark:outline-zinc-500 rounded-md outline-zinc-200"
+              >
+                {/* <PencilIcon 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>
+            </>
           ) : null}
-          <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;
-              deleteThemeItem(theme.id);
-            }}
-            className="inline-flex items-center gap-2 dark:text-white text-zinc-700 outline outline-[1px] dark:outline-zinc-500 rounded-md outline-zinc-200"
-          >
-            {/* <PencilIcon 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>
         <span className="block w-full h-[0.1px] dark:bg-zinc-500 bg-zinc-300 my-3"></span>
         <span className="flex justify-start gap-3 items-center w-full">
@@ -197,6 +252,17 @@ const SnippngThemeItem: React.FC<Props> = ({
               {theme?.owner?.email || "Snippng user"}
             </p>
           </span>
+          {theme?.ownerUid !== user?.uid ? (
+            <Button
+              className="ml-auto"
+              aria-label="fork-theme"
+              title="Fork theme"
+              StartIcon={ClipboardDocumentIcon}
+              onClick={forkTheme}
+            >
+              Clone theme
+            </Button>
+          ) : null}
         </span>
       </div>
     </CodeMirror>
diff --git a/layout/Header.tsx b/layout/Header.tsx
@@ -1,7 +1,10 @@
 import { Button, Logo, SigninButton, ThemeToggle } from "@/components";
 import { useAuth } from "@/context/AuthContext";
 import { clsx } from "@/utils";
-import { ArrowLeftOnRectangleIcon } from "@heroicons/react/24/outline";
+import {
+  ArrowLeftOnRectangleIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -17,7 +20,23 @@ const Header = () => {
           </Link>
         </div>
         <div className="flex z-40 justify-end gap-4 items-center w-1/2 flex-shrink-0">
-          <ThemeToggle />
+          <Button
+            data-testid="explore-themes"
+            StartIcon={(props) => (
+              <SparklesIcon
+                {...props}
+                className={clsx(
+                  "md:mr-2 md:!w-4 md:!h-4 !w-6 !h-6 mr-0",
+                  props.className ?? ""
+                )}
+              />
+            )}
+            onClick={() => {
+              router.push(`/explore/themes`);
+            }}
+          >
+            <span className="md:block hidden">Explore themes</span>
+          </Button>
           {user?.uid ? (
             <>
               <Button
@@ -60,6 +79,7 @@ const Header = () => {
           ) : (
             <SigninButton />
           )}
+          <ThemeToggle />
         </div>
       </nav>
     </header>
diff --git a/types/editor.ts b/types/editor.ts
@@ -9,6 +9,7 @@ export interface SelectOptionInterface {
 export type CustomTheme = ReturnType<typeof createTheme>;
 export interface SnippngThemeAttributesInterface {
   id: string;
+  uid?: string;
   label: string;
   theme: "light" | "dark";
   isPublished?: boolean;
