Connect profile picture upload to backend (#533)

* Connect profile picture upload to backend

* Fix tests

* Revert onboarding state changes

front/src/generated/graphql.tsx

@@ -1043,6 +1043,7 @@ export type Mutation = {
   updateWorkspace: Workspace;
   uploadFile: Scalars['String'];
   uploadImage: Scalars['String'];
+  uploadProfilePicture: Scalars['String'];
   verify: Verify;
 };
 
@@ -1156,6 +1157,11 @@ export type MutationUploadImageArgs = {
 };
 
 
+export type MutationUploadProfilePictureArgs = {
+  file: Scalars['Upload'];
+};
+
+
 export type MutationVerifyArgs = {
   loginToken: Scalars['String'];
 };
@@ -3030,6 +3036,13 @@ export type SearchCompanyQueryVariables = Exact<{
 
 export type SearchCompanyQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'Company', id: string, name: string, domainName: string }> };
 
+export type UploadProfilePictureMutationVariables = Exact<{
+  file: Scalars['Upload'];
+}>;
+
+
+export type UploadProfilePictureMutation = { __typename?: 'Mutation', uploadProfilePicture: string };
+
 export type GetCurrentUserQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -4339,6 +4352,37 @@ export function useSearchCompanyLazyQuery(baseOptions?: Apollo.LazyQueryHookOpti
 export type SearchCompanyQueryHookResult = ReturnType<typeof useSearchCompanyQuery>;
 export type SearchCompanyLazyQueryHookResult = ReturnType<typeof useSearchCompanyLazyQuery>;
 export type SearchCompanyQueryResult = Apollo.QueryResult<SearchCompanyQuery, SearchCompanyQueryVariables>;
+export const UploadProfilePictureDocument = gql`
+    mutation UploadProfilePicture($file: Upload!) {
+  uploadProfilePicture(file: $file)
+}
+    `;
+export type UploadProfilePictureMutationFn = Apollo.MutationFunction<UploadProfilePictureMutation, UploadProfilePictureMutationVariables>;
+
+/**
+ * __useUploadProfilePictureMutation__
+ *
+ * To run a mutation, you first call `useUploadProfilePictureMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUploadProfilePictureMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [uploadProfilePictureMutation, { data, loading, error }] = useUploadProfilePictureMutation({
+ *   variables: {
+ *      file: // value for 'file'
+ *   },
+ * });
+ */
+export function useUploadProfilePictureMutation(baseOptions?: Apollo.MutationHookOptions<UploadProfilePictureMutation, UploadProfilePictureMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UploadProfilePictureMutation, UploadProfilePictureMutationVariables>(UploadProfilePictureDocument, options);
+      }
+export type UploadProfilePictureMutationHookResult = ReturnType<typeof useUploadProfilePictureMutation>;
+export type UploadProfilePictureMutationResult = Apollo.MutationResult<UploadProfilePictureMutation>;
+export type UploadProfilePictureMutationOptions = Apollo.BaseMutationOptions<UploadProfilePictureMutation, UploadProfilePictureMutationVariables>;
 export const GetCurrentUserDocument = gql`
     query GetCurrentUser {
   currentUser {

front/src/modules/apollo/services/apollo.factory.ts

@@ -3,7 +3,6 @@ import {
   ApolloClient,
   ApolloClientOptions,
   ApolloLink,
-  createHttpLink,
   ServerError,
   ServerParseError,
 } from '@apollo/client';
@@ -11,6 +10,7 @@ import { GraphQLErrors } from '@apollo/client/errors';
 import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
+import { createUploadLink } from 'apollo-upload-client';
 
 import { renewToken } from '@/auth/services/AuthService';
 import { AuthTokenPair } from '~/generated/graphql';
@@ -53,7 +53,7 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
     this.tokenPair = tokenPair;
 
     const buildApolloLink = (): ApolloLink => {
-      const httpLink = createHttpLink({
+      const httpLink = createUploadLink({
         uri,
       });
 

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

@@ -0,0 +1,17 @@
+import { useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+
+export function EmailField() {
+  const currentUser = useRecoilValue(currentUserState);
+
+  return (
+    <TextInput
+      value={currentUser?.email}
+      disabled
+      fullWidth
+      key={'email-' + currentUser?.id}
+    />
+  );
+}

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

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+import debounce from 'lodash.debounce';
+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 { useUpdateUserMutation } from '~/generated/graphql';
+
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export function NameFields() {
+  const currentUser = useRecoilValue(currentUserState);
+
+  const [firstName, setFirstName] = useState(currentUser?.firstName ?? '');
+  const [lastName, setLastName] = useState(currentUser?.lastName ?? '');
+
+  const [updateUser] = useUpdateUserMutation();
+
+  // TODO: Enhance this with react-hook-form (https://www.react-hook-form.com)
+  const debouncedUpdate = debounce(async () => {
+    try {
+      const { data, errors } = await updateUser({
+        variables: {
+          where: {
+            id: currentUser?.id,
+          },
+          data: {
+            firstName: {
+              set: firstName,
+            },
+            lastName: {
+              set: lastName,
+            },
+          },
+        },
+        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+      });
+
+      if (errors || !data?.updateUser) {
+        throw errors;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, 500);
+
+  useEffect(() => {
+    if (
+      currentUser?.firstName !== firstName ||
+      currentUser?.lastName !== lastName
+    ) {
+      debouncedUpdate();
+    }
+
+    return () => {
+      debouncedUpdate.cancel();
+    };
+  }, [firstName, lastName, currentUser, debouncedUpdate]);
+
+  return (
+    <StyledComboInputContainer>
+      <TextInput
+        label="First Name"
+        value={firstName}
+        onChange={setFirstName}
+        placeholder="Tim"
+        fullWidth
+      />
+      <TextInput
+        label="Last Name"
+        value={lastName}
+        onChange={setLastName}
+        placeholder="Cook"
+        fullWidth
+      />
+    </StyledComboInputContainer>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { getOperationName } from '@apollo/client/utilities';
+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';
+
+export function PictureUploader() {
+  const [uploadPicture] = useUploadProfilePictureMutation();
+  const [currentUser] = useRecoilState(currentUserState);
+  async function onUpload(file: File) {
+    await uploadPicture({
+      variables: {
+        file,
+      },
+      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+    });
+  }
+
+  const pictureUrl = currentUser?.avatarUrl
+    ? `${process.env.REACT_APP_FILES_URL}/${currentUser?.avatarUrl}`
+    : null;
+  return <ImageInput picture={pictureUrl} onUpload={onUpload} />;
+}

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

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

front/src/modules/ui/components/inputs/ImageInput.tsx

@@ -28,7 +28,6 @@ const Picture = styled.button<{ withPicture: boolean }>`
   width: 66px;
 
   img {
-    height: 100%;
     object-fit: cover;
     width: 100%;
   }
@@ -67,9 +66,13 @@ const Text = styled.span`
   font-size: ${({ theme }) => theme.font.size.xs};
 `;
 
+const StyledHiddenFileInput = styled.input`
+  display: none;
+`;
+
 type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
   picture: string | null | undefined;
-  onUpload?: () => void;
+  onUpload?: (file: File) => void;
   onRemove?: () => void;
   disabled?: boolean;
 };
