Add owner detail in on snippng code save

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/explore/PublishedThemeListing.tsx

@@ -25,7 +25,6 @@ const PublishedThemeListing = () => {
       );
       docRef.forEach((doc) => {
         const theme = doc.data();
-        if (theme.ownerUid === user?.uid) return; // filter the own themes
         _themes.push({
           ...theme,
           uid: doc.id,

pages/snippet/[uid].tsx

@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 // TODO: implement SSR
 const SavedSnippet = () => {
   const router = useRouter();
-  const { setEditorConfig } = useSnippngEditor();
+  const { editorConfig, setEditorConfig } = useSnippngEditor();
 
   const [notFound, setNotFound] = useState(false);
   const [loadingConfig, setLoadingConfig] = useState(true);
@@ -53,6 +53,7 @@ const SavedSnippet = () => {
         ...defaultEditorConfig,
         uid: undefined,
         ownerUid: undefined,
+        owner: undefined,
       });
     };
   }, [router.isReady]);
@@ -83,7 +84,45 @@ const SavedSnippet = () => {
       </Layout>
     );
 
-  return <Layout>{loadingConfig ? <Loader /> : <SnippngCodeArea />}</Layout>;
+  return (
+    <Layout>
+      {loadingConfig ? (
+        <Loader />
+      ) : (
+        <>
+          <div className="my-4 max-w-3xl md:flex md:items-start md:justify-between md:space-x-5 lg:max-w-7xl">
+            <div className="flex items-start space-x-5">
+              <div className="flex-shrink-0">
+                <div className="relative">
+                  <img
+                    className="h-14 w-14 rounded-full border-[1px] dark:border-white border-zinc-900"
+                    src={editorConfig?.owner?.photoURL || ""}
+                    alt=""
+                  />
+                  <span
+                    className="absolute inset-0 rounded-full shadow-inner"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+              <div>
+                <h1 className="text-xl items-center inline-flex font-bold text-zinc-900 dark:text-white">
+                  {editorConfig?.owner?.displayName || "Snippng user"}{" "}
+                  <span className="inline-flex items-center ml-1.5 rounded-sm dark:bg-indigo-600 bg-indigo-100 h-[15px] py-1.5 px-1 text-[10px] dark:text-indigo-100 text-indigo-600 border-[1px] border-indigo-600">
+                    Author
+                  </span>
+                </h1>
+                <p className="text-xs text-zinc-500 dark:text-zinc-300">
+                  {editorConfig?.owner?.email || "Snippng user email"}
+                </p>
+              </div>
+            </div>
+          </div>
+          <SnippngCodeArea />
+        </>
+      )}
+    </Layout>
+  );
 };
 
 export default SavedSnippet;

types/editor.ts

@@ -54,6 +54,7 @@ export type SnippngWindowControlsType =
 
 export interface SnippngEditorConfigInterface {
   ownerUid?: string;
+  owner?: Pick<User, "displayName" | "email" | "photoURL">;
   uid?: string;
   watermark?: boolean;
   code: string;

utils/index.ts

@@ -175,6 +175,7 @@ export const getExportableConfig = (
   deepClonedConfig.bgImageVisiblePatch = null;
   delete deepClonedConfig.uid;
   delete deepClonedConfig.ownerUid;
+  delete deepClonedConfig.owner;
   const exportableConfig: SnippngExportableConfig = deepClonedConfig;
   return exportableConfig;
 };