Créer/modifier/rejoindre/quitter un groupe de travail

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -1,20 +1,126 @@
-import React, { useEffect } from 'react';
+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 { MembersPanel } from './MembersPanel';
+import { User } from '../../types/user';
+import { InfoPanel } from './InfoPanel';
+import { Workgroup } from '../../types/workgroup';
+import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation } from '../../gql/mutations/workgroups';
 
 export function WorkgroupPage() {
+  const { id } = useParams();
+  const workgroupsQuery = useWorkgroupsQuery({
+    variables:{
+      filter: { 
+        ids: [id],
+      }
+    }
+  });
+  const userProfileQuery = useUserProfileQuery();
+  const [ joinWorkgroup, joinWorkgroupMutation ] = useJoinWorkgroupMutation();
+  const [ leaveWorkgroup, leaveWorkgroupMutation ] = useLeaveWorkgroupMutation();
+  const [ state, setState ] = useState({
+    userProfileId: '',
+    workgroup: {
+      id: '',
+      name: '',
+      closedAt: null,
+      createdAt: null,
+      members: [],
+    }
+  });
+
+  useEffect(() => {
+    if (!workgroupsQuery.data) return;
+    setState(state => ({...state, workgroup:{ ...state.workgroup, ...workgroupsQuery.data.workgroups[0]}}));
+  }, [workgroupsQuery.data]);
+
+  useEffect(() => {
+    if (!userProfileQuery.data) return;
+    setState(state => ({...state, userProfileId: userProfileQuery.data.userProfile.id }));
+  }, [userProfileQuery.data]);
+
+  const onJoinWorkgroupClick = () => {
+    joinWorkgroup({
+      variables: {
+        workgroupId: state.workgroup.id,
+      }
+    });
+  }
+
+  const onLeaveWorkgroupClick = () => {
+    leaveWorkgroup({
+      variables: {
+        workgroupId: state.workgroup.id,
+      }
+    });
+  }
+
+  const isNew = state.workgroup.id === '';
+  const isWorkgroupMember = state.workgroup.members.some(u => u.id === state.userProfileId);
+
   return (
     <Page title="Groupe de travail">
       <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">Groupe de travail</h2>
-              <WithLoader loading={false}>
-              
-              </WithLoader>
+        <section className="mt-5">
+          <div className="level">
+            <div className="level-left">
+              {
+                isNew ?
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">Nouveau</h2>
+                    <h3 className="is-size-5 subtitle">Groupe de travail</h3>
+                  </div>
+                </div> :
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">{state.workgroup.name}</h2>
+                    <h3 className="is-size-5 subtitle">Groupe de travail</h3>
+                  </div>
+                </div>
+              }
+            </div>
+            <div className="level-right">
+              <div className="buttons is-right level-item">
+                {
+                  isNew ? null :
+                  <Fragment>
+                    {
+                      isWorkgroupMember ?
+                      <Fragment>
+                        <button onClick={onLeaveWorkgroupClick} className="button is-info is-warning is-medium">
+                          <span>Quitter</span>
+                          <span className="icon"><i className="fas fa-user-minus"></i></span>
+                        </button>
+                        <button className="button is-danger is-medium">
+                          <span>Clôre</span>
+                          <span className="icon"><i className="far fa-times-circle"></i></span>
+                        </button>
+                      </Fragment> :
+                      <button onClick={onJoinWorkgroupClick} className="button is-info is-medium">
+                        <span>Rejoindre</span>
+                        <span className="icon"><i className="fas fa-user-plus"></i></span>
+                      </button>
+                    }
+                  </Fragment>
+                }
+              </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>
+          </WithLoader>
         </section>
       </div>
     </Page>