From e13ecdd38d8405bf152edce6bab0dfc9b5527b17 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 16 Apr 2024 16:55:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=94(app-impress)=20save=20the=20templa?=
 =?UTF-8?q?tes=20editor=20automatically?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On almost each change in the code editor,
the template is saved automatically.
It will restore as well the editor when we arrive
on the template editor page.
---
 .../app-impress/template-editor.spec.ts       | 33 ++++++++++++++
 .../api/useUpdateTemplateCodeEditor.tsx       | 39 ++++++++++++++++
 .../template/components/TemplateEditor.tsx    | 44 ++++++++++++++++++-
 .../src/features/templates/template/types.tsx |  3 ++
 .../apps/impress/src/pages/templates/[id].tsx | 13 +++++-
 5 files changed, 129 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
index e8ea725a..5e5b2735 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
@@ -26,4 +26,37 @@ test.describe('Template Editor', () => {
       page.locator('.gjs-editor .gjs-block[title="Text"]'),
     ).toBeVisible();
   });
+
+  test('checks the template editor save on changed', async ({
+    page,
+    browserName,
+  }) => {
+    const randomTemplate = await createTemplate(
+      page,
+      'template-editor',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    const iframe = page.frameLocator('iFrame.gjs-frame');
+
+    await page.getByTitle('Open Blocks').click();
+    await page
+      .locator('.gjs-editor .gjs-block[title="Text"]')
+      .dragTo(iframe.locator('body.gjs-dashed'));
+
+    await iframe.getByText('Insert your text here').fill('Hello World');
+    await iframe.locator('body.gjs-dashed').click();
+
+    // Come on the page again to check the changes are saved
+    await page.locator('menu').first().getByLabel(`Template button`).click();
+    const panel = page.getByLabel('Templates panel').first();
+    await panel.locator('li').getByText(randomTemplate[0]).click();
+
+    await expect(iframe.getByText('Hello World')).toBeVisible({
+      timeout: 5000,
+    });
+  });
 });
diff --git a/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx b/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx
new file mode 100644
index 00000000..520ae8eb
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx
@@ -0,0 +1,39 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { Template } from '../types';
+
+type UpdateTemplateProps = Pick<Template, 'code_editor' | 'id'>;
+
+export const updateTemplateCodeEditor = async ({
+  code_editor,
+  id,
+}: UpdateTemplateProps): Promise<Template> => {
+  const response = await fetchAPI(`templates/${id}/`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      code_editor,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to update the template',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<Template>;
+};
+
+export function useUpdateTemplateCodeEditor(
+  onSuccess?: (data: Template) => void,
+) {
+  return useMutation<Template, APIError, UpdateTemplateProps>({
+    mutationFn: updateTemplateCodeEditor,
+    onSuccess: (data) => {
+      onSuccess?.(data);
+    },
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
index 22277202..466dfdb6 100644
--- a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
+++ b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
@@ -2,6 +2,7 @@ import GjsEditor from '@grapesjs/react';
 import grapesjs, { Editor, ProjectData } from 'grapesjs';
 import 'grapesjs/dist/css/grapes.min.css';
 import pluginBlocksBasic from 'grapesjs-blocks-basic';
+import { useEffect, useState } from 'react';
 
 import { Card, Text } from '@/components';
 
@@ -13,7 +14,44 @@ interface TemplateEditorProps {
 }
 
 export const TemplateEditor = ({ template }: TemplateEditorProps) => {
-  const onEditor = (editor: Editor) => {};
+  const { mutate: updateCodeEditor } = useUpdateTemplateCodeEditor();
+  const [editor, setEditor] = useState<Editor>();
+
+  useEffect(() => {
+    if (!editor?.loadProjectData) {
+      return;
+    }
+
+    editor.loadProjectData(template.code_editor);
+  }, [template.code_editor, editor]);
+
+  useEffect(() => {
+    editor?.Storage.add('remote', {
+      load() {
+        return Promise.resolve(template.code_editor);
+      },
+      store(data: ProjectData) {
+        updateCodeEditor({
+          code_editor: data,
+          id: template.id,
+        });
+        return Promise.resolve();
+      },
+    });
+  }, [editor, template.code_editor, template.id, updateCodeEditor]);
+
+  const onEditor = (editor: Editor) => {
+    setEditor(editor);
+
+    editor?.Storage.add('remote', {
+      load() {
+        return Promise.resolve(template.code_editor);
+      },
+      store() {
+        return Promise.resolve();
+      },
+    });
+  };
 
   return (
     <>
@@ -24,7 +62,9 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
         <GjsEditor
           grapesjs={grapesjs}
           options={{
-            storageManager: false,
+            storageManager: {
+              type: 'remote',
+            },
           }}
           plugins={[(editor) => pluginBlocksBasic(editor, {})]}
           onEditor={onEditor}
diff --git a/src/frontend/apps/impress/src/features/templates/template/types.tsx b/src/frontend/apps/impress/src/features/templates/template/types.tsx
index d184bc56..9fb581ba 100644
--- a/src/frontend/apps/impress/src/features/templates/template/types.tsx
+++ b/src/frontend/apps/impress/src/features/templates/template/types.tsx
@@ -1,3 +1,5 @@
+import { ProjectData } from 'grapesjs';
+
 export enum Role {
   MEMBER = 'member',
   ADMIN = 'administrator',
@@ -27,5 +29,6 @@ export interface Template {
     update: boolean;
   };
   accesses: Access[];
+  code_editor: ProjectData;
   title: string;
 }
diff --git a/src/frontend/apps/impress/src/pages/templates/[id].tsx b/src/frontend/apps/impress/src/pages/templates/[id].tsx
index 039df579..65adab07 100644
--- a/src/frontend/apps/impress/src/pages/templates/[id].tsx
+++ b/src/frontend/apps/impress/src/pages/templates/[id].tsx
@@ -26,7 +26,18 @@ interface TemplateProps {
 }
 
 const Template = ({ id }: TemplateProps) => {
-  const { data: template, isLoading, isError, error } = useTemplate({ id });
+  const {
+    data: template,
+    isLoading,
+    isError,
+    error,
+  } = useTemplate(
+    { id },
+    {
+      queryKey: ['template', { id }],
+      staleTime: 0,
+    },
+  );
   const navigate = useNavigate();
 
   if (isError && error) {