Web: Add sharing

Author: Shellishack

web/components/interface/extension-suggestion-overlay.tsx

@@ -18,7 +18,7 @@ export default function ExtensionSuggestionOverlay() {
                   visibility: "public",
                 },
                 isEnabled: false,
-                remoteOrigin: "https://cdn.pulse-editor.com/extension",
+                remoteOrigin: `${process.env.NEXT_PUBLIC_CDN_URL}/${process.env.NEXT_PUBLIC_STORAGE_CONTAINER}`,
               }}
             />
             <ExtensionPreview
@@ -32,7 +32,7 @@ export default function ExtensionSuggestionOverlay() {
                   visibility: "public",
                 },
                 isEnabled: false,
-                remoteOrigin: "https://cdn.pulse-editor.com/extension",
+                remoteOrigin: `${process.env.NEXT_PUBLIC_CDN_URL}/${process.env.NEXT_PUBLIC_STORAGE_CONTAINER}`,
               }}
             />
             <ExtensionPreview
@@ -46,7 +46,7 @@ export default function ExtensionSuggestionOverlay() {
                   visibility: "public",
                 },
                 isEnabled: false,
-                remoteOrigin: "https://cdn.pulse-editor.com/extension",
+                remoteOrigin: `${process.env.NEXT_PUBLIC_CDN_URL}/${process.env.NEXT_PUBLIC_STORAGE_CONTAINER}`,
               }}
             />
           </div>

web/components/interface/not-authorized.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export default function NotAuthorized({ children }: { children?: ReactNode }) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-4">
+      <p className="text-danger text-4xl font-bold">Not Authorized🚫</p>
+      <p className="text-foreground text-center text-lg">
+        You do not have permission to access this content.
+      </p>
+      {children}
+    </div>
+  );
+}

web/components/modals/extension-marketplace-modal.tsx

@@ -1,5 +1,5 @@
 import ModalWrapper from "./modal-wrapper";
-import { Extension, TabItem } from "@/lib/types";
+import { Extension, ExtensionMeta, TabItem } from "@/lib/types";
 import { useContext, useEffect, useState } from "react";
 import Tabs from "../misc/tabs";
 import { EditorContext } from "../providers/editor-context-provider";
@@ -43,24 +43,12 @@ export default function ExtensionMarketplaceModal({
     isLoading: isLoadingMarketplaceExtensions,
     mutate: mutateMarketplaceExtensions,
   } = useSWR<Extension[]>(
-    isOpen ? "https://pulse-editor.com/api/extension/list" : null,
+    isOpen ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/extension/list` : null,
     (url: string) =>
       fetch(url)
         .then((res) => res.json())
         .then((body) => {
-          const fetchedExts: {
-            name: string;
-            version: string;
-            description?: string;
-            displayName?: string;
-            user: {
-              name: string;
-            };
-            org: {
-              name: string;
-            };
-            visibility: string;
-          }[] = body;
+          const fetchedExts: ExtensionMeta[] = body;
           const extensions: Extension[] = fetchedExts.map((ext) => {
             return {
               config: {
@@ -72,7 +60,7 @@ export default function ExtensionMarketplaceModal({
                 visibility: ext.visibility,
               },
               isEnabled: true,
-              remoteOrigin: `https://cdn.pulse-editor.com/extension`,
+              remoteOrigin: `${process.env.NEXT_PUBLIC_CDN_URL}/${process.env.NEXT_PUBLIC_STORAGE_CONTAINER}`,
             };
           });
           return extensions;

web/components/modals/sharing-modal.tsx

@@ -1,13 +1,13 @@
-import { Button, Select, SelectItem } from "@heroui/react";
+import { Button, Input, Select, SelectItem } from "@heroui/react";
 import ModalWrapper from "./modal-wrapper";
 import { useSearchParams } from "next/navigation";
 import QRDisplay from "../misc/qr-display";
 import Tabs from "../misc/tabs";
 import { TabItem } from "@/lib/types";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Icon from "../misc/icon";
 import toast from "react-hot-toast";