@@ -82,10 +85,18 @@ export function ImageInput({
   ...restProps
 }: Props) {
   const theme = useTheme();
+  const hiddenFileInput = React.useRef<HTMLInputElement>(null);
+  const onUploadButtonClick = () => {
+    hiddenFileInput.current?.click();
+  };
 
   return (
     <Container {...restProps}>
-      <Picture withPicture={!!picture} disabled={disabled} onClick={onUpload}>
+      <Picture
+        withPicture={!!picture}
+        disabled={disabled}
+        onClick={onUploadButtonClick}
+      >
         {picture ? (
           <img
             src={picture || '/images/default-profile-picture.png'}
@@ -97,9 +108,20 @@ export function ImageInput({
       </Picture>
       <Content>
         <ButtonContainer>
+          <StyledHiddenFileInput
+            type="file"
+            ref={hiddenFileInput}
+            onChange={(event) => {
+              if (onUpload) {
+                if (event.target.files) {
+                  onUpload(event.target.files[0]);
+                }
+              }
+            }}
+          />
           <Button
             icon={<IconUpload size={theme.icon.size.sm} />}
-            onClick={onUpload}
+            onClick={onUploadButtonClick}
             variant="secondary"
             title="Upload"
             disabled={disabled}
@@ -110,7 +132,7 @@ export function ImageInput({
             onClick={onRemove}
             variant="secondary"
             title="Remove"
-            disabled={!picture || disabled}
+            disabled
             fullWidth
           />
         </ButtonContainer>

front/src/pages/settings/SettingsProfile.tsx

@@ -1,17 +1,11 @@
-import { useEffect, useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
-import debounce from 'lodash.debounce';
-import { useRecoilValue } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
-import { ImageInput } from '@/ui/components/inputs/ImageInput';
-import { TextInput } from '@/ui/components/inputs/TextInput';
+import { EmailField } from '@/settings/profile/components/EmailField';
+import { NameFields } from '@/settings/profile/components/NameFields';
+import { PictureUploader } from '@/settings/profile/components/PictureUploader';
 import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
 import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
-import { GET_CURRENT_USER } from '@/users/services';
-import { useUpdateUserMutation } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -29,108 +23,28 @@ const StyledSectionContainer = styled.div`
   }
 `;
 
-const StyledComboInputContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  > * + * {
-    margin-left: ${({ theme }) => theme.spacing(4)};
-  }
-`;
-
 export function SettingsProfile() {
-  const currentUser = useRecoilValue(currentUserState);
-
-  const [firstName, setFirstName] = useState(currentUser?.firstName ?? '');
-  const [lastName, setLastName] = useState(currentUser?.lastName ?? '');
-
-  const [updateUser] = useUpdateUserMutation();
-
-  // TODO: Enhance this with react-hook-form (https://www.react-hook-form.com)
-  const debouncedUpdate = debounce(async () => {
-    try {
-      if (!currentUser?.id) {
-        throw new Error('User is not logged in');
-      }
-
-      const { data, errors } = await updateUser({
-        variables: {
-          where: {
-            id: currentUser?.id,
-          },
-          data: {
-            firstName: {
-              set: firstName,
-            },
-            lastName: {
-              set: lastName,
-            },
-          },
-        },
-        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
-      });
-
-      if (errors || !data?.updateUser) {
-        throw errors;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }, 500);
-
-  useEffect(() => {
-    if (
-      currentUser?.firstName !== firstName ||
-      currentUser?.lastName !== lastName
-    ) {
-      debouncedUpdate();
-    }
-
-    return () => {
-      debouncedUpdate.cancel();
-    };
-  }, [firstName, lastName, currentUser, debouncedUpdate]);
-
   return (
     <NoTopBarContainer>
       <StyledContainer>
         <MainSectionTitle>Profile</MainSectionTitle>
         <StyledSectionContainer>
           <SubSectionTitle title="Picture" />
-          <ImageInput picture={null} disabled />
+          <PictureUploader />
         </StyledSectionContainer>
         <StyledSectionContainer>
           <SubSectionTitle
             title="Name"
             description="Your name as it will be displayed"
           />
-          <StyledComboInputContainer>
-            <TextInput
-              label="First Name"
-              value={firstName}
-              onChange={setFirstName}
-              placeholder="Tim"
-              fullWidth
-            />
-            <TextInput
-              label="Last Name"
-              value={lastName}
-              onChange={setLastName}
-              placeholder="Cook"
-              fullWidth
-            />
-          </StyledComboInputContainer>
+          <NameFields />
         </StyledSectionContainer>
         <StyledSectionContainer>
           <SubSectionTitle
             title="Email"
             description="The email associated to your account"
           />
-          <TextInput
-            value={currentUser?.email}
-            disabled
-            fullWidth
-            key={'email-' + currentUser?.id}
-          />
+          <EmailField />
         </StyledSectionContainer>
       </StyledContainer>
     </NoTopBarContainer>