Initial Commit

components/modals/card-modal/actions.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Copy, Trash } from "lucide-react";
+import { useParams } from "next/navigation";
+import { toast } from "sonner";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { deleteCard } from "@/actions/delete-card";
+import { Button } from "@/components/ui/button";
+import { useAction } from "@/hooks/use-action";
+import { copyCard } from "@/actions/copy-card";
+
+import { CardWithList } from "@/types";
+import { useCardModal } from "@/hooks/use-card-modal";
+
+interface ActionsProps {
+  data: CardWithList;
+}
+
+export const Actions = ({ data }: ActionsProps) => {
+  const params = useParams();
+  const cardModal = useCardModal();
+
+  const { execute: executeDeleteCard, isLoading: isLoadingDelete } = useAction(
+    deleteCard,
+    {
+      onSuccess: () => {
+        toast.success(`Card "${data.title}" deleted`);
+        cardModal.onClose();
+      },
+      onError: (error) => {
+        toast.error(error);
+      },
+    }
+  );
+
+  const { execute: executeCopyCard, isLoading: isLoadingCopy } = useAction(
+    copyCard,
+    {
+      onSuccess: () => {
+        toast.success(`Card "${data.title}" copied`);
+        cardModal.onClose();
+      },
+      onError: (error) => {
+        toast.error(error);
+      },
+    }
+  );
+
+  const onCopy = () => {
+    const boardId = params.boardId as string;
+
+    executeCopyCard({
+      id: data.id,
+      boardId,
+    });
+  };
+
+  const onDelete = () => {
+    const boardId = params.boardId as string;
+
+    executeDeleteCard({
+      id: data.id,
+      boardId,
+    });
+  };
+
+  return (
+    <div className="space-y-2 mt-2">
+      <p className="text-xs font-semibold">Actions</p>
+      <Button
+        onClick={onCopy}
+        disabled={isLoadingCopy}
+        variant="gray"
+        className="w-full justify-start"
+        size="inline"
+      >
+        <Copy className="h-4 w-4 mr-2" />
+        Copy
+      </Button>
+      <Button
+        onClick={onDelete}
+        disabled={isLoadingDelete}
+        variant="gray"
+        className="w-full justify-start text-destructive"
+        size="inline"
+      >
+        <Trash className="h-4 w-4 mr-2" />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+Actions.Skeleton = function ActionsSkeleton() {
+  return (
+    <div className="space-y-2 mt-2">
+      <Skeleton className="w-20 h-4 bg-neutral-200" />
+      <Skeleton className="w-full h-8 bg-neutral-200" />
+      <Skeleton className="w-full h-8 bg-neutral-200" />
+    </div>
+  );
+};

components/modals/card-modal/activity.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { AuditLog } from "@prisma/client";
+import { ActivityIcon } from "lucide-react";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { ActivityItem } from "@/components/activity-item";
+
+interface ActivityProps {
+  items: AuditLog[];
+}
+
+export const Activity = ({ items }: ActivityProps) => {
+  return (
+    <div className="flex items-start gap-x-3 w-full">
+      <ActivityIcon className="h-5 w-5 mt-0.5 text-neutral-700" />
+      <div className="w-full">
+        <p className="font-semibold text-neutral-700 mb-2">Activity</p>
+        <ol className="mt-2 space-y-4">
+          {items.map((item) => (
+            <ActivityItem key={item.id} data={item} />
+          ))}
+        </ol>
+      </div>
+    </div>
+  );
+};
+
+Activity.Skeleton = function ActivitySkeleton() {
+  return (
+    <div className="flex items-start gap-x-3 w-full">
+      <Skeleton className="h-6 w-6 bg-neutral-200" />
+      <div className="w-full">
+        <Skeleton className="w-24 h-6 mb-2 bg-neutral-200" />
+        <Skeleton className="w-full h-10 bg-neutral-200" />
+      </div>
+    </div>
+  );
+};

components/modals/card-modal/description.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useEventListener, useOnClickOutside } from "usehooks-ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState, ElementRef, useRef } from "react";
+import { useParams } from "next/navigation";
+import { AlignLeft } from "lucide-react";
+import { toast } from "sonner";
+
+import { FormTextarea } from "@/components/form/form-textarea";
+import { FormSubmit } from "@/components/form/form-submit";
+import { Skeleton } from "@/components/ui/skeleton";
+import { updateCard } from "@/actions/update-card";
+import { Button } from "@/components/ui/button";
+import { useAction } from "@/hooks/use-action";
+
+import { CardWithList } from "@/types";
+
+interface DescriptionProps {
+  data: CardWithList;
+}
+
+export const Description = ({ data }: DescriptionProps) => {
+  const queryClient = useQueryClient();
+  const params = useParams();
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const textareaRef = useRef<ElementRef<"textarea">>(null);
+  const formRef = useRef<ElementRef<"form">>(null);
+
+  const enaleEditing = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      textareaRef.current?.focus();
+    });
+  };
+
+  const disableEditing = () => {
+    setIsEditing(false);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      disableEditing();
+    }
+  };
+
+  useEventListener("keydown", onKeyDown);
+  useOnClickOutside(formRef, disableEditing);
+
+  const { execute, fieldErrors } = useAction(updateCard, {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["card", data.id] });
+      queryClient.invalidateQueries({ queryKey: ["card-logs", data.id] });
+      toast.success(`Card "${data.title}" updated`);
+      disableEditing();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onSubmit = (formData: FormData) => {
+    const description = formData.get("description") as string;
+    const boardId = params.boardId as string;
+
+    execute({
+      id: data.id,
+      description,
+      boardId,
+    });
+  };
+
+  return (
+    <div className="flex items-start gap-x-3 w-full">
+      <AlignLeft className="w-5 h-5 mt-0.5 text-neutral-700" />
+      <div className="w-full">
+        <p className="font-semibold text-neutral-700 mb-2">Description</p>
+        {isEditing ? (
+          <form ref={formRef} className="space-y-2" action={onSubmit}>
+            <FormTextarea
+              id="description"
+              ref={textareaRef}
+              className="w-full mt-2"
+              placeholder="Add a more detailed description..."
+              defaultValue={data.description ?? undefined}
+              errors={fieldErrors}
+            />
+            <div className="flex items-center gap-x-2">
+              <FormSubmit>Save</FormSubmit>
+              <Button
+                type="button"
+                onClick={disableEditing}
+                size="sm"
+                variant="ghost"
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div
+            onClick={enaleEditing}
+            role="button"
+            className="min-h-[78px] bg-neutral-200 text-sm font-medium py-3 px-3.5 rounded-md"
+          >
+            {data.description ?? "Add a more detailed description..."}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Description.Skeleton = function DescriptionSkeleton() {
+  return (
+    <div className="flex items-start gap-x-3 w-full">
+      <Skeleton className="h-6 w-6 bg-neutral-200" />
+      <div className="w-full">
+        <Skeleton className="h-6 w-24 mb-2 bg-neutral-200" />
+        <Skeleton className="w-full h-[78px] bg-neutral-200" />
+      </div>
+    </div>
+  );
+};

components/modals/card-modal/header.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useRef, ElementRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { Layout } from "lucide-react";
+import { toast } from "sonner";
+
+import { CardWithList } from "@/types";
+import { useAction } from "@/hooks/use-action";
+import { updateCard } from "@/actions/update-card";
+import { FormInput } from "@/components/form/form-input";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface HeaderProps {
+  data: CardWithList;
+}
+
+export const Header = ({ data }: HeaderProps) => {
+  const queryClient = useQueryClient();
+  const params = useParams();
+
+  const { execute } = useAction(updateCard, {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ["card", data.id],
+      });
+
+      queryClient.invalidateQueries({
+        queryKey: ["card-logs", data.id],
+      });
+
+      toast.success(`Card renamed to "${data.title}"`);
+      setTitle(data.title);
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const inputRef = useRef<ElementRef<"input">>(null);
+
+  const [title, setTitle] = useState(data.title);
+
+  const onBlur = () => {
+    inputRef.current?.form?.requestSubmit();
+  };
+
+  const onSubmit = (formData: FormData) => {
+    const title = formData.get("title") as string;
+    const boardId = params.boardId as string;
+
+    if (title === data.title) return;
+
+    execute({
+      id: data.id,
+      title,
+      boardId,
+    });
+  };
+
+  return (
+    <div className="flex items-start gap-x-3 mb-6 w-full">
+      <Layout className="h-5 w-5 mt-1 text-neutral-700" />
+      <div className="w-full">
+        <form action={onSubmit}>
+          <FormInput
+            id="title"
+            ref={inputRef}
+            onBlur={onBlur}
+            defaultValue={title}
+            className="font-semi-bold text-xl px-1 text-neutral-700 bg-transparent border-transparent relative -left-1 w-[95%] focus-visible:bg-white focus-visible:border-input mb-0.5 truncate"
+          />
+        </form>
+        <p className="text-sm text-muted-foreground">
+          in list <span className="underline">{data.list.title}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+Header.Skeleton = function HeaderSkelton() {
+  return (
+    <div className="flex items-start gap-x-3 mb-6">
+      <Skeleton className="h-6 w-6 mt-1 bg-neutral-200" />
+      <div>
+        <Skeleton className="w-24 h-6 mb-1 bg-neutral-200" />
+        <Skeleton className="w-12 h-4 bg-neutral-200" />
+      </div>
+    </div>
+  );
+};

components/modals/card-modal/index.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { CardWithList } from "@/types";
+import { fetcher } from "@/lib/fetcher";
+import { AuditLog } from "@prisma/client";
+import { useCardModal } from "@/hooks/use-card-modal";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+import { Header } from "./header";
+import { Description } from "./description";
+import { Actions } from "./actions";
+import { Activity } from "./activity";
+
+export const CardModal = () => {
+  const id = useCardModal((state) => state.id);
+  const isOpen = useCardModal((state) => state.isOpen);
+  const onClose = useCardModal((state) => state.onClose);
+
+  const { data: cardData } = useQuery<CardWithList>({
+    queryKey: ["card", id],
+    queryFn: () => fetcher(`/api/cards/${id}`),
+  });
+
+  const { data: auditLogsData } = useQuery<AuditLog[]>({
+    queryKey: ["card-logs", id],
+    queryFn: () => fetcher(`/api/cards/${id}/logs`),
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        {!cardData ? <Header.Skeleton /> : <Header data={cardData} />}
+        <div className="grid grid-cols-1 md:grid-cols-4 md:gap-4">
+          <div className="col-span-3">
+            <div className="w-full space-y-6">
+              {!cardData ? (
+                <Description.Skeleton />
+              ) : (
+                <Description data={cardData} />
+              )}
+              {!auditLogsData ? (
+                <Activity.Skeleton />
+              ) : (
+                <Activity items={auditLogsData} />
+              )}
+            </div>
+          </div>
+          {!cardData ? <Actions.Skeleton /> : <Actions data={cardData} />}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};