Make refresh work

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

@@ -1,32 +0,0 @@
-import { redirect } from "next/navigation";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import { internal } from "@app/lib/api";
-import { GetDomainResponse } from "@server/routers/domain/getDomain";
-import { AxiosResponse } from "axios";
-import DomainProvider from "@app/providers/DomainProvider";
-
-interface SettingsLayoutProps {
-  children: React.ReactNode;
-  params: Promise<{ domainId: string; orgId: string }>;
-}
-
-export default async function SettingsLayout({ children, params }: SettingsLayoutProps) {
-  const { domainId, orgId } = await params;
-  let domain = null;
-
-  try {
-    const res = await internal.get<AxiosResponse<GetDomainResponse>>(
-      `/org/${orgId}/domain/${domainId}`,
-      await authCookieHeader()
-    );
-    domain = res.data.data;
-  } catch {
-    redirect(`/${orgId}/settings/domains`);
-  }
-
-  return (
-    <DomainProvider domain={domain} orgId={orgId}>
-      {children}
-    </DomainProvider>
-  );
-}

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

@@ -1,75 +1,53 @@
-"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 { useDomain } from "@app/contexts/domainContext";
-import { useTranslations } from "next-intl";
+import RestartDomainButton from "@app/components/RestartDomainButton";
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+import { pullEnv } from "@app/lib/pullEnv";
+import { getTranslations } from "next-intl/server";
+import RefreshButton from "@app/components/RefreshButton";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { GetDNSRecordsResponse } from "@server/routers/domain";
+import DNSRecordsTable from "@app/components/DNSRecordTable";
+import DomainCertForm from "@app/components/DomainCertForm";
 
-export default function DomainSettingsPage() {
-    const { domain, orgId } = useDomain();
-    const router = useRouter();
-    const api = createApiClient(useEnvContext());
-    const [isRefreshing, setIsRefreshing] = useState(false);
-    const [restartingDomains, setRestartingDomains] = useState<Set<string>>(
-        new Set()
-    );
-    const t = useTranslations();
-    const { env } = useEnvContext();
+interface DomainSettingsPageProps {
+    params: Promise<{ domainId: string; orgId: string }>;
+}
 
-    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);
-        }
-    };
+export default async function DomainSettingsPage({
+    params
+}: DomainSettingsPageProps) {
+    const { domainId, orgId } = await params;
+    const t = await getTranslations();
+    const env = pullEnv();
 
-    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;
-            });
-        }
-    };
+    let domain: GetDomainResponse | null = null;
+    try {
+        const res = await internal.get(
+            `/org/${orgId}/domain/${domainId}`,
+            await authCookieHeader()
+        );
+        domain = res.data.data;
+    } catch {
+        return null;
+    }
+
+    let dnsRecords;
+    try {
+        const response = await internal.get(
+            `/org/${orgId}/domain/${domainId}/dns-records`,
+            await authCookieHeader()
+        );
+        dnsRecords = response.data.data;
+    } catch (error) {
+        return null;
+    }
 
     if (!domain) {
         return null;
     }
 
-    const isRestarting = restartingDomains.has(domain.domainId);
-
     return (
         <>
             <div className="flex justify-between">
@@ -77,32 +55,31 @@ export default function DomainSettingsPage() {
                     title={domain.baseDomain}
                     description={t("domainSettingDescription")}
                 />
-                {env.flags.usePangolinDns && (
-                    <Button
-                        variant="outline"
-                        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>
+                {env.flags.usePangolinDns && domain.failed ? (
+                    <RestartDomainButton
+                        orgId={orgId}
+                        domainId={domain.domainId}
+                    />
+                ) : (
+                    <RefreshButton />
                 )}
             </div>
             <div className="space-y-6">
-                <DomainInfoCard orgId={orgId} domainId={domain.domainId} />
+                <DomainInfoCard
+                    failed={domain.failed}
+                    verified={domain.verified}
+                    type={domain.type}
+                />
+
+                <DNSRecordsTable records={dnsRecords} type={domain.type} />
+
+                {domain.type == "wildcard" && (
+                    <DomainCertForm
+                        orgId={orgId}
+                        domainId={domain.domainId}
+                        domain={domain}
+                    />
+                )}
             </div>
         </>
     );