Remplacement de Redux/Saga par Apollo

client/src/components/ProfilePage/ProfilePage.tsx

@@ -1,19 +1,22 @@
 import React, { useEffect } from 'react';
 import { Page } from '../Page';
-import { useSelector, useDispatch } from 'react-redux';
-import { RootState } from '../../store/reducers/root';
 import { UserForm } from '../UserForm';
 import { Loader } from '../Loader';
 import { User } from '../../types/user';
-import { updateProfile } from '../../store/actions/profile';
+import { useUserProfileQuery } from '../../gql/queries/profile';
+import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
+import { WithLoader } from '../WithLoader';
 
 export function ProfilePage() {
-  const currentUser = useSelector((state: RootState) => state.auth.currentUser);
-  const dispatch = useDispatch();
+  const userProfileQuery = useUserProfileQuery();
+  const [ updatProfile, updateUserProfileMutation ] = useUpdateUserProfileMutation();
+  const isLoading = updateUserProfileMutation.loading || userProfileQuery.loading;
+
+  const { userProfile } = (userProfileQuery.data || {});
 
   const onUserChange = (user: User) => {
-    if (currentUser.name !== user.name) {
-      dispatch(updateProfile({ name: user.name }))
+    if (userProfile.name !== user.name) {
+      updatProfile({ variables: {changes: { name: user.name }}});
     }
   };
 
@@ -24,11 +27,13 @@ export function ProfilePage() {
           <div className="columns">
             <div className="column is-6 is-offset-3">
               <h2 className="is-size-2 subtitle">Mon profil</h2>
+              <WithLoader loading={isLoading}>
               {
-                currentUser ?
-                <UserForm onChange={onUserChange} user={currentUser} /> :
+                userProfile ?
+                <UserForm onChange={onUserChange} user={userProfile} /> :
                 <Loader />
               }
+              </WithLoader>
             </div>
           </div>
         </section>