Merge pull request #193 from IFRCGo/fix/redirect-issue

Fix redirect permalink issue
IFRCGo · Dec 9, 2024 · 7dd878c · 7dd878c
2 parents 05030f3 + ab1deff
commit 7dd878c
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 30 deletions.
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -115,18 +115,22 @@ function App() {
         setCurrentLanguage(language ?? 'en');
     }, []);
 
-    const {
-        loading: meLoading,
-    } = useQuery<MeQuery>(
+    const [ready, setReady] = useState(false);
+
+    useQuery<MeQuery>(
         ME,
         {
             onCompleted: (response) => {
+                setReady(true);
                 if (response.public.me) {
                     setUserAuth(response.public.me);
                 } else {
                     removeUserAuth();
                 }
             },
+            onError: () => {
+                setReady(true);
+            },
         },
     );
 
@@ -251,7 +255,7 @@ function App() {
         removeAlert,
     }), [alerts, addAlert, updateAlert, removeAlert]);
 
-    if (meLoading) {
+    if (!ready) {
         return (
             // FIXME: Use translation
             <div className={styles.loading}>

diff --git a/src/App/redirects/ActivationRedirect.tsx b/src/App/redirects/ActivationRedirect.tsx
@@ -17,8 +17,8 @@ export function Component() {
     const { userId, token } = useParams<ActivationParams>();
     const navigate = useNavigate();
 
-    const activationLink = (userId && token && routes.activation.path) ? ({
-        pathname: (generatePath(routes.activation.path, { userId, token })),
+    const activationLink = (userId && token) ? ({
+        pathname: (generatePath(routes.activation.absolutePath, { userId, token })),
     })
         : routes.pageNotFound.path;
 

diff --git a/src/App/redirects/RecoverAccountRedirect.tsx b/src/App/redirects/RecoverAccountRedirect.tsx
@@ -17,8 +17,11 @@ export function Component() {
     const { userId, resetToken } = useParams<ResetPasswordParams>();
     const navigate = useNavigate();
 
-    const resetPasswordLink = (userId && resetToken && routes.recoverAccountConfirm.path) ? ({
-        pathname: (generatePath(routes.recoverAccountConfirm.path, { userId, resetToken })),
+    const resetPasswordLink = (userId && resetToken) ? ({
+        pathname: (generatePath(
+            routes.recoverAccountConfirm.absolutePath,
+            { userId, resetToken },
+        )),
     })
         : routes.pageNotFound.path;
 

diff --git a/src/components/Captcha/index.tsx b/src/components/Captcha/index.tsx
@@ -10,6 +10,7 @@ import { hCaptchaKey } from '#config';
 export type HCaptchaProps<T> = Omit<InputContainerProps, 'input'> & {
     name: T,
     onChange: (value: string | undefined, name: T) => void;
+    onError: (errorString: string) => void;
     elementRef?: React.RefObject<HCaptcha>;
 };
 
@@ -28,6 +29,7 @@ function HCaptchaInput<T extends string>(props: HCaptchaProps<T>) {
         inputSectionClassName,
         label,
         readOnly,
+        onError,
         name,
         onChange,
         elementRef,
@@ -43,9 +45,14 @@ function HCaptchaInput<T extends string>(props: HCaptchaProps<T>) {
         (err: string) => {
             // eslint-disable-next-line no-console
             console.error(err);
+            onError(err);
             onChange(undefined, name);
         },
-        [onChange, name],
+        [
+            onChange,
+            name,
+            onError,
+        ],
     );
     const handleExpire = useCallback(
         () => {

diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
@@ -127,10 +127,11 @@ export function Component() {
                     );
                     navigate('/');
                 } else {
-                    alert.show(
-                        strings.loginFailureMessage,
-                        { variant: 'danger' },
-                    );
+                    const errorMessages = response?.errors
+                        ?.map((errors: { messages: string; }) => errors.messages)
+                        .filter((message: string) => message)
+                        .join(', ');
+                    alert.show(errorMessages, { variant: 'danger' });
                 }
             },
             onError: () => {

diff --git a/src/views/MySubscriptions/index.tsx b/src/views/MySubscriptions/index.tsx
@@ -222,10 +222,11 @@ export function Component() {
                         refetch();
                     }
                 } else {
-                    alert.show(
-                        strings.subscriptionFailedToUpdate,
-                        { variant: 'danger' },
-                    );
+                    const errorMessages = response?.errors
+                        ?.map((error: { messages: string; }) => error.messages)
+                        .filter((message: string) => message)
+                        .join(', ');
+                    alert.show(errorMessages, { variant: 'danger' });
                 }
             },
             onError: () => {
@@ -260,10 +261,11 @@ export function Component() {
                         { variant: 'success' },
                     );
                 } else {
-                    alert.show(
-                        strings.subscriptionFailedToDelete,
-                        { variant: 'danger' },
-                    );
+                    const errorMessages = response?.errors
+                        ?.map((error: { messages: string; }) => error.messages)
+                        .filter((message: string) => message)
+                        .join(', ');
+                    alert.show(errorMessages, { variant: 'danger' });
                 }
             },
             onError: () => {

diff --git a/src/views/NewSubscriptionModal/i18n.json b/src/views/NewSubscriptionModal/i18n.json
@@ -18,10 +18,10 @@
         "filterRegionsLabel": "Regions",
         "filterRegionsPlaceholder": "All Regions",
         "newSubscriptionHeading": "New Subscription",
+        "editSubscriptionHeading": "Edit Subscription",
         "newSubscriptionTitle": "Title",
         "newSubscriptionCreatedSuccessfully": "Subscription created successfully.",
         "newSubscriptionFailed": "Failed to create subscription",
-        "newSubscriptionLimitExceeded": "You have reached the maximum limit of 10 subscriptions",
         "subscriptionUpdatedSuccessfully": "Subscription updated successfully.",
         "failedToUpdateSubscription": "Failed to update subscription."
     }

diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
@@ -17,7 +17,10 @@ import {
     TextInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import { isNotDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 import {
     createSubmitHandler,
     getErrorObject,
@@ -312,11 +315,11 @@ function NewSubscriptionModal(props: Props) {
                 }
 
                 if (response.ok) {
+                    onCloseModal();
                     alert.show(
                         strings.newSubscriptionCreatedSuccessfully,
                         { variant: 'success' },
                     );
-                    onCloseModal();
                     if (onSuccess) {
                         onSuccess();
                     }
@@ -456,7 +459,9 @@ function NewSubscriptionModal(props: Props) {
     return (
         <Modal
             className={styles.subscriptionModal}
-            heading={strings.newSubscriptionHeading}
+            heading={(isDefined(subscription?.id)
+                ? strings.editSubscriptionHeading : strings.newSubscriptionHeading
+            )}
             footerContent={(
                 <Button
                     name={undefined}

diff --git a/src/views/RecoverAccount/index.tsx b/src/views/RecoverAccount/index.tsx
@@ -1,4 +1,5 @@
 import {
+    useCallback,
     useMemo,
     useState,
 } from 'react';
@@ -131,6 +132,16 @@ export function Component() {
 
     const fieldError = getErrorObject(formError);
 
+    const onCaptchaError = useCallback((errorString: string) => {
+        setError((oldErrors) => {
+            const fieldErrors = getErrorObject(oldErrors);
+            return ({
+                ...fieldErrors,
+                captcha: errorString,
+            });
+        });
+    }, [setError]);
+
     if (isSubmitted) {
         return (
             <Page>
@@ -171,6 +182,7 @@ export function Component() {
                     <HCaptcha
                         name="captcha"
                         onChange={setFieldValue}
+                        onError={onCaptchaError}
                     />
                     <Button
                         name={undefined}

diff --git a/src/views/RecoverAccountConfirm/index.tsx b/src/views/RecoverAccountConfirm/index.tsx
@@ -137,10 +137,11 @@ export function Component() {
                 setError(transformToFormError(
                     data.public.passwordResetConfirm.errors,
                 ));
-                alert.show(
-                    strings.failureMessageTitle,
-                    { variant: 'danger' },
-                );
+                const errorMessages = data.public.passwordResetConfirm?.errors
+                    ?.map((error: { messages: string; }) => error.messages)
+                    .filter((message: string) => message)
+                    .join(', ');
+                alert.show(errorMessages, { variant: 'danger' });
             }
         },
         onError: () => {
@@ -180,6 +181,16 @@ export function Component() {
         [passwordResetConfirm, userId, resetToken, alert, strings],
     );
 
+    const onCaptchaError = useCallback((errorString: string) => {
+        setError((oldErrors) => {
+            const fieldErrors = getErrorObject(oldErrors);
+            return ({
+                ...fieldErrors,
+                captcha: errorString,
+            });
+        });
+    }, [setError]);
+
     const handleFormSubmit = createSubmitHandler(validate, setError, handleChangePassword);
 
     const fieldError = getErrorObject(formError);
@@ -221,6 +232,7 @@ export function Component() {
                     <HCaptcha
                         name="captcha"
                         onChange={setFieldValue}
+                        onError={onCaptchaError}
                     />
                     <Button
                         name={undefined}

diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
@@ -1,4 +1,7 @@
-import { useState } from 'react';
+import {
+    useCallback,
+    useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
     gql,
@@ -196,6 +199,16 @@ export function Component() {
         ),
     });
 
+    const onCaptchaError = useCallback((errorString: string) => {
+        setError((oldErrors) => {
+            const fieldErrors = getErrorObject(oldErrors);
+            return ({
+                ...fieldErrors,
+                captcha: errorString,
+            });
+        });
+    }, [setError]);
+
     return (
         <Page
             className={styles.register}
@@ -253,6 +266,7 @@ export function Component() {
                 <HCaptcha
                     name="captcha"
                     onChange={setFieldValue}
+                    onError={onCaptchaError}
                 />
                 <Button
                     name={undefined}