Robust Photo Uploader, handling unsupported file types, upload error, apollo uploader (#1400)

* added uploaded controller, handled unsupported image formatting and error uploading styling

* remove callbacks

front/src/modules/settings/profile/components/ProfilePictureUploader.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState } from 'recoil';
 
@@ -14,19 +15,47 @@ export function ProfilePictureUploader() {
   const [uploadPicture] = useUploadProfilePictureMutation();
   const [removePicture] = useRemoveProfilePictureMutation();
   const [currentUser] = useRecoilState(currentUserState);
-  async function onUpload(file: File) {
+  const [uploadController, setUploadController] =
+    useState<AbortController | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  async function handleUpload(file: File) {
     if (!file) {
       return;
     }
-    await uploadPicture({
-      variables: {
-        file,
-      },
-      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
-    });
+
+    const controller = new AbortController();
+    setUploadController(controller);
+
+    try {
+      const result = await uploadPicture({
+        variables: {
+          file,
+        },
+        context: {
+          fetchOptions: {
+            signal: controller.signal,
+          },
+        },
+        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+      });
+
+      setUploadController(null);
+      setError(null);
+      return result;
+    } catch (error) {
+      setError(error as Error);
+    }
   }
 
-  async function onRemove() {
+  async function handleAbort() {
+    if (uploadController) {
+      uploadController.abort();
+      setUploadController(null);
+    }
+  }
+
+  async function handleRemove() {
     await removePicture({
       variables: {
         where: {
@@ -40,8 +69,10 @@ export function ProfilePictureUploader() {
   return (
     <ImageInput
       picture={getImageAbsoluteURIOrBase64(currentUser?.avatarUrl)}
-      onUpload={onUpload}
-      onRemove={onRemove}
+      onUpload={handleUpload}
+      onRemove={handleRemove}
+      onAbort={handleAbort}
+      error={error}
     />
   );
 }