48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import React, { FunctionComponent } from 'react';
|
|
import { Workgroup } from '../../types/workgroup';
|
|
import { InfoForm } from './InfoForm';
|
|
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">
|
|
{ !isLoading ? <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} /> : null }
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |