From 29ce8908eeb913c3e20a2f5fd70f1d8c3cf5a3fe Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Sat, 21 Dec 2024 23:11:55 +0100
Subject: [PATCH] refactor: remove all the props except id, serverid,
 isloading, and delete function

---
 .../preview-deployment-card.tsx               | 195 +++++++-----------
 .../show-preview-deployments.tsx              |  91 +++-----
 2 files changed, 105 insertions(+), 181 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx
index c5b381eb..4d61fdec 100644
--- a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx
@@ -1,134 +1,99 @@
-import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { Clock, GitBranch, GitPullRequest, Pencil } from "lucide-react";
+import { Clock, GitBranch, GitPullRequest } from "lucide-react";
 import Link from "next/link";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { api } from "@/utils/api";
 import { ShowPreviewBuilds } from "./show-preview-builds";
-import { RouterOutputs } from "@/utils/api";
-import { AddPreviewDomain } from "./add-preview-domain";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 
 interface PreviewDeploymentCardProps {
-  appName: string;
-  serverId: string;
-  onDeploymentDelete: (deploymentId: string) => void;
-  deploymentId: string;
-  deploymentUrl: string;
-  deployments: RouterOutputs["deployment"]["all"];
-
-  domainId: string;
-  domainHost: string;
-
-  pullRequestTitle: string;
-  pullRequestUrl: string;
-  status: "running" | "error" | "done" | "idle" | undefined | null;
-  branch: string;
-  date: string;
-  isLoading: boolean;
+	deploymentId: string;
+	serverId: string;
+	onDeploymentDelete: (deploymentId: string) => void;
+	isLoading: boolean;
 }
 
 export function PreviewDeploymentCard({
-  appName,
-  serverId,
-
-  onDeploymentDelete,
-  deploymentId,
-  deployments,
-
-  domainId,
-  domainHost,
-
-  pullRequestTitle,
-  pullRequestUrl,
-  isLoading,
-  status,
-  branch,
-  date,
+	deploymentId,
+	serverId,
+	onDeploymentDelete,
+	isLoading,
 }: PreviewDeploymentCardProps) {
-  return (
-    <div className="w-full border rounded-xl">
-      <div className="p-6 flex flex-row items-center justify-between">
-        <span className="text-lg font-bold">{pullRequestTitle}</span>
-        <Badge variant="outline" className="text-sm font-medium gap-x-2">
-          <StatusTooltip status={status} className="size-2.5" />
-          {status
-            ?.replace("running", "Running")
-            .replace("done", "Done")
-            .replace("error", "Error")
-            .replace("idle", "Idle") || "Idle"}
-        </Badge>
-      </div>
-      <div className="p-6 pt-0 space-y-4">
-        <div className="flex sm:flex-row flex-col items-center gap-2">
-          <div className="gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2">
-            <Link href={`http://${domainHost}`} target="_blank" className="text-sm text-blue-500/95 hover:underline">
-              {domainHost}
-            </Link>
-          </div>
-          <AddPreviewDomain
-            previewDeploymentId={deploymentId}
-            domainId={domainId}
-          >
-            <Button className="sm:w-auto w-full" size="sm" variant="outline">
-              <Pencil className="mr-2 size-4" />
-              Edit
-            </Button>
-          </AddPreviewDomain>
-        </div>
-        <div className="flex sm:flex-row text-sm flex-col items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <GitBranch className="h-5 w-5 text-gray-400" />
-            <span>Branch:</span>
-            <Badge className="p-2" variant={"blank"}>
-              {" "}
-              {branch}
-            </Badge>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Clock className="h-5 w-5 text-gray-400" />
-            <span>Deployed: </span>
-            <Badge className="p-2" variant={"blank"}>
-              <DateTooltip date={date} />
-            </Badge>
-          </div>
-        </div>
-        <Separator />
-        <div className="rounded-lg bg-muted p-4">
-          <h3 className="mb-2 text-sm font-medium">Pull Request</h3>
-          <div className="flex items-center space-x-2 text-sm text-muted-foreground">
-            <GitPullRequest className="h-5 w-5 text-gray-400" />
-            <Link
-              className="hover:text-blue-500/95 hover:underline"
-              target="_blank"
-              href={pullRequestUrl}
-            >
-              {pullRequestTitle}
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className="justify-center flex-wrap p-6 pt-0">
-        <div className="flex flex-wrap justify-end gap-2">
-          <ShowPreviewBuilds deployments={deployments} serverId={serverId} />
+	const { data: previewDeployment } = api.previewDeployment.one.useQuery({
+		previewDeploymentId: deploymentId,
+	});
 
-          <ShowModalLogs appName={appName} serverId={serverId}>
-            <Button className="sm:w-auto w-full" variant="outline" size="sm">
-              View Logs
-            </Button>
-          </ShowModalLogs>
+	if (!previewDeployment) return null;
 
-          <DialogAction
-            title="Delete Preview"
-            description="Are you sure you want to delete this preview?"
-            onClick={() => onDeploymentDelete(deploymentId)}
-          >
-            <Button
-              className="sm:w-auto w-full"
-              variant="destructive"
-              isLoading={isLoading}
+	return (
+		<div className="w-full border rounded-xl">
+			<div className="p-6 flex flex-row items-center justify-between">
+				<span className="text-lg font-bold">{previewDeployment.pullRequestTitle}</span>
+				<Badge variant="outline" className="text-sm font-medium gap-x-2">
+					{previewDeployment.previewStatus || "Idle"}
+				</Badge>
+			</div>
+			<div className="p-6 pt-0 space-y-4">
+				<div className="flex sm:flex-row flex-col items-center gap-2">
+					<Link
+						href={`http://${previewDeployment.domain?.host}`}
+						target="_blank"
+						className="text-sm text-blue-500/95 hover:underline"
+					>
+						{previewDeployment.domain?.host}
+					</Link>
+				</div>
+				<div className="flex sm:flex-row text-sm flex-col items-center justify-between">
+					<div className="flex items-center space-x-2">
+						<GitBranch className="h-5 w-5 text-gray-400" />
+						<span>Branch:</span>
+						<Badge className="p-2" variant={"blank"}>
+							{previewDeployment.branch}
+						</Badge>
+					</div>
+					<div className="flex items-center space-x-2">
+						<Clock className="h-5 w-5 text-gray-400" />
+						<span>Deployed:</span>
+						<Badge className="p-2" variant={"blank"}>
+              <DateTooltip date={previewDeployment.createdAt} />
+						</Badge>
+					</div>
+				</div>
+				<Separator />
+				<div className="rounded-lg bg-muted p-4">
+					<h3 className="mb-2 text-sm font-medium">Pull Request</h3>
+					<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+						<GitPullRequest className="h-5 w-5 text-gray-400" />
+						<Link
+							className="hover:text-blue-500/95 hover:underline"
+							target="_blank"
+							href={previewDeployment.pullRequestURL}
+						>
+							{previewDeployment.pullRequestTitle}
+						</Link>
+					</div>
+				</div>
+			</div>
+			<div className="justify-center flex-wrap p-6 pt-0">
+				<div className="flex flex-wrap justify-end gap-2">
+          <ShowPreviewBuilds deployments={previewDeployment.deployments || []} serverId={serverId} />
+					<ShowModalLogs appName={previewDeployment.appName} serverId={serverId}>
+						<Button className="sm:w-auto w-full" variant="outline" size="sm">
+							View Logs
+						</Button>
+					</ShowModalLogs>
+					<DialogAction
+						title="Delete Preview"
+						description="Are you sure you want to delete this preview?"
+						onClick={() => onDeploymentDelete(deploymentId)}
+					>
+						<Button
+							className="sm:w-auto w-full"
+							variant="destructive"
+							isLoading={isLoading}
               size="sm"
             >
               Delete Preview
diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
index 0c060afd..fbcc9a72 100644
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
@@ -26,27 +26,21 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 			{ applicationId },
 			{
 				enabled: !!applicationId,
-			},
+			}
 		);
 
-
-  const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
-      deletePreviewDeployment({
-        previewDeploymentId: previewDeploymentId,
-      })
-        .then(() => {
-          refetchPreviewDeployments();
-          toast.success("Preview deployment deleted");
-        })
-        .catch((error) => {
-          toast.error(error.message);
-        });
-    };  
-
-	// const [url, setUrl] = React.useState("");
-	// useEffect(() => {
-	// 	setUrl(document.location.origin);
-	// }, []);
+	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
+		deletePreviewDeployment({
+			previewDeploymentId: previewDeploymentId,
+		})
+			.then(() => {
+				refetchPreviewDeployments();
+				toast.success("Preview deployment deleted");
+			})
+			.catch((error) => {
+				toast.error(error.message);
+			});
+	};
 
 	return (
 		<Card className="bg-background">
@@ -62,13 +56,6 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 			<CardContent className="flex flex-col gap-4">
 				{data?.isPreviewDeploymentsActive ? (
 					<>
-						<div className="flex flex-col gap-2 text-sm">
-							<span>
-								Preview deployments are a way to test your application before it
-								is deployed to production. It will create a new deployment for
-								each pull request you create.
-							</span>
-						</div>
 						{data?.previewDeployments?.length === 0 ? (
 							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 								<RocketIcon className="size-8 text-muted-foreground" />
@@ -78,46 +65,18 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 							</div>
 						) : (
 							<div className="flex flex-col gap-4">
-								{previewDeployments?.map((previewDeployment) => {
-									const { deployments, domain } = previewDeployment;
-
-                  return (
-                    <div className="flex justify-between gap-2 w-full">
-                      <div className="flex w-full flex-col gap-2">
-                        {deployments?.length === 0 ? (
-                          <div>
-                            <span className="text-sm text-muted-foreground">
-                              No deployments found
-                            </span>
-                          </div>
-                        ) : (
-                          <PreviewDeploymentCard
-                            key={previewDeployment?.previewDeploymentId || ""}
-                            appName={previewDeployment.appName}
-                            serverId={data?.serverId || ""}
-                            onDeploymentDelete={handleDeletePreviewDeployment}
-                            deploymentId={previewDeployment.previewDeploymentId}
-                            deploymentUrl={`http://${domain?.host}`}
-                            deployments={previewDeployment?.deployments || []}
-                            domainId={domain?.domainId || ""}
-                            domainHost={domain?.host || ""}
-                            pullRequestTitle={
-                              previewDeployment?.pullRequestTitle || ""
-                            }
-                            pullRequestUrl={previewDeployment?.pullRequestURL || ""}
-                            status={previewDeployment.previewStatus}
-                            branch={previewDeployment?.branch || ""}
-                            date={previewDeployment?.createdAt || ""}
-                            isLoading={isLoading}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </>
+								{previewDeployments?.map((previewDeployment) => (
+									<PreviewDeploymentCard
+										key={previewDeployment.previewDeploymentId}
+										deploymentId={previewDeployment.previewDeploymentId}
+										serverId={data?.serverId || ""}
+										onDeploymentDelete={handleDeletePreviewDeployment}
+										isLoading={isLoading}
+									/>
+								))}
+							</div>
+						)}
+					</>
 				) : (
 					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 						<RocketIcon className="size-8 text-muted-foreground" />