Fix error handling in share dialog (#1594)

apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx

@@ -39,30 +39,38 @@ export default function AddParticipant({
         [emailList, collection.sharees]
     );
 
-    const collectionShare: AddParticipantFormProps['callback'] = async (
+    const collectionShare: AddParticipantFormProps['callback'] = async ({
+        email,
         emails,
-        setFieldError,
-        resetForm
-    ) => {
-        try {
-            for (const email of emails) {
-                if (email === user.email) {
-                    setFieldError(t('SHARE_WITH_SELF'));
-                    break;
-                } else if (
-                    collection?.sharees?.find((value) => value.email === email)
-                ) {
-                    setFieldError(t('ALREADY_SHARED', { email }));
-                    break;
-                } else {
-                    await shareCollection(collection, email, type);
-                    await syncWithRemote(false, true);
-                }
+    }) => {
+        // if email is provided, means user has custom entered email, so, will need to validate for self sharing
+        // and already shared
+        if (email) {
+            if (email === user.email) {
+                throw new Error(t('SHARE_WITH_SELF'));
+            } else if (
+                collection?.sharees?.find((value) => value.email === email)
+            ) {
+                throw new Error(t('ALREADY_SHARED', { email: email }));
+            }
+            // set emails to array of one email
+            emails = [email];
+        }
+        for (const email of emails) {
+            if (
+                email === user.email ||
+                collection?.sharees?.find((value) => value.email === email)
+            ) {
+                // can just skip this email
+                continue;
+            }
+            try {
+                await shareCollection(collection, email, type);
+                await syncWithRemote(false, true);
+            } catch (e) {
+                const errorMessage = handleSharingErrors(e);
+                throw new Error(errorMessage);
             }
-            resetForm();
-        } catch (e) {
-            const errorMessage = handleSharingErrors(e);
-            setFieldError(errorMessage);
         }
     };
 

apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipantForm.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Formik, FormikHelpers, FormikState } from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import SubmitButton from '@ente/shared/components/SubmitButton';
 import TextField from '@mui/material/TextField';
@@ -18,11 +18,7 @@ interface formValues {
     selectedOptions: string[];
 }
 export interface AddParticipantFormProps {
-    callback: (
-        emails: string[],
-        setFieldError: (errorMessage: string) => void,
-        resetForm: (nextState?: Partial<FormikState<formValues>>) => void
-    ) => Promise<void>;
+    callback: (props: { email?: string; emails?: string[] }) => Promise<void>;
     fieldType: 'text' | 'email' | 'password';
     placeholder: string;
     buttonText: string;
@@ -43,7 +39,6 @@ export interface AddParticipantFormProps {
 export default function AddParticipantForm(props: AddParticipantFormProps) {
     const { submitButtonProps } = props;
     const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
-    const [disableInput, setDisableInput] = useState(false);
 
     const [loading, SetLoading] = useState(false);
 
@@ -51,26 +46,20 @@ export default function AddParticipantForm(props: AddParticipantFormProps) {
         values: formValues,
         { setFieldError, resetForm }: FormikHelpers<formValues>
     ) => {
-        SetLoading(true);
-
-        if (values.inputValue !== '') {
-            await props.callback(
-                [values.inputValue],
-                (message) => setFieldError('inputValue', message),
-                resetForm
-            );
-        } else if (values.selectedOptions.length !== 0) {
-            await props.callback(
-                values.selectedOptions,
-                (message) => setFieldError('inputValue', message),
-                resetForm
-            );
+        try {
+            SetLoading(true);
+            if (values.inputValue !== '') {
+                await props.callback({ email: values.inputValue });
+            } else if (values.selectedOptions.length !== 0) {
+                await props.callback({ emails: values.selectedOptions });
+            }
+            SetLoading(false);
+            props.onClose();
+            resetForm();
+        } catch (e) {
+            setFieldError('inputValue', e?.message);
+            SetLoading(false);
         }
-
-        setDisableInput(false);
-        SetLoading(false);
-
-        props.onClose();
     };
 
     const validationSchema = useMemo(() => {
@@ -129,7 +118,7 @@ export default function AddParticipantForm(props: AddParticipantFormProps) {
                                 error={Boolean(errors.inputValue)}
                                 helperText={errors.inputValue}
                                 value={values.inputValue}
-                                disabled={loading || disableInput}
+                                disabled={loading}
                                 autoFocus={!props.disableAutoFocus}
                                 autoComplete={props.autoComplete}
                             />