import React, { useState } from 'react'; import updateApolloCache from 'shared/utils/cache'; import { usePopup, Popup } from 'shared/components/PopupMenu'; import produce from 'immer'; import { useUpdateProjectLabelMutation, useDeleteProjectLabelMutation, FindProjectDocument, useCreateProjectLabelMutation, FindProjectQuery, } from 'shared/generated/graphql'; import LabelManager from 'shared/components/PopupMenu/LabelManager'; import LabelEditor from 'shared/components/PopupMenu/LabelEditor'; type LabelManagerEditorProps = { labels: React.RefObject>; taskLabels: null | React.RefObject>; projectID: string; labelColors: Array; onLabelToggle?: (labelId: string) => void; }; const LabelManagerEditor: React.FC = ({ labels: labelsRef, projectID, labelColors, onLabelToggle, taskLabels: taskLabelsRef, }) => { const [currentLabel, setCurrentLabel] = useState(''); const { setTab, hidePopup } = usePopup(); const [createProjectLabel] = useCreateProjectLabelMutation({ update: (client, newLabelData) => { updateApolloCache( client, FindProjectDocument, cache => produce(cache, draftCache => { if (newLabelData.data) { draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel }); } }), { projectID, }, ); }, }); const [updateProjectLabel] = useUpdateProjectLabelMutation(); const [deleteProjectLabel] = useDeleteProjectLabelMutation({ update: (client, newLabelData) => { updateApolloCache( client, FindProjectDocument, cache => produce(cache, draftCache => { draftCache.findProject.labels = cache.findProject.labels.filter( label => label.id !== newLabelData.data?.deleteProjectLabel.id, ); }), { projectID }, ); }, }); const labels = labelsRef.current ? labelsRef.current : []; const taskLabels = taskLabelsRef && taskLabelsRef.current ? taskLabelsRef.current : []; const [currentTaskLabels, setCurrentTaskLabels] = useState(taskLabels); return ( <> hidePopup()}> { setTab(2); }} onLabelEdit={labelId => { setCurrentLabel(labelId); setTab(1); }} onLabelToggle={labelId => { if (onLabelToggle) { if (currentTaskLabels.find(t => t.projectLabel.id === labelId)) { setCurrentTaskLabels(currentTaskLabels.filter(t => t.projectLabel.id !== labelId)); } else { const newProjectLabel = labels.find(l => l.id === labelId); if (newProjectLabel) { setCurrentTaskLabels([ ...currentTaskLabels, { id: '', assignedDate: '', projectLabel: { ...newProjectLabel } }, ]); } } setCurrentLabel(labelId); onLabelToggle(labelId); } else { setCurrentLabel(labelId); setTab(1); } }} /> hidePopup()} title="Edit label" tab={1}> label.id === currentLabel) ?? null} onLabelEdit={(projectLabelID, name, color) => { if (projectLabelID) { updateProjectLabel({ variables: { projectLabelID, labelColorID: color.id, name: name ?? '' } }); } setTab(0); }} onLabelDelete={labelID => { deleteProjectLabel({ variables: { projectLabelID: labelID } }); setTab(0); }} /> hidePopup()} title="Create new label" tab={2}> { createProjectLabel({ variables: { projectID, labelColorID: color.id, name: name ?? '' } }); setTab(0); }} /> ); }; export default LabelManagerEditor;