chore(SLB-218): code style, typescript fixes and success messages aft…

…er submit
AmazeeLabs · Mar 5, 2024 · 0e93d84 · 0e93d84
1 parent e41a7b0
commit 0e93d84
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 135 deletions.
diff --git 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
@@ -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
@@ -1,6 +1,4 @@
-mutation ContactRequest (
-  $contact: ContactInput
-){
+mutation ContactRequest($contact: ContactInput) {
   createContact(contact: $contact) {
     errors {
       key
@@ -14,4 +12,4 @@ mutation ContactRequest (
       subject
     }
   }
-}
+}
diff --git 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
@@ -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);
 }