Connect profile picture upload to backend (#533)

* Connect profile picture upload to backend

* Fix tests

* Revert onboarding state changes

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)
+  }
+`;