🐛(frontend) fix issue when no template

A bug occured when no template was
available. This commit fixes this issue.

src/frontend/apps/impress/src/features/docs/doc-tools/components/DocToolBox.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, DropButton, IconOptions, Text } from '@/components';
@@ -12,8 +12,6 @@ import {
 import { ModalAddMembers } from '@/features/docs/members/members-add';
 import { ModalGridMembers } from '@/features/docs/members/members-grid/';
 
-import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
-
 import { ModalPDF } from './ModalPDF';
 
 interface DocToolBoxProps {
@@ -22,9 +20,6 @@ interface DocToolBoxProps {
 
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { t } = useTranslation();
-  const { data: templates } = useTemplates({
-    ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
-  });
   const [isModalAddMembersOpen, setIsModalAddMembersOpen] = useState(false);
   const [isModalGridMembersOpen, setIsModalGridMembersOpen] = useState(false);
   const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
@@ -32,23 +27,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
   const [isDropOpen, setIsDropOpen] = useState(false);
 
-  const templateOptions = useMemo(() => {
-    if (!templates?.pages) {
-      return [];
-    }
-
-    const templateOptions = templates.pages
-      .map((page) =>
-        page.results.map((template) => ({
-          label: template.title,
-          value: template.id,
-        })),
-      )
-      .flat();
-
-    return templateOptions;
-  }, [templates?.pages]);
-
   return (
     <Box $margin="big" $position="absolute" $css="right:1rem;">
       <DropButton
@@ -141,11 +119,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
         />
       )}
       {isModalPDFOpen && (
-        <ModalPDF
-          onClose={() => setIsModalPDFOpen(false)}
-          templateOptions={templateOptions}
-          doc={doc}
-        />
+        <ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
       )}
       {isModalUpdateOpen && (
         <ModalUpdateDoc onClose={() => setIsModalUpdateOpen(false)} doc={doc} />

src/frontend/apps/impress/src/features/docs/doc-tools/components/ModalPDF.tsx

@@ -9,25 +9,25 @@ import {
   useToastProvider,
 } from '@openfun/cunningham-react';
 import { t } from 'i18next';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Box, Text } from '@/components';
 import { useDocStore } from '@/features/docs/doc-editor/';
 import { Doc } from '@/features/docs/doc-management';
 
 import { useCreatePdf } from '../api/useCreatePdf';
+import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { adaptBlockNoteHTML, downloadFile } from '../utils';
 
 interface ModalPDFProps {
   onClose: () => void;
-  templateOptions: {
-    label: string;
-    value: string;
-  }[];
   doc: Doc;
 }
 
-export const ModalPDF = ({ onClose, templateOptions, doc }: ModalPDFProps) => {
+export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
+  const { data: templates } = useTemplates({
+    ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
+  });
   const { toast } = useToastProvider();
   const { docsStore } = useDocStore();
   const {
@@ -38,9 +38,28 @@ export const ModalPDF = ({ onClose, templateOptions, doc }: ModalPDFProps) => {
     isPending,
     error,
   } = useCreatePdf();
-  const [templateIdSelected, setTemplateIdSelected] = useState<string>(
-    templateOptions?.[0].value,
-  );
+  const [templateIdSelected, setTemplateIdSelected] = useState<string>();
+
+  const templateOptions = useMemo(() => {
+    if (!templates?.pages) {
+      return [];
+    }
+
+    const templateOptions = templates.pages
+      .map((page) =>
+        page.results.map((template) => ({
+          label: template.title,
+          value: template.id,
+        })),
+      )
+      .flat();
+
+    if (templateOptions.length) {
+      setTemplateIdSelected(templateOptions[0].value);
+    }
+
+    return templateOptions;
+  }, [templates?.pages]);
 
   useEffect(() => {
     if (!error) {