-
-
-
-
- {
- currentUser && currentUser.email ?
-
Bonjour {currentUser.name ? currentUser.name : currentUser.email} !
:
-
Veuillez vous authentifier.
- }
+
+
+ {
+ userProfile ?
+ :
+
+
+
+
Veuillez vous authentifier.
+
-
+
+ }
+
-
- {
- isAuthenticated ?
-
-
+
+
+ }
+
+
diff --git a/client/src/components/ProfilePage/ProfilePage.tsx b/client/src/components/ProfilePage/ProfilePage.tsx
index 54c72bf..9194d24 100644
--- a/client/src/components/ProfilePage/ProfilePage.tsx
+++ b/client/src/components/ProfilePage/ProfilePage.tsx
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react';
+import React 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 [ updateProfile, 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) {
+ updateProfile({ variables: {changes: { name: user.name }}});
}
};
@@ -24,11 +26,11 @@ export function ProfilePage() {
Mon profil
+
{
- currentUser ?
- :
-
+
}
+
diff --git a/client/src/components/UserForm.tsx b/client/src/components/UserForm.tsx
index 1ba6c7a..8e94f4e 100644
--- a/client/src/components/UserForm.tsx
+++ b/client/src/components/UserForm.tsx
@@ -10,11 +10,11 @@ export function UserForm({ user, onChange }: UserFormProps) {
const [ state, setState ] = useState({
changed: false,
user: {
- name: '',
- email: '',
- createdAt: null,
- connectedAt: null,
- ...user,
+ id: user && user.id ? user.id : '',
+ name: user && user.name ? user.name : '',
+ email: user && user.email ? user.email : '',
+ createdAt: user && user.createdAt ? user.createdAt : null,
+ connectedAt: user && user.connectedAt ? user.connectedAt : null,
}
});
diff --git a/client/src/components/WithLoader.tsx b/client/src/components/WithLoader.tsx
new file mode 100644
index 0000000..cbc55fb
--- /dev/null
+++ b/client/src/components/WithLoader.tsx
@@ -0,0 +1,18 @@
+import React, { Fragment, PropsWithChildren, FunctionComponent } from 'react';
+
+export interface WithLoaderProps {
+ loading?: boolean|boolean[]
+}
+
+export const WithLoader: FunctionComponent
= ({ loading, children }) => {
+ const isLoading = Array.isArray(loading) ? loading.some(l => l) : loading;
+ return (
+
+ {
+ isLoading ?
+ Chargement
:
+ children
+ }
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/WorkgroupPage/InfoForm.tsx b/client/src/components/WorkgroupPage/InfoForm.tsx
new file mode 100644
index 0000000..cb3a3f8
--- /dev/null
+++ b/client/src/components/WorkgroupPage/InfoForm.tsx
@@ -0,0 +1,96 @@
+import React, { useState, ChangeEvent, useEffect } from 'react';
+import { Workgroup } from '../../types/workgroup';
+
+export interface InfoFormProps {
+ workgroup: Workgroup
+ onChange?: (workgroup: Workgroup) => void
+}
+
+export function InfoForm({ workgroup, onChange }: InfoFormProps) {
+ const [ state, setState ] = useState({
+ changed: false,
+ workgroup: {
+ id: workgroup && workgroup.id ? workgroup.id : '',
+ name: workgroup && workgroup.name ? workgroup.name : '',
+ createdAt: workgroup && workgroup.createdAt ? workgroup.createdAt : null,
+ closedAt: workgroup && workgroup.closedAt ? workgroup.closedAt : null,
+ }
+ });
+
+ useEffect(() => {
+ setState({
+ changed: false,
+ workgroup: {
+ id: workgroup && workgroup.id ? workgroup.id : '',
+ name: workgroup && workgroup.name ? workgroup.name : '',
+ createdAt: workgroup && workgroup.createdAt ? workgroup.createdAt : null,
+ closedAt: workgroup && workgroup.closedAt ? workgroup.closedAt : null,
+ }
+ });
+ }, [workgroup]);
+
+ const onSaveClick = () => {
+ if (!state.changed) return;
+ if (typeof onChange !== 'function') return;
+ onChange(state.workgroup as Workgroup);
+ setState(state => {
+ return {
+ ...state,
+ changed: false,
+ };
+ })
+ };
+
+ const onWorkgroupAttrChange = function(attrName: string, evt: ChangeEvent) {
+ const value = evt.currentTarget.value;
+ setState(state => {
+ return {
+ ...state,
+ changed: true,
+ workgroup: {
+ ...state.workgroup,
+ [attrName]: value,
+ }
+ };
+ });
+ };
+
+ return (
+
+
+ {
+ state.workgroup.createdAt ?
+
+
+
+
{state.workgroup.createdAt}
+
+
:
+ null
+ }
+ {
+ state.workgroup.closedAt ?
+
+
+
+
{state.workgroup.closedAt}
+
+
:
+ null
+ }
+
+
+
+
+
+
+
+ {
+ isNew ?
+
+
+
Nouveau
+ Groupe de travail
+
+
:
+
+
+
{state.workgroup.name}
+ Groupe de travail { isClosed ? '(clos)' : null }
+
+
+ }
+
+
+
+ {
+ isNew || isClosed ? null :
+
+ {
+ isWorkgroupMember ?
+
+
+
+ :
+
+ }
+
+ }
+
+
+
+