118 lines
3.6 KiB
TypeScript
118 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { Domain, DomainStatus } from "@prisma/client";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
import Link from "next/link";
|
|
import { Switch } from "@unsend/ui/src/switch";
|
|
import { api } from "~/trpc/react";
|
|
import React from "react";
|
|
import { StatusIndicator } from "./status-indicator";
|
|
import { DomainStatusBadge } from "./domain-badge";
|
|
|
|
export default function DomainsList() {
|
|
const domainsQuery = api.domain.domains.useQuery();
|
|
|
|
return (
|
|
<div className="mt-10">
|
|
<div className="flex flex-col gap-6">
|
|
{!domainsQuery.isLoading && domainsQuery.data?.length ? (
|
|
domainsQuery.data?.map((domain) => (
|
|
<DomainItem key={domain.id} domain={domain} />
|
|
))
|
|
) : (
|
|
<div className="text-center mt-20">No domains Added</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
|
|
const updateDomain = api.domain.updateDomain.useMutation();
|
|
const utils = api.useUtils();
|
|
|
|
const [clickTracking, setClickTracking] = React.useState(
|
|
domain.clickTracking
|
|
);
|
|
const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
|
|
|
|
function handleClickTrackingChange() {
|
|
setClickTracking(!clickTracking);
|
|
updateDomain.mutate(
|
|
{ id: domain.id, clickTracking: !clickTracking },
|
|
{
|
|
onSuccess: () => {
|
|
utils.domain.domains.invalidate();
|
|
},
|
|
}
|
|
);
|
|
}
|
|
|
|
function handleOpenTrackingChange() {
|
|
setOpenTracking(!openTracking);
|
|
updateDomain.mutate(
|
|
{ id: domain.id, openTracking: !openTracking },
|
|
{
|
|
onSuccess: () => {
|
|
utils.domain.domains.invalidate();
|
|
},
|
|
}
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={domain.id}>
|
|
<div className=" pr-8 border rounded-lg flex items-stretch">
|
|
<StatusIndicator status={domain.status} />
|
|
<div className="flex justify-between w-full pl-8 py-4">
|
|
<div className="flex flex-col gap-4 w-1/5">
|
|
<Link
|
|
href={`/domains/${domain.id}`}
|
|
className="text-lg font-medium underline underline-offset-4 decoration-dashed"
|
|
>
|
|
{domain.name}
|
|
</Link>
|
|
<DomainStatusBadge status={domain.status} />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Created at</p>
|
|
<p className="text-sm">
|
|
{formatDistanceToNow(new Date(domain.createdAt), {
|
|
addSuffix: true,
|
|
})}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Region</p>
|
|
|
|
<p className="text-sm flex items-center gap-2">
|
|
<span className="text-2xl">🇺🇸</span> {domain.region}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex gap-2 items-center">
|
|
<p className="text-sm">Click tracking</p>
|
|
<Switch
|
|
checked={clickTracking}
|
|
onCheckedChange={handleClickTrackingChange}
|
|
className="data-[state=checked]:bg-emerald-500"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 items-center">
|
|
<p className="text-sm">Open tracking</p>
|
|
<Switch
|
|
checked={openTracking}
|
|
onCheckedChange={handleOpenTrackingChange}
|
|
className="data-[state=checked]:bg-emerald-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|