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

client/src/components/WorkgroupPage/InfoPanel.tsx

@@ -0,0 +1,52 @@
+import React, { FunctionComponent } from 'react';
+import { User } from '../../types/user';
+import { Workgroup } from '../../types/workgroup';
+import { InfoForm } from './InfoForm';
+import { WithLoader } from '../WithLoader';
+import { useUpdateWorkgroupMutation, useCreateWorkgroupMutation } from '../../gql/mutations/workgroups';
+import { useHistory } from 'react-router';
+
+export interface InfoPanelProps {
+  workgroup: Workgroup
+}
+
+export const InfoPanel: FunctionComponent<InfoPanelProps> = ({ workgroup }) => {
+  const [ updateWorkgroup, updateWorkgroupMutation ] = useUpdateWorkgroupMutation();
+  const [ createWorkgroup, createWorkgroupMutation ] = useCreateWorkgroupMutation();
+  const history = useHistory();
+  const isLoading = updateWorkgroupMutation.loading || createWorkgroupMutation.loading;
+
+  const onWorkgroupChange = (formWorkgroup: Workgroup) => {
+    const variables: any = { changes: {} };
+    
+    if (workgroup.name !== formWorkgroup.name) {
+      variables.changes.name = formWorkgroup.name;
+    }
+
+    if (Object.keys(variables.changes).length === 0) return;
+
+    const isCreation = workgroup.id === '';
+    if (isCreation) {
+      createWorkgroup({variables})
+        .then(({ data: { createWorkgroup } }) => {
+          history.push(`/workgroups/${createWorkgroup.id}`);
+        });
+    } else {
+      variables.workgroupId = workgroup.id;
+      updateWorkgroup({variables});
+    }
+  };
+
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Informations
+      </p>
+      <div className="panel-block">
+        <WithLoader loading={isLoading}>
+          <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} />
+        </WithLoader>
+      </div>
+    </nav>
+  );
+}