fix(frontend): use an action to trigger the preview (#240)

* fix(frontend): use an action to trigger the preview

* fix: update

.env

@@ -3,6 +3,7 @@
 ##
 ACCOUNT_EMAIL_WEBHOOK_URL=http://host.docker.internal:3000/api/webhooks/account
 PUBLICATION_WEBHOOK_URL=http://host.docker.internal:3000/api/webhooks/publication
+API_URL=http://host.docker.internal:3000/api
 
 ##
 ## frontend secrets

targets/frontend/src/gql/preview.gql.js

@@ -0,0 +1,5 @@
+export const previewContentAction = `
+mutation preview($data: PreviewDocument!) {
+  preview_document(data: $data)
+}
+`;

targets/frontend/src/pages/api/elasticcloud/preview.js → targets/frontend/src/pages/api/actions/preview.js

@@ -32,11 +32,18 @@ const fetchGlossary = memoizee(_fetchGlossary, {
 });
 
 export default async function (req, res) {
+  const { data } = req.body.input;
+
   if (
+    req.headers["preview-secret"] !== process.env.PUBLICATION_SECRET ||
     !process.env.ELASTICSEARCH_APIKEY_DEV ||
     !process.env.ELASTICSEARCH_URL_DEV
   ) {
-    res.status(304).json({ message: "not modified" });
+    return res.status(403).json({
+      error: "Forbidden",
+      message: "Missing secret or env",
+      statusCode: "403",
+    });
   }
 
   const glossary = await fetchGlossary();
@@ -48,23 +55,24 @@ export default async function (req, res) {
     node: `${process.env.ELASTICSEARCH_URL_DEV}`,
   });
 
-  const { cdtnId, source, document } = req.body;
   try {
     await client.update({
       body: {
-        doc: await transform(source, document, glossary),
+        doc: await transform(data.source, data.document, glossary),
       },
-      id: cdtnId,
+      id: data.cdtnId,
       index: `cdtn-preprod_documents`,
     });
-    res.json({ message: "doc updated!" });
+    res.json({ message: "doc updated!", statusCode: 200 });
   } catch (response) {
     if (response.body) {
       console.error(response.body.error);
     } else {
       console.error(response);
     }
-    res.status(response.statusCode).json({ message: response.body.error });
+    res
+      .status(response.statusCode)
+      .json({ message: response.body.error, statusCode: response.statusCode });
   }
 }
 

targets/frontend/src/pages/contenus/[id].js

@@ -8,9 +8,9 @@ import { Button } from "src/components/button";
 import { Layout } from "src/components/layout/auth.layout";
 import { Inline } from "src/components/layout/Inline";
 import { Stack } from "src/components/layout/Stack";
+import { previewContentAction } from "src/gql/preview.gql";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
-import { request } from "src/lib/request";
 import { Card, jsx, Message, NavLink } from "theme-ui";
 import { useMutation, useQuery } from "urql";
 
@@ -68,6 +68,7 @@ export function DocumentPage() {
   const [hasChanged, setHasChanged] = useState(false);
   const [submitIdle, setSubmitIdle] = useState(false);
   const [, executeUpdate] = useMutation(updateDocumentMutation);
+  const [, previewContent] = useMutation(previewContentAction);
   const { handleSubmit } = useForm();
 
   const jsonDoc = useRef(null);
@@ -93,13 +94,22 @@ export function DocumentPage() {
         text,
         title,
       } = data.document;
-      request("/api/elasticcloud/preview", {
-        body: {
-          cdtnId,
-          document: { ...document, metaDescription, text, title },
-          source,
+
+      previewContent({
+        cdtnId,
+        document: {
+          ...document,
+          metaDescription,
+          text,
+          title,
         },
+        source,
+      }).then((response) => {
+        if (response.errors) {
+          console.error("preview impossible", response.errors);
+        }
       });
+
       if (result.error) {
         console.error(result.error);
       }

targets/frontend/src/pages/contenus/edit/[id].js

@@ -9,6 +9,7 @@ import { EditorialContentForm } from "src/components/editorialContent/Form";
 import { Layout } from "src/components/layout/auth.layout";
 import { Inline } from "src/components/layout/Inline";
 import { Stack } from "src/components/layout/Stack";
+import { previewContentAction } from "src/gql/preview.gql";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
 import { jsx, Spinner } from "theme-ui";
@@ -19,6 +20,7 @@ query getEditorialContent($cdtnId: String!) {
   editorialContent: documents_by_pk(cdtn_id: $cdtnId) {
     cdtnId: cdtn_id
     title
+    source
     document
     metaDescription: meta_description
   }
@@ -43,6 +45,9 @@ mutation EditEditorialContent(
       text: $title
     }) {
     cdtnId: cdtn_id
+    slug
+    source
+    metaDescription: meta_description
   }
 }
 `;
@@ -70,6 +75,7 @@ export function EditInformationPage() {
   const [deleteResult, deleteEditorialContent] = useMutation(
     deleteEditorialContentMutation
   );
+  const [, previewContent] = useMutation(previewContentAction);
 
   async function onSubmit({ title, metaDescription, document }) {
     const result = await editEditorialContent({
@@ -79,6 +85,22 @@ export function EditInformationPage() {
       slug: slugify(title),
       title,
     });
+
+    previewContent({
+      cdtn_id: result.cdtnId,
+      document: {
+        ...document,
+        metaDescription: result.metaDescription,
+        slug: result.slug,
+        title,
+      },
+      source: result.source,
+    }).then((response) => {
+      if (response.errors) {
+        console.error("preview impossible", response.errors);
+      }
+    });
+
     if (!result.error) {
       router.back();
     }

targets/hasura/.k8s/hasura.values.yml

@@ -37,6 +37,8 @@ deployment:
       value: http://www:3000/api/webhooks/account
     - name: PUBLICATION_WEBHOOK_URL
       value: http://www:3000/api/webhooks/publication
+    - name: API_URL
+      value: http://www:3000/api
 
   envFrom:
     - secretRef:

targets/hasura/metadata/actions.graphql

@@ -1,2 +1,20 @@
+type Mutation {
+  preview_document (
+    data: PreviewDocument!
+  ): Status
+}
 
 
+
+
+input PreviewDocument {
+  cdtn_id : String
+  document : jsonb
+  source : String
+}
+
+type Status {
+  message : String!
+  statusCode : Int!
+}
+

targets/hasura/metadata/actions.yaml

@@ -1,6 +1,17 @@
-actions: []
+actions:
+- name: preview_document
+  definition:
+    kind: synchronous
+    handler: '{{API_URL}}/actions/preview'
+    headers:
+    - name: preview-secret
+      value_from_env: PUBLICATION_SECRET
+  permissions:
+  - role: user
 custom_types:
   enums: []
-  input_objects: []
-  objects: []
+  input_objects:
+  - name: PreviewDocument
+  objects:
+  - name: Status
   scalars: []