✨(app-desk) add /mail-domains/<id> page

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.

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,
+  });
+}

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']};

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;