From d32206b8bfdd8ebbc9ec91e5bf0e011c2a969fe7 Mon Sep 17 00:00:00 2001
From: roshni73 <roshani.poudel@togglecorp.com>
Date: Wed, 20 Nov 2024 16:39:07 +0545
Subject: [PATCH] Add mutation for register

---
 src/components/Navbar/index.tsx               |   3 -
 src/components/NonFiledError/i18n.json        |   6 +
 src/components/NonFiledError/index.tsx        |  65 +++++++
 .../NonFiledError/styles.module.css           |  21 +++
 src/utils/errorTransform.ts                   |  86 +++++++++
 src/utils/user.ts                             |  31 ----
 src/views/Register/i18n.json                  |   4 +-
 src/views/Register/index.tsx                  | 166 ++++++++++++------
 8 files changed, 289 insertions(+), 93 deletions(-)
 create mode 100644 src/components/NonFiledError/i18n.json
 create mode 100644 src/components/NonFiledError/index.tsx
 create mode 100644 src/components/NonFiledError/styles.module.css
 create mode 100644 src/utils/errorTransform.ts
 delete mode 100644 src/utils/user.ts

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index e9ab985f..1511ed72 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -19,7 +19,6 @@ import UserContext from '#contexts/user';
 import { LogoutMutation } from '#generated/types/graphql';
 import useAuth from '#hooks/domain/useAuth';
 import useAlert from '#hooks/useAlert';
-import useAuth from '#hooks/useAuth';
 
 import LangaugeDropdown from './LanguageDropdown';
 
@@ -76,8 +75,6 @@ function Navbar(props: Props) {
             },
         },
     );
