@@ -119,6 +133,9 @@ export const AdminMailboxDataGrid = ({ domain }: AdminUserDataGridProps) => {
undefined}
/>
{canManageMailboxes && (
{
+type AdminDomainPageContentProps = {
+ pagination: ReturnType;
+}
+
+export const AdminDomainPageContent = ({ pagination }: AdminDomainPageContentProps) => {
const { t } = useTranslation();
const { selectedMailDomain, isLoading } = useAdminMailDomain();
@@ -23,5 +28,5 @@ export const AdminDomainPageContent = () => {
);
}
- return ;
+ return ;
}
diff --git a/src/frontend/src/features/layouts/components/admin/modal-create-address/index.tsx b/src/frontend/src/features/layouts/components/admin/modal-create-address/index.tsx
index 4f1149c9..3d4fc272 100644
--- a/src/frontend/src/features/layouts/components/admin/modal-create-address/index.tsx
+++ b/src/frontend/src/features/layouts/components/admin/modal-create-address/index.tsx
@@ -37,9 +37,10 @@ const slugify = (text: string): string => {
type ModalCreateAddressProps = {
isOpen: boolean;
onClose: () => void;
+ onCreate: () => void;
}
-export const ModalCreateAddress = ({ isOpen, onClose }: ModalCreateAddressProps) => {
+export const ModalCreateAddress = ({ isOpen, onClose, onCreate }: ModalCreateAddressProps) => {
const { t } = useTranslation();
const router = useRouter();
const domainId = router.query.maildomainId as string;
@@ -209,6 +210,7 @@ export const ModalCreateAddress = ({ isOpen, onClose }: ModalCreateAddressProps)
const response = await createMailbox({ maildomainPk: domainId, data: payload }, );
refetchMailboxes();
setCreatedMailbox(response.data);
+ onCreate();
} catch (error: unknown) {
if (error instanceof APIError && error.data.local_part) {
setError("create_address_modal.api_errors.prefix_exists");
diff --git a/src/frontend/src/features/layouts/components/admin/modal-manage-accesses/index.tsx b/src/frontend/src/features/layouts/components/admin/modal-manage-accesses/index.tsx
index 42d1bee5..796b1ed7 100644
--- a/src/frontend/src/features/layouts/components/admin/modal-manage-accesses/index.tsx
+++ b/src/frontend/src/features/layouts/components/admin/modal-manage-accesses/index.tsx
@@ -7,7 +7,7 @@ type ModalMailboxManageAccessesProps = {
domainId: string;
isOpen: boolean;
onClose: () => void;
- mailbox: MailboxAdmin | undefined;
+ mailbox: MailboxAdmin | null;
onAccessChange: () => void;
}
diff --git a/src/frontend/src/features/providers/admin-maildomain.tsx b/src/frontend/src/features/providers/admin-maildomain.tsx
index 6a955011..50586871 100644
--- a/src/frontend/src/features/providers/admin-maildomain.tsx
+++ b/src/frontend/src/features/providers/admin-maildomain.tsx
@@ -1,13 +1,15 @@
-import { createContext, PropsWithChildren, useContext, useEffect, useMemo, useState } from "react"
+import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from "react"
import { MailDomainAdmin } from "../api/gen/models/mail_domain_admin";
-import { useMaildomainsList } from "../api/gen";
+import { useMaildomainsList, useMaildomainsRetrieve } from "../api/gen";
import { useRouter } from "next/router";
+import { usePagination } from "@openfun/cunningham-react";
type AdminMailDomainContextType = {
selectedMailDomain: MailDomainAdmin | null;
mailDomains: MailDomainAdmin[];
isLoading: boolean;
error: unknown | null;
+ pagination: ReturnType;
}
const AdminMailDomainContext = createContext(undefined)
@@ -17,24 +19,24 @@ const AdminMailDomainContext = createContext {
- const { data: maildomainsData, isLoading, error } = useMaildomainsList();
const router = useRouter();
- const [selectedMailDomain, setSelectedMailDomain] = useState(null);
+ const pagination = usePagination({ pageSize: 20 });
+ const { data: maildomainsData, isLoading: isLoadingList, error: listError } = useMaildomainsList({ page: pagination.page });
+ const { data: selectedMaildomainData, isLoading: isLoadingItem, error: itemError } = useMaildomainsRetrieve(
+ router.query.maildomainId as string, { query: { enabled: !!router.query.maildomainId } });
const context = useMemo(() => ({
- selectedMailDomain,
+ selectedMailDomain: selectedMaildomainData?.data || null,
mailDomains: maildomainsData?.data.results || [],
- isLoading,
- error,
- }), [selectedMailDomain, maildomainsData, isLoading]);
+ isLoading: isLoadingList || isLoadingItem,
+ error: listError || itemError,
+ pagination
+ }), [selectedMaildomainData, maildomainsData, isLoadingList, isLoadingItem, listError, itemError, pagination.page]);
useEffect(() => {
- if (router.query.maildomainId) {
- const maildomain = maildomainsData?.data.results?.find((maildomain) => maildomain.id === router.query.maildomainId);
- if (maildomain) {
- setSelectedMailDomain(maildomain);
- }
+ if (maildomainsData?.data.count) {
+ pagination.setPagesCount(Math.ceil(maildomainsData.data.count / pagination.pageSize));
}
- }, [router.query.maildomainId, maildomainsData]);
+ }, [maildomainsData?.data.count, pagination.pageSize, pagination.setPagesCount]);
return (
{children}
diff --git a/src/frontend/src/pages/domain/[maildomainId]/index.tsx b/src/frontend/src/pages/domain/[maildomainId]/index.tsx
index ed714e20..1d3c7138 100644
--- a/src/frontend/src/pages/domain/[maildomainId]/index.tsx
+++ b/src/frontend/src/pages/domain/[maildomainId]/index.tsx
@@ -1,17 +1,25 @@
import { AdminLayout } from "@/features/layouts/components/admin/admin-layout";
import { CreateMailboxAction } from "@/features/layouts/components/admin/mailboxes-view/create-mailbox-action";
import { AdminDomainPageContent } from "@/features/layouts/components/admin/mailboxes-view/page-content";
+import { usePagination } from "@openfun/cunningham-react";
/**
* Admin page which list all mailboxes for a given domain and allow to manage them.
*/
-export default function AdminDomainPage() {
+export default function AdminDomainMailboxesPage() {
+ const pagination = usePagination({ pageSize: 20 });
+
+ const handleCreateMailbox = () => {
+ pagination.setPage(1);
+ pagination.setPagesCount(undefined)
+ }
+
return (
}
+ actions={}
>
-
+
);
}
diff --git a/src/frontend/src/pages/domain/index.tsx b/src/frontend/src/pages/domain/index.tsx
index dbed4ff1..3b50dd99 100644
--- a/src/frontend/src/pages/domain/index.tsx
+++ b/src/frontend/src/pages/domain/index.tsx
@@ -1,5 +1,5 @@
import { useEffect } from "react";
-import { DataGrid } from "@openfun/cunningham-react";
+import { DataGrid, usePagination } from "@openfun/cunningham-react";
import { useRouter } from "next/router";
import { useTranslation } from "react-i18next";
import { Spinner } from "@gouvfr-lasuite/ui-kit";
@@ -11,10 +11,11 @@ import useAbility, { Abilities } from "@/hooks/use-ability";
import { Banner } from "@/features/ui/components/banner";
type AdminDataGridProps = {
+ pagination: ReturnType;
domains: MailDomainAdmin[];
}
-function AdminDataGrid({ domains }: AdminDataGridProps) {
+function AdminDataGrid({ domains, pagination }: AdminDataGridProps) {
const router = useRouter();
const { t, i18n } = useTranslation();
@@ -48,6 +49,9 @@ function AdminDataGrid({ domains }: AdminDataGridProps) {
undefined}
/>
);
@@ -56,7 +60,7 @@ function AdminDataGrid({ domains }: AdminDataGridProps) {
const AdminPageContent = () => {
const router = useRouter();
const { t } = useTranslation();
- const { mailDomains, isLoading, error } = useAdminMailDomain();
+ const { mailDomains, isLoading, error, pagination } = useAdminMailDomain();
const canCreateMaildomain = useAbility(Abilities.CAN_CREATE_MAILDOMAINS);
const shouldRedirect = !canCreateMaildomain && !isLoading && mailDomains.length === 1;
@@ -91,7 +95,7 @@ const AdminPageContent = () => {