Theo's Typesafe Cult•6mo ago

Unexpected error in delete-image server action in Theo's modern react tutorial

So I was following Theo's react tutorial to build an image gallery, I'm facing an issue in the fullPageImgView modal, where, when the delete button is clicked ideally it should route to "/" path but for some reason it calls the getImage function which is only present in the fullPageImgView component which eventually returns the error I'm getting. in short fullPageImgView func is getting called again after deleteImage call resulting in getImage call fullPageImgView.tsx component

import { clerkClient } from "@clerk/nextjs/server";
import { Button } from "@/components/ui/button";
import { deleteImage, getImage } from "@/server/queries";

export async function FullPageImgView(props: { photoId: string }) {
  const idAsNumber = Number(props.photoId);
  if (Number.isNaN(idAsNumber)) throw new Error("Invalid photo id");

  const image = await getImage(idAsNumber);

  const userInfo = await clerkClient.users.getUser(image.userId);

  return (
    <div className="flex h-full w-screen min-w-0 items-center justify-center text-white">
      <div className="flex-shrink flex-grow">
        <img src={image.url} className="object-contain" alt={image.name} />
      </div>
      <div className="flex h-full w-56 flex-shrink-0 flex-col border-l">
        <div className="border-b p-2 text-center text-xl">{image.name}</div>

        <div className="p-2">
          <div>Uploaded By:</div>
          <div>{userInfo.fullName}</div>
        </div>

        <div className="p-2">
          <div>Created On:</div>
          <div>{image.createdAt.toLocaleDateString()}</div>
        </div>

        <div className="p-2">
          <form action={async () => {
              "use server";
              await deleteImage(idAsNumber)}}
          >
            <Button type="submit" variant="destructive">
              Delete
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}

import { clerkClient } from "@clerk/nextjs/server";
import { Button } from "@/components/ui/button";
import { deleteImage, getImage } from "@/server/queries";

export async function FullPageImgView(props: { photoId: string }) {
  const idAsNumber = Number(props.photoId);
  if (Number.isNaN(idAsNumber)) throw new Error("Invalid photo id");

  const image = await getImage(idAsNumber);

  const userInfo = await clerkClient.users.getUser(image.userId);

  return (
    <div className="flex h-full w-screen min-w-0 items-center justify-center text-white">
      <div className="flex-shrink flex-grow">
        <img src={image.url} className="object-contain" alt={image.name} />
      </div>
      <div className="flex h-full w-56 flex-shrink-0 flex-col border-l">
        <div className="border-b p-2 text-center text-xl">{image.name}</div>

        <div className="p-2">
          <div>Uploaded By:</div>
          <div>{userInfo.fullName}</div>
        </div>

        <div className="p-2">
          <div>Created On:</div>
          <div>{image.createdAt.toLocaleDateString()}</div>
        </div>

        <div className="p-2">
          <form action={async () => {
              "use server";
              await deleteImage(idAsNumber)}}
          >
            <Button type="submit" variant="destructive">
              Delete
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}

src/server/queries.ts added as a text file cause msg was getting too long

queries.ts.txt

1 Reply

#snuglife•4mo ago

hey, did you end up discovering the issue here? I'm encountering the same issue, and I'm not sure yet why the full page image component is rerendering (update: the modal page is, as are its children)

Gaming

Programming

Unexpected error in delete-image server action in Theo's modern react tutorial