-
-    const { isAuthenticated } = useAuth();
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
diff --git a/src/components/NonFiledError/i18n.json b/src/components/NonFiledError/i18n.json
new file mode 100644
index 00000000..557f515b
--- /dev/null
+++ b/src/components/NonFiledError/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "fallbackMessage":"Please correct all the errors before submission!"
+    }
+}
diff --git a/src/components/NonFiledError/index.tsx b/src/components/NonFiledError/index.tsx
new file mode 100644
index 00000000..8602c693
--- /dev/null
+++ b/src/components/NonFiledError/index.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { AlertLineIcon } from '@ifrc-go/icons';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    _cs,
+    isFalsyString,
+    isNotDefined,
+} from '@togglecorp/fujs';
+import {
+    analyzeErrors,
+    Error,
+    getErrorObject,
+    nonFieldError,
+} from '@togglecorp/toggle-form';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export interface Props<T> {
+    className?: string;
+    error?: Error<T>;
+    withFallbackError?: boolean;
+}
+
+function NonFieldError<T>(props: Props<T>) {
+    const {
+        className,
+        error,
+        withFallbackError,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const errorObject = useMemo(() => getErrorObject(error), [error]);
+
+    if (isNotDefined(errorObject)) {
+        return null;
+    }
+
+    const hasError = analyzeErrors(errorObject);
+    if (!hasError) {
+        return null;
+    }
+
+    const stringError = errorObject?.[nonFieldError] || (
+        withFallbackError ? strings.fallbackMessage : undefined);
+
+    if (isFalsyString(stringError)) {
+        return null;
+    }
+
+    return (
+        <div className={_cs(
+            styles.nonFieldError,
+            className,
+        )}
+        >
+            <AlertLineIcon className={styles.icon} />
+            <div>
+                {stringError}
+            </div>
+        </div>
+    );
+}
+
+export default NonFieldError;
diff --git a/src/components/NonFiledError/styles.module.css b/src/components/NonFiledError/styles.module.css
new file mode 100644
index 00000000..b3e469f0
--- /dev/null
+++ b/src/components/NonFiledError/styles.module.css
@@ -0,0 +1,21 @@
+.non-field-error {
+    display: inline-flex;
+    gap: var(--go-ui-spacing-sm);
+    align-items: baseline;
+    animation: flash var(--go-ui-duration-animation-fast) ease-in-out;
+    animation-delay: var(--go-ui-duration-animation-slow);
+    color: var(--go-ui-color-red);
+    font-size: var(--go-ui-font-size-lg);
+    font-weight: var(--go-ui-font-weight-medium);
+
+    .icon {
+        flex-shrink: 0;
+        /* font-size: var(--go-ui-height-icon-multiplier); */
+    }
+}
+
+@keyframes flash {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
diff --git a/src/utils/errorTransform.ts b/src/utils/errorTransform.ts
new file mode 100644
index 00000000..a8a15385
--- /dev/null
+++ b/src/utils/errorTransform.ts
@@ -0,0 +1,86 @@
+import {
+    isDefined,
+    isNotDefined,
+    listToMap,
+} from '@togglecorp/fujs';
+import { nonFieldError } from '@togglecorp/toggle-form';
+
+export interface Error {
+    [ nonFieldError]?: string | undefined;
+    [key: string]: string | Error | undefined;
+}
+
+export interface ObjectError {
+    // clientId is sent by the server for bulk updates
+    clientId: string | undefined;
+
+    field: string;
+    messages?: string;
+    objectErrors?: ObjectError[];
+    arrayErrors?: (ArrayError | null)[];
+}
+
+interface ArrayError {
+    clientId: string;
+    messages?: string;
+    objectErrors?: ObjectError[];
+}
+
+function transformObject(errors: ObjectError[] | undefined): Error | undefined {
+    if (isNotDefined(errors)) {
+        return undefined;
+    }
+
+    const topLevelError = errors.find((error) => error.field === 'nonFieldErrors');
+    const finalNonFieldErrors = topLevelError?.messages;
+
+    const fieldErrors = errors.filter((error) => error.field !== 'nonFieldErrors');
+    const finalFieldErrors: Error = listToMap(
+        fieldErrors,
+        (error) => error.field,
+        (error) => {
+            if (isDefined(error.messages)) {
+                return error.messages;
+            }
+            const objectErrors = isDefined(error.objectErrors)
+                ? transformObject(error.objectErrors)
+                : undefined;
+
+            const arrayErrors = isDefined(isDefined(error.arrayErrors))
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                ? transformArray(error.arrayErrors)
+                : undefined;
+
+            if (!objectErrors && !arrayErrors) {
+                return undefined;
+            }
+            return { ...objectErrors, ...arrayErrors };
+        },
+    );
+
+    return {
+        [nonFieldError]: finalNonFieldErrors,
+        ...finalFieldErrors,
+    };
+}
+
+function transformArray(errors: (ArrayError | null)[] | undefined): Error | undefined {
+    if (isNotDefined(errors)) {
+        return undefined;
+    }
+    const filteredErrors = errors.filter(isDefined);
+
+    const topLevelError = filteredErrors.find((error) => error.clientId === 'nonMemberErrors');
+    const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
+
+    return {
+        [nonFieldError]: topLevelError?.messages,
+        ...listToMap(
+            memberErrors,
+            (error) => error.clientId,
+            (error) => transformObject(error.objectErrors),
+        ),
+    };
+}
+
+export const transformToFormError = transformObject;
diff --git a/src/utils/user.ts b/src/utils/user.ts
deleted file mode 100644
index 59f9315a..00000000
--- a/src/utils/user.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-    isNotDefined,
-    isTruthyString,
-} from '@togglecorp/fujs';
-
-interface User {
-    firstName: string | undefined | null;
-    lastName: string | undefined | null;
-    displayName: string;
-}
-
-// eslint-disable-next-line import/prefer-default-export
-export function getUserName(user: User | undefined) {
-    if (isNotDefined(user)) {
-        return 'Unknown user';
-    }
-
-    const name = [user.firstName, user.lastName].filter(isTruthyString).join(' ');
-    if (isTruthyString(name)) {
-        return name;
-    }
-
-    // NOTE: Username can also be email
-    // so stripping out the domain part
-    const index = user.displayName.indexOf('@');
-    if (index === -1) {
-        return user.displayName;
-    }
-
-    return user.displayName.substring(0, index);
-}
diff --git a/src/views/Register/i18n.json b/src/views/Register/i18n.json
index edf53516..5d3b31b5 100644
--- a/src/views/Register/i18n.json
+++ b/src/views/Register/i18n.json
@@ -15,6 +15,8 @@
         "registerConfirmPassword": "Confirm Password",
         "registerSubmit": "Register",
         "registerAccountPresent": "Already have an account? {loginLink}",
-        "registerLogin": "Login"
+        "registerLogin": "Login",
+        "registrationSuccess": "Successfully created a user!",
+        "registrationFailure": "Sorry could not register new user right now!"
     }
 }
diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
index ef9f6f77..6df7dec4 100644
--- a/src/views/Register/index.tsx
+++ b/src/views/Register/index.tsx
@@ -1,4 +1,8 @@
 import { useState } from 'react';
