Merge pull request #41 from wajeshubham/dev

Dev

components/Loader.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const Loader = () => {
   return (
-    <div className="flex space-x-2 w-full h-screen fixed inset-0 bg-zinc-700/50 z-30 justify-center items-center">
+    <div className="flex space-x-2 w-full h-screen fixed inset-0 bg-zinc-700/50 z-50 justify-center items-center">
       <div aria-label="Loading..." role="status">
         <svg className="h-12 w-12 animate-spin" viewBox="3 3 18 18">
           <path

components/editor/SnippngCodeArea.tsx

@@ -83,6 +83,11 @@ const SnippngCodeArea: React.FC<Props> = ({ underConstructionTheme }) => {
       const savedDoc = await addDoc(collection(db, "snippets"), {
         ...dataToBeAdded,
         ownerUid: user.uid,
+        owner: {
+          displayName: user.displayName,
+          photoURL: user.photoURL,
+          email: user.email,
+        },
       });
       if (savedDoc.id) {
         addToast({
@@ -148,6 +153,7 @@ const SnippngCodeArea: React.FC<Props> = ({ underConstructionTheme }) => {
       ...editorConfig,
       uid: undefined,
       ownerUid: undefined,
+      owner: undefined,
     });
   }, [editorConfig, uid, underConstructionTheme]);
 

components/editor/SnippngThemeBuilder.tsx

@@ -42,6 +42,7 @@ const SnippngThemeBuilder: React.FC<{
       const dataToBeAdded = {
         ...deepClone(theme), // deep clone the theme to avoid mutation
         ownerUid: user.uid,
+        isPublished: false,
         owner: {
           displayName: user?.displayName,
           email: user?.email,

components/explore/PublishedThemeListing.tsx

@@ -0,0 +1,96 @@
+import { db } from "@/config/firebase";
+import { SnippngThemeAttributesInterface } from "@/types";
+import { SparklesIcon } from "@heroicons/react/24/outline";
+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.
+    setLoadingThemes(true);
+    try {
+      const _themes: SnippngThemeAttributesInterface[] = [];
+      const docRef = await getDocs(
+        query(collection(db, "themes"), where("isPublished", "==", true))
+      );
+      docRef.forEach((doc) => {
+        const theme = doc.data();
+        _themes.push({
+          ...theme,
+          uid: doc.id,
+        } as unknown as SnippngThemeAttributesInterface);
+      });
+      setThemes(_themes);
+    } catch (error) {
+      console.log("Error fetching snippets", error);
+    } finally {
+      setLoadingThemes(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPublishedThemes();
+  }, [user]);
+
+  if (loadingThemes) return <Loader />;
+
+  return (
+    <div className="py-5">
+      <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+        <div className="sm:col-span-2">
+          <dd className="mt-1 text-sm text-zinc-900">
+            {themes.length ? (
+              <ul role="list" className="grid md:grid-cols-2 grid-cols-1 gap-4">
+                {themes.map((theme) => (
+                  <SnippngThemeItem
+                    key={theme.id}
+                    theme={theme}
+                    onDelete={(themeId) => {
+                      setThemes(
+                        [...themes].filter((thm) => thm.id !== themeId)
+                      );
+                    }}
+                    onPublishChange={(themeId) => {
+                      setThemes(
+                        [...themes].map((theme) => {
+                          if (theme.id === themeId) {
+                            theme.isPublished = !theme.isPublished;
+                          }
+                          return theme;
+                        })
+                      );
+                    }}
+                  />
+                ))}
+              </ul>
+            ) : (
+              <ErrorText
+                errorTitle="No themes found"
+                errorSubTitle="Please construct some themes to list them here"
+                errorActionProps={{
+                  children: "Construct",
+                  StartIcon: SparklesIcon,
+                  onClick: () => {
+                    router.push("/theme/create");
+                  },
+                }}
+              />
+            )}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+};
+
+export default PublishedThemeListing;