Cadoles/daddy
20
0
Fork 0
Code Issues 16 Pull Requests Releases Wiki Activity

Correction récupération/fusion des Workgroups

Browse Source
This commit is contained in:
wpetit
2020-09-04 12:28:38 +02:00
parent 9c6ebae9bc
commit 7dad33b6e4
7 changed files with 61 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/components/WorkgroupPage/WorkgroupPage.tsx
View File

@ -2,8 +2,8 @@ import React, { useEffect, useState, Fragment } from 'react';
import { Page } from '../Page';
import { WithLoader } from '../WithLoader';
import { useParams } from 'react-router';
import { useWorkgroupsQuery } from '../../gql/queries/workgroups';
import { useUserProfileQuery } from '../../gql/queries/profile';
import { useWorkgroupsQuery, useWorkgroups } from '../../gql/queries/workgroups';
import { useUserProfileQuery, useUserProfile } from '../../gql/queries/profile';
import { MembersPanel } from './MembersPanel';
import { User } from '../../types/user';
import { InfoPanel } from './InfoPanel';
@ -12,18 +12,18 @@ import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation, useCloseWorkgroupM
export function WorkgroupPage() {
const { id } = useParams();
const workgroupsQuery = useWorkgroupsQuery({
const { workgroups } = useWorkgroups({
variables:{
filter: {
ids: [id],
}
}
});
const userProfileQuery = useUserProfileQuery();
const { user } = useUserProfile();
const [ joinWorkgroup, joinWorkgroupMutation ] = useJoinWorkgroupMutation();
const [ leaveWorkgroup, leaveWorkgroupMutation ] = useLeaveWorkgroupMutation();
const [ closeWorkgroup, closeWorkgroupMutation ] = useCloseWorkgroupMutation();
const [ joinWorkgroup ] = useJoinWorkgroupMutation();
const [ leaveWorkgroup ] = useLeaveWorkgroupMutation();
const [ closeWorkgroup ] = useCloseWorkgroupMutation();
const [ state, setState ] = useState({
userProfileId: '',
@ -37,14 +37,12 @@ export function WorkgroupPage() {
});
useEffect(() => {
if (!workgroupsQuery.data) return;
setState(state => ({...state, workgroup:{ ...state.workgroup, ...workgroupsQuery.data.workgroups[0]}}));
}, [workgroupsQuery.data]);
setState(state => ({...state, workgroup:{ ...state.workgroup, ...workgroups[0]}}));
}, [workgroups]);
useEffect(() => {
if (!userProfileQuery.data) return;
setState(state => ({...state, userProfileId: userProfileQuery.data.userProfile.id }));
}, [userProfileQuery.data]);
setState(state => ({...state, userProfileId: user.id }));
}, [user]);
const onJoinWorkgroupClick = () => {
joinWorkgroup({
@ -56,6 +54,18 @@ export function WorkgroupPage() {
const onLeaveWorkgroupClick = () => {
leaveWorkgroup({
update: (cache, result) => {
cache.modify({
id: cache.identify(result.data.leaveWorkgroup),
fields: {
members(existingMembers, { readField }) {
return existingMembers.filter(
user => state.userProfileId !== readField('id', user)
);
},
},
});
},
variables: {
workgroupId: state.workgroup.id,
}
@ -123,16 +133,14 @@ export function WorkgroupPage() {
</div>
</div>
</div>
<WithLoader loading={[workgroupsQuery.loading, userProfileQuery.loading, joinWorkgroupMutation.loading, leaveWorkgroupMutation.loading]}>
<div className="columns">
<div className="column">
<InfoPanel workgroup={state.workgroup as Workgroup} />
</div>
<div className="column">
<MembersPanel users={state.workgroup.members as User[]} />
</div>
<div className="columns">
<div className="column">
<InfoPanel workgroup={state.workgroup as Workgroup} />
</div>
</WithLoader>
<div className="column">
<MembersPanel users={state.workgroup.members as User[]} />
</div>
</div>
</section>
</div>
</Page>