-import { useAuth } from "@/lib/hooks/use-auth";
+import useSWR from "swr";
 
 export default function SharingModal({
   isOpen,
@@ -36,35 +36,57 @@ export default function SharingModal({
   );
 
   const visibilityOptions = ["public", "unlisted", "private"];
-  const [selectedVisibility, setSelectedVisibility] = useState<
-    string | undefined
-  >(undefined);
-
-  const { session } = useAuth();
-  const [isDeveloper, setIsDeveloper] = useState(false);
-
-  // Load app visibility
-  useEffect(() => {
-    async function getVisibility() {
-      if (!app) return;
-
-      const url = new URL(`https://pulse-editor.com/api/extension/get`);
-      url.searchParams.append("app", app);
-      url.searchParams.append("latest", "true");
 
+  const {
+    data: shareInfo,
+    mutate,
+    isLoading: isLoadingShareInfo,
+  } = useSWR<
+    | {
+        visibility: string;
+        canEdit: boolean;
+        inviteCode?: string;
+      }
+    | undefined
+  >(
+    app
+      ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/extension/get-share-info?name=${app}`
+      : null,
+    async (url: URL) => {
       const res = await fetch(url, {
         credentials: "include",
       });
 
+      if (!res.ok) {
+        toast.error("Failed to fetch extension share info");
+        return undefined;
+      }
+
       const data: {
         visibility: string;
-      }[] = await res.json();
-      if (data) {
-        const ext = data[0];
-        setSelectedVisibility(ext.visibility);
-      }
-    }
-  }, []);
+        canEdit: boolean;
+        inviteCode?: string;
+      } = await res.json();
+
+      return data;
+    },
+  );
+
+  async function updateShareInfo(visibility: string) {
+    const url = new URL(
+      `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/extension/update`,
+    );
+    await fetch(url, {
+      method: "PATCH",
+      body: JSON.stringify({
+        visibility,
+        name: app,
+      }),
+      credentials: "include",
+    });
+
+    mutate();
+  }
 
   return (
     <ModalWrapper
@@ -79,19 +101,25 @@ export default function SharingModal({
             label="Visibility"
             placeholder="Select visibility"
             onChange={(e) => {
-              setSelectedVisibility(e.target.value);
+              updateShareInfo(e.target.value);
             }}
-            isDisabled={!isDeveloper}
+            isDisabled={!shareInfo?.canEdit}
+            isLoading={isLoadingShareInfo}
+            selectedKeys={shareInfo?.visibility ? [shareInfo.visibility] : []}
           >
             {visibilityOptions.map((option) => (
               <SelectItem key={option}>{option}</SelectItem>
             ))}
           </Select>
         )}
 
-        {!selectedVisibility && app ? (
+        {app && shareInfo?.canEdit && shareInfo.visibility === "unlisted" && (
+          <Input value={shareInfo.inviteCode} label="Invite Code" readOnly />
+        )}
+
+        {!shareInfo?.visibility && app ? (
           <p>Select a visibility option to see sharing options.</p>
-        ) : selectedVisibility === "private" && app ? (
+        ) : shareInfo?.visibility === "private" && app ? (
           <p>Your workspace is private.</p>
         ) : (
           <>
@@ -106,7 +134,9 @@ export default function SharingModal({
                 <p className="text-content4-foreground text-sm">
                   Share your workspace via this QR Code
                 </p>
-                <QRDisplay url={window.location.href} />
+                <QRDisplay
+                  url={`${window.location.origin}?app=${app}${shareInfo?.inviteCode ? `&inviteCode=${shareInfo.inviteCode}` : ""}`}
+                />
               </div>
             )}
 
@@ -116,11 +146,13 @@ export default function SharingModal({
                   Share your workspace via this URL
                 </p>
 
-                <p className="font-bold break-all">{window.location.href}</p>
+                <p className="font-bold break-all">{`${window.location.origin}?app=${app}${shareInfo?.inviteCode ? `&inviteCode=${shareInfo.inviteCode}` : ""}`}</p>
                 <Button
                   color="primary"
                   onPress={() => {
-                    navigator.clipboard.writeText(window.location.href);
+                    navigator.clipboard.writeText(
+                      `${window.location.origin}?app=${app}${shareInfo?.inviteCode ? `&inviteCode=${shareInfo.inviteCode}` : ""}`,
+                    );
                     toast.success("URL copied to clipboard");
                   }}
                 >

web/components/views/file-view-display-area.tsx

@@ -3,11 +3,12 @@ import { useViewManager } from "@/lib/hooks/use-view-manager";
 import ExtensionViewLayout from "./layout";
 import ViewLoader from "./loaders/view-loader";
 import useExtensionManager from "@/lib/hooks/use-extension-manager";
-import { Extension } from "@/lib/types";
+import { Extension, ExtensionMeta } from "@/lib/types";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { compare } from "semver";
 import { ViewModel } from "@pulse-editor/shared-utils";
+import NotAuthorized from "../interface/not-authorized";
 
 export default function ViewDisplayArea() {
   const { updateViewModel, activeViewModel } = useViewManager();
@@ -16,37 +17,34 @@ export default function ViewDisplayArea() {
   const params = useSearchParams();
   // Use the 'app' query parameter to load specific extension app upon loading page
   const app = params.get("app");
+  const inviteCode = params.get("inviteCode");
 
   const { installExtension } = useExtensionManager();
   const [pulseAppViewModel, setPulseAppViewModel] = useState<
     ViewModel | undefined
   >(undefined);
+  const [noAccessToApp, setNoAccessToApp] = useState<boolean>(false);
 
   useEffect(() => {
     // Download and load the extension app if specified
-    async function loadApp(appName: string) {
-      const url = new URL(`https://pulse-editor.com/api/extension/get`);
+    async function loadApp(appName: string, inviteCode?: string) {
+      const url = new URL(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/extension/get`,
+      );
       url.searchParams.set("name", appName);
+      url.searchParams.set("latest", "true");
+      if (inviteCode) url.searchParams.set("inviteCode", inviteCode);
 
-      const res = await fetch(url);
+      const res = await fetch(url, {
+        credentials: "include",
+      });
 
       if (!res.ok) {
-        throw new Error("Failed to fetch extension app");
+        setNoAccessToApp(true);
+        return;
       }
 
-      const fetchedExts: {
-        name: string;
-        version: string;
-        description?: string;
-        displayName?: string;
-        user: {
-          name: string;
-        };
-        org: {
-          name: string;
-        };
-        visibility: string;
-      }[] = await res.json();
+      const fetchedExts: ExtensionMeta[] = await res.json();
 
       console.log("Fetched extensions:", fetchedExts);
 
@@ -61,7 +59,7 @@ export default function ViewDisplayArea() {
             visibility: ext.visibility,
           },
           isEnabled: true,
-          remoteOrigin: `https://cdn.pulse-editor.com/extension`,
+          remoteOrigin: `${process.env.NEXT_PUBLIC_CDN_URL}/${process.env.NEXT_PUBLIC_STORAGE_CONTAINER}`,
         };
       });
 
@@ -70,6 +68,11 @@ export default function ViewDisplayArea() {
         return compare(b.config.version, a.config.version);
       })[0];
 
+      if (!ext) {
+        setNoAccessToApp(true);
+        return;
+      }
+
       console.log("Installing extension:", ext);
 
       await installExtension(ext);
@@ -82,12 +85,16 @@ export default function ViewDisplayArea() {
     }
 
     if (app) {
-      loadApp(app);
+      loadApp(app, inviteCode ?? undefined);
     }
   }, [app]);
 
   // #endregion
 
+  if (noAccessToApp) {
+    return <NotAuthorized />;
+  }
+
   return (
     <div className="flex h-full w-full flex-col p-1">
       <div className="bg-default flex h-full w-full flex-col items-start justify-between gap-1.5 overflow-hidden rounded-xl p-2">

web/lib/hooks/use-auth.ts

@@ -1,15 +1,14 @@
+"use client";
+
 import { useContext } from "react";
 import { Session } from "../types";
 import useSWR from "swr";
 import { EditorContext } from "@/components/providers/editor-context-provider";
 
-const authUrl = "https://pulse-editor.com";
-// const authUrl = "https://localhost:8080";
-
 export function useAuth() {
   // --- Auth ---
   const { data: session, isLoading } = useSWR<Session | undefined>(
-    `${authUrl}/api/auth/session`,
+    `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/session`,
     async (url: string) => {
       const res = await fetch(url, {
         credentials: "include",
@@ -34,7 +33,9 @@ export function useAuth() {
       return;
     }
 
-    const url = new URL(`${authUrl}/api/auth/signin`);
+    const url = new URL(
+      `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/signin`,
+    );
     url.searchParams.set("callbackUrl", window.location.href);
 
     window.location.href = url.toString();
@@ -46,7 +47,9 @@ export function useAuth() {
       return;
     }
 
-    const url = new URL(`${authUrl}/api/auth/signout`);
+    const url = new URL(
+      `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/signout`,
+    );
     url.searchParams.set("callbackUrl", window.location.href);
     window.location.href = url.toString();
   }