♻️(frontend) one click create doc

We can now create a doc in one click.
The doc will be created with a default name,
the user will be able to edit the name inline.

src/frontend/apps/impress/src/__tests__/pages.test.tsx

@@ -5,6 +5,14 @@ import { AppWrapper } from '@/tests/utils';
 
 import Page from '../pages';
 
+jest.mock('next/navigation', () => ({
+  useRouter() {
+    return {
+      push: jest.fn(),
+    };
+  },
+}));
+
 describe('Page', () => {
   it('checks Page rendering', () => {
     render(<Page />, { wrapper: AppWrapper });

src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts

@@ -1,3 +1,4 @@
+export * from './useCreateDoc';
 export * from './useDoc';
 export * from './useDocs';
 export * from './useUpdateDoc';

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx

@@ -1,33 +1,34 @@
 import { Button } from '@openfun/cunningham-react';
-import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Card } from '@/components';
-import { ModalCreateDoc } from '@/features/docs/doc-management';
+import { Box } from '@/components';
+import { useCreateDoc, useTrans } from '@/features/docs/doc-management/';
 
 import { DocsGrid } from './DocsGrid';
 
 export const DocsGridContainer = () => {
   const { t } = useTranslation();
-  const [isModalCreateOpen, setIsModalCreateOpen] = useState(false);
+  const { untitledDocument } = useTrans();
+  const router = useRouter();
+
+  const { mutate: createDoc } = useCreateDoc({
+    onSuccess: (doc) => {
+      router.push(`/docs/${doc.id}`);
+    },
+  });
+
+  const handleCreateDoc = () => {
+    createDoc({ title: untitledDocument });
+  };
 
   return (
     <Box $overflow="auto">
-      <Card $margin="big" $padding="tiny">
-        <Box $align="flex-end" $justify="center">
-          <Button
-            onClick={() => {
-              setIsModalCreateOpen(true);
-            }}
-          >
-            {t('Create a new document')}
-          </Button>
-        </Box>
-      </Card>
+      <Box $align="flex-end" $justify="center" $margin="big">
+        <Button onClick={handleCreateDoc}>{t('Create a new document')}</Button>
+      </Box>
       <DocsGrid />
-      {isModalCreateOpen && (
-        <ModalCreateDoc onClose={() => setIsModalCreateOpen(false)} />
-      )}
     </Box>
   );
 };