From 0e93d8447b5f427b6f1767dd64e9d4eb34b91290 Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Tue, 5 Mar 2024 16:18:44 +0200
Subject: [PATCH] chore(SLB-218): code style, typescript fixes and success
 messages after submit

---
 apps/website/src/templates/contact.tsx        |   2 +-
 apps/website/src/utils/drupal-executor.ts     |   8 +-
 .../schema/src/operations/ContactRequest.gql  |   6 +-
 .../src/components/Molecules/ContactForm.tsx  | 206 ++++++++++--------
 packages/ui/src/utils/operation.ts            |  48 ++--
 tests/schema/specs/contact.spec.ts            |  32 ++-
 6 files changed, 167 insertions(+), 135 deletions(-)

diff --git a/apps/website/src/templates/contact.tsx b/apps/website/src/templates/contact.tsx
index 77f8e781b..09dbe50e5 100644
--- a/apps/website/src/templates/contact.tsx
+++ b/apps/website/src/templates/contact.tsx
@@ -2,5 +2,5 @@ import { Contact } from '@custom/ui/routes/Contact';
 import React from 'react';
 
 export default function ContentHubPage() {
-  return <Contact />
+  return <Contact />;
 }
diff --git a/apps/website/src/utils/drupal-executor.ts b/apps/website/src/utils/drupal-executor.ts
index 0dfc1ad6d..e90218389 100644
--- a/apps/website/src/utils/drupal-executor.ts
+++ b/apps/website/src/utils/drupal-executor.ts
@@ -15,18 +15,18 @@ export function drupalExecutor(endpoint: string, forward: boolean = true) {
           method: 'POST',
           credentials: 'include',
           body: JSON.stringify({
-            'queryId': id,
-            'variables': variables.variables,
+            queryId: id,
+            variables: variables.variables,
           }),
           headers: forward
             ? {
                 'SLB-Forwarded-Proto': window.location.protocol.slice(0, -1),
                 'SLB-Forwarded-Host': window.location.hostname,
                 'SLB-Forwarded-Port': window.location.port,
-                "Content-Type": "application/json",
+                'Content-Type': 'application/json',
               }
             : {
-                "Content-Type": "application/json",
+                'Content-Type': 'application/json',
               },
         })
       ).json();