+import {
+    gql,
+    useMutation,
+} from '@apollo/client';
 import {
     Button,
     SelectInput,
@@ -11,7 +15,10 @@ import {
     addCondition,
     createSubmitHandler,
     emailCondition,
+    getErrorObject,
+    nonFieldError,
     type ObjectSchema,
+    removeNull,
     requiredStringCondition,
     undefinedValue,
     useForm,
@@ -19,7 +26,14 @@ import {
 
 import HCaptcha from '#components/Captcha';
 import Link from '#components/Link';
+import NonFieldError from '#components/NonFiledError';
 import Page from '#components/Page';
+import {
+    RegisterMutation,
+    RegisterMutationVariables,
+} from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import { transformToFormError } from '#utils/errorTransform';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -34,9 +48,20 @@ interface DefaultFormValue {
     city: string;
     organization: string;
     organization_type: string;
-    captcha?:string;
+    captcha?: string;
 }
 
+const REGISTER_MUTATION = gql`
+    mutation Register($data: UserRegisterInput!) {
+        public {
+            register(data: $data){
+                    errors
+                    ok
+            }
+        }
+    }
+`;
+
 function getPasswordMatchCondition(referenceVal: string | undefined) {
     return (val: string | undefined) => (
         isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal
@@ -45,47 +70,15 @@ function getPasswordMatchCondition(referenceVal: string | undefined) {
     );
 }
 
-const organizationTypes = [
-    { id: '101', key: 'NTLS', value: 'National Society' },
-    { id: '102', key: 'NGO', value: 'Non-Governmental Organization' },
-    { id: '103', key: 'UN', value: 'United Nations Agency' },
-];
-const nationalSocietyOptions = [
-    { id: '201', society_name: 'Red Cross Society' },
-    { id: '202', society_name: 'Red Crescent Society' },
-];
-const countryOptions = [
-    { id: '301', value: 'United States' },
-    { id: '302', value: 'Canada' },
-    { id: '303', value: 'United Kingdom' },
-];
-const whitelistedDomains = [
-    'example.com',
-    'anotherdomain.org',
-    'somedomain.net',
-];
-
 type FormFields = DefaultFormValue;
 
 const keySelector = (option: { id?: string }): string => option.id || '';
-const labelSelector = (option: { value?: string }): string => option.value || '';
+const labelSelector = (option: { id?: string }): string => option.id || '';
 
 type PartialFormFields = Partial<FormFields>;
 type FormSchema = ObjectSchema<PartialFormFields>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
 
-const isWhitelistedEmail = (email: string): boolean => {
-    const domain = email.split('@')[1];
-    return whitelistedDomains.includes(domain);
-};
-
-const emailWhitelistValidation = (value: string | undefined) => {
-    if (!isWhitelistedEmail(value || '')) {
-        return 'Email not allowed';
-    }
-    return undefined;
-};
-
 const formSchema: FormSchema = {
     fields: (value): FormSchemaFields => {
         let fields: FormSchemaFields = {
@@ -100,7 +93,7 @@ const formSchema: FormSchema = {
             email: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [emailCondition, emailWhitelistValidation],
+                validations: [emailCondition],
             },
             password: {
                 required: true,
@@ -139,23 +132,77 @@ const formSchema: FormSchema = {
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+    const alert = useAlert();
     const [formValue] = useState<PartialFormFields>({});
-
     const {
         value,
         setFieldValue,
         setError,
         validate,
+        error: fieldError,
     } = useForm(formSchema, {
         value: formValue,
     });
-    const fieldError: PartialFormFields = {};
+
+    const error = getErrorObject(fieldError);
+    const [
+        triggerRegister,
+        {
+            loading: registerPending,
+        },
+    ] = useMutation<RegisterMutation, RegisterMutationVariables>(REGISTER_MUTATION, {
+        onCompleted: (response) => {
+            const { public: publicRes } = response;
+            if (!publicRes) {
+                return;
+            }
+            const { register: registerRes } = publicRes;
+            if (!registerRes) {
+                return;
+            }
+            const { errors, ok } = registerRes;
+
+            if (errors) {
+                const formError = transformToFormError(removeNull(
+                    errors,
+                ));
+                setError(formError);
+            } else if (ok) {
+                alert.show(
+                    strings.registrationSuccess,
+                    { variant: 'success' },
+                );
+            }
+        },
+        onError: (errors) => {
+            setError({
+                [nonFieldError]: errors.message,
+            });
+            alert.show(
+                strings.registrationFailure,
+                { variant: 'danger' },
+            );
+        },
+    });
+
     const handleFormSubmit = createSubmitHandler(
         validate,
         setError,
-        // FIXME: Add Submit logic here
-        () => {},
+        (finalValue) => {
+            triggerRegister({
+                variables: {
+                    data: {
+                        captcha: finalValue.captcha ?? '',
+                        firstName: finalValue.first_name ?? '',
+                        lastName: finalValue.last_name ?? '',
+                        email: finalValue.email ?? '',
+                        password: finalValue.password ?? '',
+                    },
+                },
+            });
+        },
     );
+
     const isNationalSociety = formValue?.organization_type === 'NTLS';
 
     const loginInfo = resolveToComponent(strings.registerAccountPresent, {
@@ -178,12 +225,13 @@ export function Component() {
             mainSectionClassName={styles.mainSection}
         >
             <div className={styles.form}>
+                <NonFieldError error={error} />
                 <TextInput
                     name="first_name"
                     label={strings.registerFirstName}
                     value={value.first_name}
                     onChange={setFieldValue}
-                    error={fieldError?.first_name}
+                    error={error?.first_name}
                     withAsterisk
                 />
                 <TextInput
@@ -191,7 +239,7 @@ export function Component() {
                     label={strings.registerLastName}
                     value={value.last_name}
                     onChange={setFieldValue}
-                    error={fieldError?.last_name}
+                    error={error?.last_name}
                     withAsterisk
                 />
                 <TextInput
@@ -200,7 +248,7 @@ export function Component() {
                     label={strings.registerEmail}
                     value={value.email}
                     onChange={setFieldValue}
-                    error={fieldError?.email}
+                    error={error?.email}
                     withAsterisk
                 />
                 <TextInput
@@ -209,7 +257,7 @@ export function Component() {
                     label={strings.registerPassword}
                     value={value.password}
                     onChange={setFieldValue}
-                    error={fieldError?.password}
+                    error={error?.password}
                     withAsterisk
                 />
                 <TextInput
@@ -218,47 +266,48 @@ export function Component() {
                     label={strings.registerConfirmPassword}
                     value={value.confirm_password}
                     onChange={setFieldValue}
-                    error={fieldError?.confirm_password}
+                    error={error?.confirm_password}
                     withAsterisk
                 />
                 <div className={styles.formBorder} />
                 <SelectInput
                     label={strings.registerOrganizationType}
                     name="organization_type"
-                    options={organizationTypes}
+                    options={[]} // TODO:ADD ORGINAZATION_TYPE
                     keySelector={keySelector}
                     labelSelector={labelSelector}
                     value={value.organization_type}
                     onChange={setFieldValue}
-                    error={fieldError?.organization_type}
+                    error={error?.organization_type}
+                />
+                <TextInput
+                    name="city"
+                    label={strings.registerCity}
+                    value={value.city}
+                    onChange={setFieldValue}
+                    error={error?.city}
                 />
                 <SelectInput
                     label={strings.registerCountry}
                     name="country"
-                    options={countryOptions}
+                    options={[]} // TODO:ADD COUNTRY
                     keySelector={keySelector}
                     labelSelector={labelSelector}
                     value={value.country}
                     onChange={setFieldValue}
-                    error={fieldError?.country}
-                />
-                <TextInput
-                    name="city"
-                    label={strings.registerCity}
-                    value={value.city}
-                    onChange={setFieldValue}
-                    error={fieldError?.city}
+                    error={error?.country}
                 />
+
                 {isNationalSociety ? (
                     <SelectInput
                         label={strings.registerOrganizationName}
                         name="organization"
-                        options={nationalSocietyOptions}
+                        options={[]} // TODO :ADD ORGINAZATION_NAME
                         keySelector={keySelector}
                         labelSelector={keySelector}
                         value={value.organization}
                         onChange={setFieldValue}
-                        error={fieldError?.organization}
+                        error={error?.organization}
                     />
                 ) : (
                     <TextInput
@@ -266,7 +315,7 @@ export function Component() {
                         label={strings.registerOrganizationName}
                         value={value.organization}
                         onChange={setFieldValue}
-                        error={fieldError?.organization}
+                        error={error?.organization}
                     />
                 )}
             </div>
@@ -278,6 +327,7 @@ export function Component() {
                 <Button
                     name={undefined}
                     onClick={handleFormSubmit}
+                    disabled={registerPending}
                 >
                     {strings.registerSubmit}
                 </Button>