Add ownership checks and share functionality to story editor

2025-12-26 21:02:36 +01:00
parent 5917508175
commit 0ff8a4e685
5 changed files with 188 additions and 101 deletions
@@ -10,19 +10,23 @@ export async function GET(
  { params }: { params: Promise<{ storySlug: string }> }
 ) {
  try {
-    const { userId } = await auth();
+    const authResult = await auth();
+    const { userId } = authResult;

-    if (!userId) {
-      return NextResponse.json(
-        { error: "Authentication required" },
-        { status: 401 }
-      );
-    }
+    console.log('API: auth result:', authResult);
+    console.log('API: userId type:', typeof userId, 'value:', userId);
+    console.log('API: timestamp:', new Date().toISOString());

    const { storySlug: slug } = await params;

    // Special case: if slug is "all", return user's stories for debugging
    if (slug === "all") {
+      if (!userId) {
+        return NextResponse.json(
+          { error: "Authentication required for this endpoint" },
+          { status: 401 }
+        );
+      }
      const userStories = await db.select().from(stories).where(eq(stories.userId, userId));
      return NextResponse.json({
        message: "User stories",
@@ -47,14 +51,14 @@ export async function GET(
    }

    // Check if the story belongs to the authenticated user
-    if (result.story.userId !== userId) {
-      return NextResponse.json(
-        { error: "Access denied" },
-        { status: 403 }
-      );
-    }
+    const isOwner = userId ? result.story.userId === userId : false;

-    return NextResponse.json(result);
+    // Return the story data with ownership information
+    const responseData = {
+      ...result,
+      isOwner,
+    };
+    return NextResponse.json(responseData);
  } catch (error) {
    console.error("Error fetching story:", error);
    return NextResponse.json(
@@ -28,6 +28,7 @@ interface StoryData {
  description?: string | null;
  style: string;
  userId?: string | null;
+  isOwner?: boolean;
 }

 export default function StoryEditorPage() {
@@ -35,6 +36,7 @@ export default function StoryEditorPage() {
  const slug = params.storySlug as string;

  const [story, setStory] = useState<StoryData | null>(null);
+  const [isOwner, setIsOwner] = useState<boolean>(false);
  const [pages, setPages] = useState<PageData[]>([]);
  const [currentPage, setCurrentPage] = useState(0);
  const [showApiModal, setShowApiModal] = useState(false);
@@ -57,9 +59,18 @@ export default function StoryEditorPage() {
        }

        const result = await response.json();
-        const { story: storyData, pages: pagesData } = result;
+        console.log("Editor: full API response:", result);
+
+        const {
+          story: storyData,
+          pages: pagesData,
+          isOwner: ownerStatus,
+        } = result;
+
+        console.log("Editor: received story data:", storyData);

        setStory(storyData);
+        setIsOwner(ownerStatus ?? false); // Default to false if undefined
        setPages(
          pagesData.map((page: any) => ({
            id: page.pageNumber,
@@ -157,9 +168,7 @@ export default function StoryEditorPage() {
      // Update the current page with the new image
      setPages((prevPages) =>
        prevPages.map((page, index) =>
-          index === currentPage
-            ? { ...page, image: result.imageUrl }
-            : page
+          index === currentPage ? { ...page, image: result.imageUrl } : page
        )
      );

@@ -172,7 +181,8 @@ export default function StoryEditorPage() {
      console.error("Error redrawing page:", error);
      toast({
        title: "Failed to redraw page",
-        description: error instanceof Error ? error.message : "Failed to redraw page",
+        description:
+          error instanceof Error ? error.message : "Failed to redraw page",
        variant: "destructive",
        duration: 4000,
      });
@@ -247,9 +257,7 @@ export default function StoryEditorPage() {
      toast({
        title: "Failed to generate page",
        description:
-          error instanceof Error
-            ? error.message
-            : "Failed to generate page",
+          error instanceof Error ? error.message : "Failed to generate page",
        variant: "destructive",
        duration: 4000,
      });
@@ -274,7 +282,11 @@ export default function StoryEditorPage() {

  return (
    <div className="h-screen flex flex-col bg-background">
-      <EditorToolbar title={story.title} onContinueStory={handleAddPage} />
+      <EditorToolbar
+        title={story.title}
+        onContinueStory={handleAddPage}
+        isOwner={isOwner}
+      />

      <div className="flex-1 flex overflow-hidden">
        <PageSidebar
@@ -284,11 +296,13 @@ export default function StoryEditorPage() {
          onAddPage={handleAddPage}
          loadingPageId={loadingPageId}
          onApiKeyClick={handleApiKeyClick}
+          isOwner={isOwner}
        />
        <ComicCanvas
          page={pages[currentPage]}
          pageIndex={currentPage}
          isLoading={loadingPageId === currentPage}
+          isOwner={isOwner}
          onInfoClick={() => setShowInfoSheet(true)}
          onRedrawClick={handleRedrawPage}
          onNextPage={() =>
@@ -1,6 +1,7 @@
 "use client";

-import { RefreshCw, Download, Info, Loader2 } from "lucide-react";
+import { RefreshCw, Share, Info, Loader2 } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";

 interface PageData {
@@ -17,13 +18,25 @@ interface ComicCanvasProps {
  page: PageData;
  pageIndex: number;
  isLoading?: boolean;
+  isOwner?: boolean;
  onInfoClick?: () => void;
  onRedrawClick?: () => void;
  onNextPage?: () => void;
  onPrevPage?: () => void;
 }

-export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, onRedrawClick, onNextPage, onPrevPage }: ComicCanvasProps) {
+export function ComicCanvas({
+  page,
+  pageIndex,
+  isLoading = false,
+  isOwner = true,
+  onInfoClick,
+  onRedrawClick,
+  onNextPage,
+  onPrevPage,
+}: ComicCanvasProps) {
+  const { toast } = useToast();
+
  return (
    <main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
      {/* Dot grid background */}
@@ -77,29 +90,10 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
            </Button>
          )}

-          <Button
-            variant="ghost"
-            className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
-            onClick={onRedrawClick}
-            disabled={isLoading}
-          >
-            {isLoading ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <RefreshCw className="w-4 h-4" />
-            )}
-            <span>{isLoading ? "Redrawing..." : "Redraw"}</span>
-          </Button>
-        </div>
-
-        <div className="flex flex-col items-center gap-3 mt-4">
-          {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
-
-          {/* Mobile action buttons */}
-          <div className="flex items-center gap-2 md:hidden">
+          {isOwner && (
            <Button
              variant="ghost"
-              className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+              className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
              onClick={onRedrawClick}
              disabled={isLoading}
            >
@@ -110,13 +104,55 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
              )}
              <span>{isLoading ? "Redrawing..." : "Redraw"}</span>
            </Button>
+          )}
+        </div>
+
+        <div className="flex flex-col items-center gap-3 mt-4">
+          {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
+
+          {/* Mobile action buttons */}
+          <div className="flex items-center gap-2 md:hidden">
+            {isOwner && (
+              <Button
+                variant="ghost"
+                className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+                onClick={onRedrawClick}
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="w-4 h-4" />
+                )}
+                <span>{isLoading ? "Redrawing..." : "Redraw"}</span>
+              </Button>
+            )}

            <Button
              variant="ghost"
              className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+              onClick={async () => {
+                const url = window.location.href;
+                try {
+                  await navigator.clipboard.writeText(url);
+                  toast({
+                    title: "Link copied!",
+                    description: "Story URL has been copied to your clipboard.",
+                    duration: 2000,
+                  });
+                } catch (err) {
+                  console.error("Failed to copy URL:", err);
+                  toast({
+                    title: "Failed to copy",
+                    description: "Could not copy the URL to clipboard.",
+                    variant: "destructive",
+                    duration: 3000,
+                  });
+                }
+              }}
            >
-              <Download className="w-4 h-4" />
-              <span>Download</span>
+              <Share className="w-4 h-4" />
+              <span>Share</span>
            </Button>
          </div>
        </div>
@@ -1,19 +1,23 @@
 "use client";

-import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react";
+import { ArrowLeft, RefreshCw, Share, Plus, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";

 interface EditorToolbarProps {
  title: string;
  onContinueStory?: () => void;
+  isOwner?: boolean;
 }

 export function EditorToolbar({
  title,
  onContinueStory,
+  isOwner = true,
 }: EditorToolbarProps) {
  const router = useRouter();
+  const { toast } = useToast();

  return (
    <header className="h-14 border-b border-border/50 bg-background/80 backdrop-blur-md flex items-center justify-between px-3 sm:px-4">
@@ -21,7 +25,7 @@ export function EditorToolbar({
        <Button
          variant="ghost"
          size="icon"
-          onClick={() => router.push("/stories")}
+          onClick={() => (isOwner ? router.push("/stories") : router.push("/"))}
          className="hover:bg-secondary text-muted-foreground hover:text-white shrink-0"
        >
          <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
@@ -32,24 +36,45 @@ export function EditorToolbar({
        </h1>
      </div>

-        <div className="flex items-center gap-1 sm:gap-2 shrink-0">
-         <Button
-           variant="ghost"
-           className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
-         >
-           <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-           <span>Download PDF</span>
-         </Button>
+      <div className="flex items-center gap-1 sm:gap-2 shrink-0">
+        <Button
+          variant="ghost"
+          className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
+          onClick={async () => {
+            const url = window.location.href;
+            try {
+              await navigator.clipboard.writeText(url);
+              toast({
+                title: "Link copied!",
+                description: "Story URL has been copied to your clipboard.",
+                duration: 2000,
+              });
+            } catch (err) {
+              console.error("Failed to copy URL:", err);
+              toast({
+                title: "Failed to copy",
+                description: "Could not copy the URL to clipboard.",
+                variant: "destructive",
+                duration: 3000,
+              });
+            }
+          }}
+        >
+          <Share className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+          <span>Share</span>
+        </Button>

-         <Button
-           onClick={onContinueStory}
-           className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
-         >
-           <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-           <span className="hidden sm:inline">Continue story</span>
-           <span className="sm:hidden">Add</span>
-         </Button>
-       </div>
+        {isOwner && onContinueStory && (
+          <Button
+            onClick={onContinueStory}
+            className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
+          >
+            <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <span className="hidden sm:inline">Continue story</span>
+            <span className="sm:hidden">Add</span>
+          </Button>
+        )}
+      </div>
    </header>
  );
 }
@@ -1,25 +1,26 @@
-"use client"
+"use client";

-import { Plus, Loader2, Key } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { UserButton } from "@clerk/nextjs"
+import { Plus, Loader2, Key } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { UserButton, SignedIn } from "@clerk/nextjs";

 interface PageData {
-  id: number
-  title: string
-  image: string
-  prompt: string
-  characterUpload?: string
-  style: string
+  id: number;
+  title: string;
+  image: string;
+  prompt: string;
+  characterUpload?: string;
+  style: string;
 }

 interface PageSidebarProps {
-  pages: PageData[]
-  currentPage: number
-  onPageSelect: (index: number) => void
-  onAddPage: () => void
-  loadingPageId?: number | null
-  onApiKeyClick?: () => void
+  pages: PageData[];
+  currentPage: number;
+  onPageSelect: (index: number) => void;
+  onAddPage: () => void;
+  loadingPageId?: number | null;
+  onApiKeyClick?: () => void;
+  isOwner?: boolean;
 }

 export function PageSidebar({
@@ -29,6 +30,7 @@ export function PageSidebar({
  onAddPage,
  loadingPageId,
  onApiKeyClick,
+  isOwner = true,
 }: PageSidebarProps) {
  return (
    <aside className="w-20 md:w-24 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
@@ -60,14 +62,16 @@ export function PageSidebar({
                  alt={`Page ${index + 1}`}
                  className="w-full h-full object-cover"
                />
-                <div className={`
+                <div
+                  className={`
                  absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
                  ${
                    currentPage === index
                      ? "bg-indigo text-white"
                      : "bg-black/70 text-white"
                  }
-                `}>
+                `}
+                >
                  {index + 1}
                </div>
              </>
@@ -75,12 +79,14 @@ export function PageSidebar({
          </button>
        ))}

-        <button
-          onClick={onAddPage}
-          className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
-        >
-          <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
-        </button>
+        {isOwner && (
+          <button
+            onClick={onAddPage}
+            className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
+          >
+            <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
+          </button>
+        )}
      </div>

      <div className="flex flex-col items-center gap-3">
@@ -95,16 +101,18 @@ export function PageSidebar({
          <Key className="w-4 h-4" />
        </Button>

-        <div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
-          <UserButton
-            appearance={{
-              elements: {
-                avatarBox: "w-full h-full rounded-md",
-              },
-            }}
-          />
-        </div>
+        <SignedIn>
+          <div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
+            <UserButton
+              appearance={{
+                elements: {
+                  avatarBox: "w-full h-full rounded-md",
+                },
+              }}
+            />
+          </div>
+        </SignedIn>
      </div>
    </aside>
-  )
+  );
 }