From d4e0f74d3010b8eb538f683f6862f6cc0f303259 Mon Sep 17 00:00:00 2001
From: daproclaima <sebastien@devedanos.com>
Date: Mon, 13 May 2024 19:20:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20add=20/mail-domains/<id>?=
 =?UTF-8?q?=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a page in charge of finding the mail domain
matching the id provided in url query params.
In the future the domain name will be used.
---
 .../mail-domains/api/useMailDomain.tsx        | 43 +++++++++++++++
 .../components/panel/PanelItem.tsx            |  4 +-
 .../apps/desk/src/pages/mail-domains/[id].tsx | 54 +++++++++++++++++++
 3 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/mail-domains/[id].tsx

diff --git a/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx b/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx
new file mode 100644
index 0000000..3a0c0c8
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx
@@ -0,0 +1,43 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { MailDomain } from '../types';
+
+export type MailDomainParams = {
+  id: string;
+};
+
+type MailDomainResponse = MailDomain;
+
+export const getMailDomain = async ({
+  id,
+}: MailDomainParams): Promise<MailDomainResponse> => {
+  const response = await fetchAPI(`mail-domains/${id}`);
+
+  if (!response.ok) {
+    throw new APIError(
+      `Failed to get the mail domain ${id}`,
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<MailDomainResponse>;
+};
+
+const KEY_MAIL_DOMAIN = 'mail-domain';
+
+export function useMailDomain(
+  param: MailDomainParams,
+  queryConfig?: UseQueryOptions<
+    MailDomainResponse,
+    APIError,
+    MailDomainResponse
+  >,
+) {
+  return useQuery<MailDomainResponse, APIError, MailDomainResponse>({
+    queryKey: [KEY_MAIL_DOMAIN, param],
+    queryFn: () => getMailDomain(param),
+    ...queryConfig,
+  });
+}
diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx
index ea81dd4..84febdc 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx
@@ -15,10 +15,10 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
   const {
-    query: { name },
+    query: { id },
   } = useRouter();
 
-  const isActive = mailDomain.id === name;
+  const isActive = mailDomain.id === id;
 
   const activeStyle = `
     border-right: 4px solid ${colorsTokens()['primary-600']};
diff --git a/src/frontend/apps/desk/src/pages/mail-domains/[id].tsx b/src/frontend/apps/desk/src/pages/mail-domains/[id].tsx
new file mode 100644
index 0000000..08207ad
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/mail-domains/[id].tsx
@@ -0,0 +1,54 @@
+import { Loader } from '@openfun/cunningham-react';
+import { useRouter as useNavigate } from 'next/navigation';
+import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { TextErrors } from '@/components/TextErrors';
+import { MailDomainsContent, MailDomainsLayout } from '@/features/mail-domains';
+import { useMailDomain } from '@/features/mail-domains/api/useMailDomain';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  const router = useRouter();
+
+  if (router?.query?.id && typeof router.query.id !== 'string') {
+    throw new Error('Invalid mail domain id');
+  }
+
+  const { id } = router.query;
+
+  const navigate = useNavigate();
+
+  const {
+    data: mailDomain,
+    error: error,
+    isError,
+    isLoading: isLoading,
+  } = useMailDomain({ id: String(id) });
+
+  if (error?.status === 404) {
+    navigate.replace(`/404`);
+    return null;
+  }
+
+  if (isError && error) {
+    return <TextErrors causes={error?.cause} />;
+  }
+
+  if (isLoading) {
+    return (
+      <Box $align="center" $justify="center" $height="100%">
+        <Loader />
+      </Box>
+    );
+  } else {
+    return mailDomain ? <MailDomainsContent mailDomain={mailDomain} /> : null;
+  }
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MailDomainsLayout>{page}</MailDomainsLayout>;
+};
+
+export default Page;