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/users/components/Avatar.tsx

@@ -12,6 +12,7 @@ type OwnProps = {
 };
 
 export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholder'>>`
+  align-items: center;
   background-color: ${(props) =>
     !isNonEmptyString(props.avatarUrl)
       ? props.theme.background.tertiary
@@ -22,12 +23,12 @@ export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholder'>>`
   border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
-  flex-shrink: 0;
 
+  flex-shrink: 0;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  height: ${(props) => props.size}px;
 
+  height: ${(props) => props.size}px;
   justify-content: center;
   width: ${(props) => props.size}px;
 `;

front/src/modules/users/queries/update.ts

@@ -0,0 +1,28 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_USER = gql`
+  mutation UpdateUser($data: UserUpdateInput!, $where: UserWhereUniqueInput!) {
+    updateUser(data: $data, where: $where) {
+      id
+      email
+      displayName
+      firstName
+      lastName
+      avatarUrl
+    }
+  }
+`;
+
+export const UPDATE_PROFILE_PICTURE = gql`
+  mutation UploadProfilePicture($file: Upload!) {
+    uploadProfilePicture(file: $file)
+  }
+`;
+
+export const REMOVE_PROFILE_PICTURE = gql`
+  mutation RemoveProfilePicture($where: UserWhereUniqueInput!) {
+    updateUser(data: { avatarUrl: { set: null } }, where: $where) {
+      id
+    }
+  }
+`;

front/src/modules/users/services/update.ts

@@ -1,14 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const UPDATE_USER = gql`
-  mutation UpdateUser($data: UserUpdateInput!, $where: UserWhereUniqueInput!) {
-    updateUser(data: $data, where: $where) {
-      id
-      email
-      displayName
-      firstName
-      lastName
-      avatarUrl
-    }
-  }
-`;

front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts

@@ -0,0 +1,5 @@
+export function getImageAbsoluteURI(imageRelativePath?: string | null) {
+  return imageRelativePath
+    ? `${process.env.REACT_APP_FILES_URL}/${imageRelativePath}`
+    : null;
+}