diff --git a/src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailbox.tsx b/src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailbox.tsx index cf39dfb..967ba16 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailbox.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailbox.tsx @@ -1,5 +1,3 @@ -import { UUID } from 'crypto'; - import { UseMutationOptions, useMutation, @@ -16,14 +14,14 @@ export interface CreateMailboxParams { local_part: string; secondary_email: string; phone_number: string; - mailDomainId: UUID; + mailDomainSlug: string; } export const createMailbox = async ({ - mailDomainId, + mailDomainSlug, ...data }: CreateMailboxParams): Promise => { - const response = await fetchAPI(`mail-domains/${mailDomainId}/mailboxes/`, { + const response = await fetchAPI(`mail-domains/${mailDomainSlug}/mailboxes/`, { method: 'POST', body: JSON.stringify(data), }); @@ -37,7 +35,7 @@ export const createMailbox = async ({ } }; -type UseCreateMailboxParams = { domainId: UUID } & UseMutationOptions< +type UseCreateMailboxParams = { mailDomainSlug: string } & UseMutationOptions< void, APIError, CreateMailboxParams @@ -49,7 +47,10 @@ export function useCreateMailbox(options: UseCreateMailboxParams) { mutationFn: createMailbox, onSuccess: (data, variables, context) => { void queryClient.invalidateQueries({ - queryKey: [KEY_LIST_MAILBOX, { id: variables.mailDomainId }], + queryKey: [ + KEY_LIST_MAILBOX, + { mailDomainSlug: variables.mailDomainSlug }, + ], }); if (options?.onSuccess) { options.onSuccess(data, variables, context); 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 index 3a0c0c8..aa2c450 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx @@ -5,19 +5,19 @@ import { APIError, errorCauses, fetchAPI } from '@/api'; import { MailDomain } from '../types'; export type MailDomainParams = { - id: string; + slug: string; }; type MailDomainResponse = MailDomain; export const getMailDomain = async ({ - id, + slug, }: MailDomainParams): Promise => { - const response = await fetchAPI(`mail-domains/${id}`); + const response = await fetchAPI(`mail-domains/${slug}`); if (!response.ok) { throw new APIError( - `Failed to get the mail domain ${id}`, + `Failed to get the mail domain ${slug}`, await errorCauses(response), ); } diff --git a/src/frontend/apps/desk/src/features/mail-domains/api/useMailboxes.tsx b/src/frontend/apps/desk/src/features/mail-domains/api/useMailboxes.tsx index 910d3f7..dcf55a9 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/api/useMailboxes.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/api/useMailboxes.tsx @@ -5,7 +5,7 @@ import { APIError, APIList, errorCauses, fetchAPI } from '@/api'; import { MailDomainMailbox } from '../types'; export type MailDomainMailboxesParams = { - id: string; + mailDomainSlug: string; page: number; ordering?: string; }; @@ -13,11 +13,11 @@ export type MailDomainMailboxesParams = { type MailDomainMailboxesResponse = APIList; export const getMailDomainMailboxes = async ({ - id, + mailDomainSlug, page, ordering, }: MailDomainMailboxesParams): Promise => { - let url = `mail-domains/${id}/mailboxes/?page=${page}`; + let url = `mail-domains/${mailDomainSlug}/mailboxes/?page=${page}`; if (ordering) { url += '&ordering=' + ordering; @@ -27,7 +27,7 @@ export const getMailDomainMailboxes = async ({ if (!response.ok) { throw new APIError( - `Failed to get the mailboxes of mail domain ${id}`, + `Failed to get the mailboxes of mail domain ${mailDomainSlug}`, await errorCauses(response), ); } diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx index 2fdb807..2d6f1ae 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx @@ -46,10 +46,11 @@ function formatSortModel( export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) { const [sortModel, setSortModel] = useState([]); - const { t } = useTranslation(); const [isCreateMailboxFormVisible, setIsCreateMailboxFormVisible] = useState(false); + const { t } = useTranslation(); + const pagination = usePagination({ defaultPage: 1, pageSize: PAGE_SIZE, @@ -59,7 +60,7 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) { const ordering = sortModel.length ? formatSortModel(sortModel[0]) : undefined; const { data, isLoading, error } = useMailboxes({ - id: mailDomain.id, + mailDomainSlug: mailDomain.slug, page, ordering, }); diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx index bd8e56d..8f3cbdf 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx @@ -60,7 +60,7 @@ export const CreateMailboxForm = ({ }); const { mutate: createMailbox, ...queryState } = useCreateMailbox({ - domainId: mailDomain.id, + mailDomainSlug: mailDomain.slug, onSuccess: () => { toast(t('Mailbox created!'), VariantType.SUCCESS, { duration: 4000, @@ -75,7 +75,7 @@ export const CreateMailboxForm = ({ const onSubmitCallback = (event: React.FormEvent) => { event.preventDefault(); void methods.handleSubmit((data) => - createMailbox({ ...data, mailDomainId: mailDomain.id }), + createMailbox({ ...data, mailDomainSlug: mailDomain.slug }), )(); }; 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 3c1c97e..c9db2e4 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: { id }, + query: { slug }, } = useRouter(); - const isActive = mailDomain.id === id; + const isActive = mailDomain.slug === slug; const activeStyle = ` border-right: 4px solid ${colorsTokens()['primary-600']}; @@ -51,7 +51,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => { > { const router = useRouter(); - if (router?.query?.id && typeof router.query.id !== 'string') { - throw new Error('Invalid mail domain id'); + if (router?.query?.slug && typeof router.query.slug !== 'string') { + throw new Error('Invalid mail domain slug'); } - const { id } = router.query; + const { slug } = router.query; const navigate = useNavigate(); @@ -25,7 +25,7 @@ const Page: NextPageWithLayout = () => { error: error, isError, isLoading: isLoading, - } = useMailDomain({ id: String(id) }); + } = useMailDomain({ slug: String(slug) }); if (error?.status === 404) { navigate.replace(`/404`);