refactor: remove all the props except id, serverid, isloading, and delete function

apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx

@@ -1,97 +1,64 @@
-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;
+	deploymentId: 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;
 }
 
 export function PreviewDeploymentCard({
-  appName,
-  serverId,
-
-  onDeploymentDelete,
 	deploymentId,
-  deployments,
-
-  domainId,
-  domainHost,
-
-  pullRequestTitle,
-  pullRequestUrl,
+	serverId,
+	onDeploymentDelete,
 	isLoading,
-  status,
-  branch,
-  date,
 }: PreviewDeploymentCardProps) {
+	const { data: previewDeployment } = api.previewDeployment.one.useQuery({
+		previewDeploymentId: deploymentId,
+	});
+
+	if (!previewDeployment) return null;
+
 	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>
+				<span className="text-lg font-bold">{previewDeployment.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"}
+					{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">
-          <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}
+					<Link
+						href={`http://${previewDeployment.domain?.host}`}
+						target="_blank"
+						className="text-sm text-blue-500/95 hover:underline"
 					>
-            <Button className="sm:w-auto w-full" size="sm" variant="outline">
-              <Pencil className="mr-2 size-4" />
-              Edit
-            </Button>
-          </AddPreviewDomain>
+						{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"}>
-              {" "}
-              {branch}
+							{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={date} />
+              <DateTooltip date={previewDeployment.createdAt} />
 						</Badge>
 					</div>
 				</div>
@@ -103,23 +70,21 @@ export function PreviewDeploymentCard({
 						<Link
 							className="hover:text-blue-500/95 hover:underline"
 							target="_blank"
-              href={pullRequestUrl}
+							href={previewDeployment.pullRequestURL}
 						>
-              {pullRequestTitle}
+							{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={deployments} serverId={serverId} />
-
-          <ShowModalLogs appName={appName} serverId={serverId}>
+          <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?"

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx

@@ -26,10 +26,9 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 			{ applicationId },
 			{
 				enabled: !!applicationId,
-			},
+			}
 		);
 
-
 	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
 		deletePreviewDeployment({
 			previewDeploymentId: previewDeploymentId,
@@ -43,11 +42,6 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 			});
 	};
 
-	// const [url, setUrl] = React.useState("");
-	// useEffect(() => {
-	// 	setUrl(document.location.origin);
-	// }, []);
-
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
@@ -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,43 +65,15 @@ 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>
-                        ) : (
+								{previewDeployments?.map((previewDeployment) => (
 									<PreviewDeploymentCard
-                            key={previewDeployment?.previewDeploymentId || ""}
-                            appName={previewDeployment.appName}
+										key={previewDeployment.previewDeploymentId}
+										deploymentId={previewDeployment.previewDeploymentId}
 										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>
 						)}
 					</>