add restart button

src/app/[orgId]/settings/domains/[domainId]/DomainSettingsLayout.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useState } from "react";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { useRouter } from "next/navigation";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@app/components/ui/button";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import DomainInfoCard from "@app/components/DomainInfoCard";
+import DomainProvider from "@app/providers/DomainProvider";
+import { useTranslations } from "next-intl";
+
+
+interface DomainSettingsLayoutProps {
+  orgId: string;
+  domain: any,
+  children: React.ReactNode;
+}
+
+export default function DomainSettingsLayout({ orgId, domain, children }: DomainSettingsLayoutProps) {
+  const router = useRouter();
+  const api = createApiClient(useEnvContext());
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [restartingDomains, setRestartingDomains] = useState<Set<string>>(new Set());
+  const t = useTranslations();
+  const refreshData = async () => {
+    setIsRefreshing(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      router.refresh();
+    } catch {
+      toast({
+        title: t("error"),
+        description: t("refreshError"),
+        variant: "destructive",
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const restartDomain = async (domainId: string) => {
+    setRestartingDomains((prev) => new Set(prev).add(domainId));
+    try {
+      await api.post(`/org/${orgId}/domain/${domainId}/restart`);
+      toast({
+        title: t("success"),
+        description: t("domainRestartedDescription", {
+          fallback: "Domain verification restarted successfully",
+        }),
+      });
+      refreshData();
+    } catch (e) {
+      toast({
+        title: t("error"),
+        description: formatAxiosError(e),
+        variant: "destructive",
+      });
+    } finally {
+      setRestartingDomains((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(domainId);
+        return newSet;
+      });
+    }
+  };
+
+  const isRestarting = restartingDomains.has(domain.domainId);
+
+  return (
+    <>
+      <div className="flex items-center justify-between mb-6">
+        <SettingsSectionTitle
+          title={domain ? domain.baseDomain : t("domainSetting")}
+          description={t("domainSettingDescription")}
+        />
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => restartDomain(domain.domainId)}
+          disabled={isRestarting}
+        >
+          {isRestarting ? (
+            <>
+              <RefreshCw
+                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+              />
+              {t("restarting", { fallback: "Restarting..." })}
+            </>
+          ) : (
+            <>
+              <RefreshCw
+                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+              />
+              {t("restart", { fallback: "Restart" })}
+            </>
+          )}
+        </Button>
+      </div>
+
+      <DomainProvider domain={domain}>
+        <div className="space-y-6">
+          <DomainInfoCard orgId={orgId} domainId={domain.domainId} />
+        </div>
+        {children}
+      </DomainProvider>
+    </>
+  );
+}

src/app/[orgId]/settings/domains/[domainId]/layout.tsx

@@ -1,50 +1,38 @@
-import { internal } from "@app/lib/api";
-import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
-import { getTranslations } from "next-intl/server";
 import { GetDomainResponse } from "@server/routers/domain/getDomain";
-import DomainProvider from "@app/providers/DomainProvider";
+import { AxiosResponse } from "axios";
-import DomainInfoCard from "@app/components/DomainInfoCard";
+import { getTranslations } from "next-intl/server";
+import SettingsLayoutClient from "./DomainSettingsLayout";
 
 interface SettingsLayoutProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
-    params: Promise<{ domainId: string; orgId: string }>;
+  params: Promise<{ domainId: string; orgId: string }>;
 }
 
-export default async function SettingsLayout(props: SettingsLayoutProps) {
+export default async function SettingsLayout({ children, params }: SettingsLayoutProps) {
-    const params = await props.params;
+  const { domainId, orgId } = await params;
 
-    const { children } = props;
+  let domain = null;
-
+  try {
-    let domain = null;
+    const res = await internal.get<AxiosResponse<GetDomainResponse>>(
-    try {
+      `/org/${orgId}/domain/${domainId}`,
-        const res = await internal.get<AxiosResponse<GetDomainResponse>>(
+      await authCookieHeader()
-            `/org/${params.orgId}/domain/${params.domainId}`,
-            await authCookieHeader()
-        );
-        domain = res.data.data;
-        console.log(JSON.stringify(domain));
-    } catch {
-        redirect(`/${params.orgId}/settings/domains`);
-    }
-
-    const t = await getTranslations();
-
-
-    return (
-        <>
-            <SettingsSectionTitle
-                title={domain ? domain.baseDomain : t('domainSetting')}
-                description={t('domainSettingDescription')}
-            />
-
-            <DomainProvider domain={domain}>
-                <div className="space-y-6">
-                    <DomainInfoCard orgId={params.orgId} domainId={params.domainId} />
-                </div>
-            </DomainProvider>
-        </>
     );
+    domain = res.data.data;
+  } catch {
+    redirect(`/${orgId}/settings/domains`);
+  }
+
+  const t = await getTranslations();
+
+  return (
+    <SettingsLayoutClient
+      orgId={orgId}
+      domain={domain}
+    >
+      {children}
+    </SettingsLayoutClient>
+  );
 }