Add mutation for register

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

src/components/NonFiledError/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "fallbackMessage":"Please correct all the errors before submission!"
+    }
+}

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;

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; }
+}

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;

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!"
     }
 }