2020-07-22 09:18:50 +02:00
|
|
|
import React from 'react';
|
2020-07-16 20:21:58 +02:00
|
|
|
import { Page } from '../Page';
|
|
|
|
import { UserForm } from '../UserForm';
|
|
|
|
import { User } from '../../types/user';
|
2020-07-21 22:25:39 +02:00
|
|
|
import { useUserProfileQuery } from '../../gql/queries/profile';
|
|
|
|
import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
|
|
|
|
import { WithLoader } from '../WithLoader';
|
2020-07-16 20:21:58 +02:00
|
|
|
|
|
|
|
export function ProfilePage() {
|
2020-07-21 22:25:39 +02:00
|
|
|
const userProfileQuery = useUserProfileQuery();
|
2020-07-22 22:25:03 +02:00
|
|
|
const [ updateProfile, updateUserProfileMutation ] = useUpdateUserProfileMutation();
|
2020-07-21 22:25:39 +02:00
|
|
|
const isLoading = updateUserProfileMutation.loading || userProfileQuery.loading;
|
|
|
|
|
|
|
|
const { userProfile } = (userProfileQuery.data || {});
|
2020-07-16 20:21:58 +02:00
|
|
|
|
|
|
|
const onUserChange = (user: User) => {
|
2020-07-21 22:25:39 +02:00
|
|
|
if (userProfile.name !== user.name) {
|
2020-07-22 22:25:03 +02:00
|
|
|
updateProfile({ variables: {changes: { name: user.name }}});
|
2020-07-16 20:21:58 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Page title="Mon profil">
|
|
|
|
<div className="container is-fluid">
|
|
|
|
<section className="section">
|
|
|
|
<div className="columns">
|
|
|
|
<div className="column is-6 is-offset-3">
|
|
|
|
<h2 className="is-size-2 subtitle">Mon profil</h2>
|
2020-07-22 09:18:50 +02:00
|
|
|
<WithLoader loading={isLoading || !userProfile}>
|
2020-07-16 20:21:58 +02:00
|
|
|
{
|
2020-07-22 09:18:50 +02:00
|
|
|
<UserForm onChange={onUserChange} user={userProfile} />
|
2020-07-16 20:21:58 +02:00
|
|
|
}
|
2020-07-21 22:25:39 +02:00
|
|
|
</WithLoader>
|
2020-07-16 20:21:58 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</Page>
|
|
|
|
);
|
|
|
|
}
|