Add ability to remove profile picture on Profile Settings (#538)

* Add ability to remove profile picture on Profile Settings

* Fix lint

* Fix according to review

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

@@ -6,7 +6,7 @@ import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { TextInput } from '@/ui/components/inputs/TextInput';
-import { GET_CURRENT_USER } from '@/users/services';
+import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateUserMutation } from '~/generated/graphql';
 
 const StyledComboInputContainer = styled.div`

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

@@ -3,13 +3,21 @@ import { useRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { ImageInput } from '@/ui/components/inputs/ImageInput';
-import { GET_CURRENT_USER } from '@/users/services';
-import { useUploadProfilePictureMutation } from '~/generated/graphql';
+import { GET_CURRENT_USER } from '@/users/queries';
+import { getImageAbsoluteURI } from '@/users/utils/getProfilePictureAbsoluteURI';
+import {
+  useRemoveProfilePictureMutation,
+  useUploadProfilePictureMutation,
+} from '~/generated/graphql';
 
 export function PictureUploader() {
   const [uploadPicture] = useUploadProfilePictureMutation();
+  const [removePicture] = useRemoveProfilePictureMutation();
   const [currentUser] = useRecoilState(currentUserState);
   async function onUpload(file: File) {
+    if (!file) {
+      return;
+    }
     await uploadPicture({
       variables: {
         file,
@@ -18,8 +26,22 @@ export function PictureUploader() {
     });
   }
 
-  const pictureUrl = currentUser?.avatarUrl
-    ? `${process.env.REACT_APP_FILES_URL}/${currentUser?.avatarUrl}`
-    : null;
-  return <ImageInput picture={pictureUrl} onUpload={onUpload} />;
+  async function onRemove() {
+    await removePicture({
+      variables: {
+        where: {
+          id: currentUser?.id,
+        },
+      },
+      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+    });
+  }
+
+  return (
+    <ImageInput
+      picture={getImageAbsoluteURI(currentUser?.avatarUrl)}
+      onUpload={onUpload}
+      onRemove={onRemove}
+    />
+  );
 }

front/src/modules/settings/profile/queries/index.tsx

@@ -1,7 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const UPDATE_PROFILE_PICTURE = gql`
-  mutation UploadProfilePicture($file: Upload!) {
-    uploadProfilePicture(file: $file)
-  }
-`;