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 = ({ 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 ( ); }