diff --git a/packages/schema/src/operations/ContactRequest.gql b/packages/schema/src/operations/ContactRequest.gql
index 8cf6c09e6..878063452 100644
--- a/packages/schema/src/operations/ContactRequest.gql
+++ b/packages/schema/src/operations/ContactRequest.gql
@@ -1,6 +1,4 @@
-mutation ContactRequest (
-  $contact: ContactInput
-){
+mutation ContactRequest($contact: ContactInput) {
   createContact(contact: $contact) {
     errors {
       key
@@ -14,4 +12,4 @@ mutation ContactRequest (
       subject
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/ui/src/components/Molecules/ContactForm.tsx b/packages/ui/src/components/Molecules/ContactForm.tsx
index e5e8f52d6..be4c3eeda 100644
--- a/packages/ui/src/components/Molecules/ContactForm.tsx
+++ b/packages/ui/src/components/Molecules/ContactForm.tsx
@@ -20,99 +20,121 @@ export function ContactForm() {
   const { register, handleSubmit } = useForm<FormValue>();
 
   const { data, trigger, isMutating } = useMutation(ContactRequestMutation);
-  const errorMessages = (!isMutating && data && data.createContact?.errors && data.createContact.errors.length > 0 ) ?
-    data.createContact.errors.map(error => {
-      return error?.message || '';
-    })
-  :
-  null;
+  const errorMessages =
+    !isMutating &&
+    data &&
+    data.createContact?.errors &&
+    data.createContact.errors.length > 0
+      ? data.createContact.errors.map((error) => {
+          return error?.message || '';
+        })
+      : null;
+  const successMessages =
+    !isMutating && data && data.createContact?.contact
+      ? [
+          intl.formatMessage({
+            defaultMessage: 'The contact has been submitted.',
+            id: 'gD5ZU1',
+          }),
+        ]
+      : null;
+
   return (
-    <div>
-      { errorMessages ? <Messages messages={errorMessages} /> : null}
-      <form
-        className="mt-5 sm:items-center"
-        onSubmit={handleSubmit((values) => {
-          // @todo: fix this
-          // @ts-ignore
-          trigger({
-            contact: values,
-          });
-        })}
-      >
-        <div className="w-full sm:max-w-sm">
-          <label htmlFor="name" className="sr-only">
-            {intl.formatMessage({
-              defaultMessage: 'Name',
-              id: 'HAlOn1',
-            })}
-          </label>
-          <input
-            {...register('name', { required: true })}
-            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-            placeholder={intl.formatMessage({
-              defaultMessage: 'Name',
-              id: 'HAlOn1',
-            })}
-          />
-        </div>
-        <div className="w-full sm:max-w-sm pt-2">
-          <label htmlFor="email" className="sr-only">
-            {intl.formatMessage({
-              defaultMessage: 'Email',
-              id: 'sy+pv5',
-            })}
-          </label>
-          <input
-            {...register('email', { required: true })}
-            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-            placeholder={intl.formatMessage({
-              defaultMessage: 'Email',
-              id: 'sy+pv5',
-            })}
-          />
-        </div>
-        <div className="w-full sm:max-w-sm pt-2">
-          <label htmlFor="subject" className="sr-only">
-            {intl.formatMessage({
-              defaultMessage: 'Subject',
-              id: 'LLtKhp',
-            })}
-          </label>
-          <input
-            {...register('subject')}
-            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-            placeholder={intl.formatMessage({
-              defaultMessage: 'Subject',
-              id: 'LLtKhp',
-            })}
-          />
-        </div>
-        <div className="w-full sm:max-w-sm pt-2">
-          <label htmlFor="message" className="sr-only">
-            {intl.formatMessage({
-              defaultMessage: 'Message',
-              id: 'T7Ry38',
-            })}
-          </label>
-          <textarea
-            {...register('message', { required: true })}
-            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-            placeholder={intl.formatMessage({
-              defaultMessage: 'Message',
-              id: 'T7Ry38',
-            })}
-          />
-        </div>
-        <div className="w-full pt-2">
-          <button
-            type="submit"
-            disabled={isMutating}
-            className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:ml-3 sm:mt-0 sm:w-auto"
-          >
-            {isMutating ? intl.formatMessage({ defaultMessage: 'Sending...', id: '82Y7Sa' }) : intl.formatMessage({ defaultMessage: 'Submit', id: 'wSZR47' })}
-          </button>
-        </div>
-      </form>
+    <div className="bg-white shadow sm:rounded-lg">
+      <div className="px-4 py-5 sm:p-6">
+        {errorMessages ? <Messages messages={errorMessages} /> : null}
+        {successMessages ? <Messages messages={successMessages} /> : null}
+        <form
+          className="mt-5 sm:items-center"
+          onSubmit={handleSubmit((values) => {
+            trigger({
+              contact: values,
+            });
+          })}
+        >
+          <div className="w-full sm:max-w-sm">
+            <label htmlFor="name" className="sr-only">
+              {intl.formatMessage({
+                defaultMessage: 'Name',
+                id: 'HAlOn1',
+              })}
+            </label>
+            <input
+              {...register('name', { required: true })}
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              placeholder={intl.formatMessage({
+                defaultMessage: 'Name',
+                id: 'HAlOn1',
+              })}
+            />
+          </div>
+          <div className="w-full sm:max-w-sm pt-2">
+            <label htmlFor="email" className="sr-only">
+              {intl.formatMessage({
+                defaultMessage: 'Email',
+                id: 'sy+pv5',
+              })}
+            </label>
+            <input
+              {...register('email', { required: true })}
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              placeholder={intl.formatMessage({
+                defaultMessage: 'Email',
+                id: 'sy+pv5',
+              })}
+            />
+          </div>
+          <div className="w-full sm:max-w-sm pt-2">
+            <label htmlFor="subject" className="sr-only">
+              {intl.formatMessage({
+                defaultMessage: 'Subject',
+                id: 'LLtKhp',
+              })}
+            </label>
+            <input
+              {...register('subject')}
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              placeholder={intl.formatMessage({
+                defaultMessage: 'Subject',
+                id: 'LLtKhp',
+              })}
+            />
+          </div>
+          <div className="w-full sm:max-w-sm pt-2">
+            <label htmlFor="message" className="sr-only">
+              {intl.formatMessage({
+                defaultMessage: 'Message',
+                id: 'T7Ry38',
+              })}
+            </label>
+            <textarea
+              {...register('message', { required: true })}
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              placeholder={intl.formatMessage({
+                defaultMessage: 'Message',
+                id: 'T7Ry38',
+              })}
+            />
+          </div>
+          <div className="w-full pt-2">
+            <button
+              type="submit"
+              disabled={isMutating}
+              className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:ml-3 sm:mt-0 sm:w-auto"
+            >
+              {isMutating
+                ? intl.formatMessage({
+                    defaultMessage: 'Sending...',
+                    id: '82Y7Sa',
+                  })
+                : intl.formatMessage({
+                    defaultMessage: 'Submit',
+                    id: 'wSZR47',
+                  })}
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   );
 }
diff --git a/packages/ui/src/utils/operation.ts b/packages/ui/src/utils/operation.ts
index e4c0460b0..2d442ead4 100644
--- a/packages/ui/src/utils/operation.ts
+++ b/packages/ui/src/utils/operation.ts
@@ -7,18 +7,15 @@ import {
 import useSwr, { SWRResponse } from 'swr';
 import useSWRMutation, { SWRMutationResponse } from 'swr/mutation';
 
-function swrFetcher<TOperation extends AnyOperationId>(
-  operationMetadata: {
-    operation: TOperation,
-    variables?: OperationVariables<TOperation>,
-  },
-) {
-  const executor = createExecutor(operationMetadata.operation, {
+function swrFetcher<TOperation extends AnyOperationId>(operationMetadata: {
+  operation: string;
+  variables?: OperationVariables<TOperation>;
+}) {
+  const executor = createExecutor(operationMetadata.operation as TOperation, {
     variables: operationMetadata.variables,
   });
-  if (typeof executor === 'function') {
-    // @todo: fix this.
-    // @ts-ignore
+
+  if (executor instanceof Function) {
     return executor();
   }
   // If the executor is not a function, then just return it. This means the
@@ -27,18 +24,14 @@ function swrFetcher<TOperation extends AnyOperationId>(
 }
 
 function swrMutator<TOperation extends AnyOperationId>(
-  operationMetadata: {
-    operation: TOperation,
-  },
+  operation: string,
   args?: OperationVariables<TOperation>,
 ) {
-  const executor = createExecutor(operationMetadata.operation, {
+  const executor = createExecutor(operation as TOperation, {
     graphqlOperationType: 'mutation',
     variables: args?.arg,
   });
-  if (typeof executor === 'function') {
-    // @todo: fix this.
-    // @ts-ignore
+  if (executor instanceof Function) {
     return executor();
   }
   return executor;
@@ -49,7 +42,7 @@ export function useOperation<TOperation extends AnyOperationId>(
   variables?: OperationVariables<TOperation>,
 ): SWRResponse<OperationResult<TOperation>> {
   return useSwr<OperationResult<TOperation>>(
-    {operation, variables},
+    { operation, variables },
     swrFetcher,
     {
       suspense: false,
@@ -59,11 +52,16 @@ export function useOperation<TOperation extends AnyOperationId>(
 
 export function useMutation<TOperation extends AnyOperationId>(
   operation: TOperation,
-): SWRMutationResponse<OperationResult<TOperation>> {
-  return useSWRMutation<OperationResult<TOperation>>(
-    {operation},
-    // @todo: fix this.
-    // @ts-ignore
-    swrMutator,
-  );
+): SWRMutationResponse<
+  OperationResult<TOperation>,
+  string,
+  string,
+  OperationVariables<TOperation>
+> {
+  return useSWRMutation<
+    OperationResult<TOperation>,
+    string,
+    string,
+    OperationVariables<TOperation>
+  >(operation, swrMutator);
 }
diff --git a/tests/schema/specs/contact.spec.ts b/tests/schema/specs/contact.spec.ts
index b207a5e85..4d4a91c30 100644
--- a/tests/schema/specs/contact.spec.ts
+++ b/tests/schema/specs/contact.spec.ts
@@ -1,13 +1,20 @@
 import gql from 'noop-tag';
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest';
 
 import { fetch } from '../lib.js';
 
 describe('create contact', () => {
-  it ('creates a new contact using a graphql mutation', async () => {
+  it('creates a new contact using a graphql mutation', async () => {
     const result = await fetch(gql`
       mutation {
-        createContact(contact: {name: "John Doe", email: "john@doe.com", message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquam magna.", subject: "Lorem ipsum"}) {
+        createContact(
+          contact: {
+            name: "John Doe"
+            email: "john@doe.com"
+            message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquam magna."
+            subject: "Lorem ipsum"
+          }
+        ) {
           errors {
             key
             field
@@ -36,13 +43,20 @@ describe('create contact', () => {
           },
         },
       }
-    `)
-  })
+    `);
+  });
 
-  it ('tries to create a new contact with an invalid e-mail address', async() => {
+  it('tries to create a new contact with an invalid e-mail address', async () => {
     const result = await fetch(gql`
       mutation {
-        createContact(contact: {name: "Jane", email: "invalid_email", message: "Test message.", subject: "Test subject"}) {
+        createContact(
+          contact: {
+            name: "Jane"
+            email: "invalid_email"
+            message: "Test message."
+            subject: "Test subject"
+          }
+        ) {
           errors {
             key
             field
@@ -57,7 +71,7 @@ describe('create contact', () => {
         }
       }
     `);
-  expect(result).toMatchInlineSnapshot(`
+    expect(result).toMatchInlineSnapshot(`
     {
       "data": {
         "createContact": {
@@ -72,6 +86,6 @@ describe('create contact', () => {
         },
       },
     }
-  `)
+  `);
   });
 });