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 , useToggleTaskLabelMutation , useLabelsQuery , } from 'shared/generated/graphql' ; import LabelManager from 'shared/components/PopupMenu/LabelManager' ; import LabelEditor from 'shared/components/PopupMenu/LabelEditor' ; type LabelManagerEditorProps = { taskID ? : string ; taskLabels : null | React . RefObject < Array < TaskLabel > > ; projectID : string ; labelColors : Array < LabelColor > ; onLabelToggle ? : ( labelId : string ) => void ; } ; const LabelManagerEditor = ( { taskID , projectID , labelColors , onLabelToggle , taskLabels : taskLabelsRef , } ) => { const [ currentLabel , setCurrentLabel ] = useState ( '' ) ; const { setTab , hidePopup } = usePopup ( ) ; const [ toggleTaskLabel ] = useToggleTaskLabelMutation ( ) ; const [ createProjectLabel ] = useCreateProjectLabelMutation ( { onCompleted : ( data ) => { if ( taskID ) { toggleTaskLabel ( { variables : { taskID , projectLabelID : data . createProjectLabel . id } } ) ; } } , update : ( client , newLabelData ) => { updateApolloCache < FindProjectQuery > ( 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 < FindProjectQuery > ( client , FindProjectDocument , ( cache ) => produce ( cache , ( draftCache ) => { draftCache . findProject . labels = cache . findProject . labels . filter ( ( label ) => label . id !== newLabelData . data ?. deleteProjectLabel . id ) ; } ) , { projectID } ) ; } , } ) ; const { data } = useLabelsQuery ( { variables : { projectID } } ) ; const labels = data ? data . findProject . labels : [ ] ; const taskLabels = taskLabelsRef && taskLabelsRef . current ? taskLabelsRef . current : [ ] ; const [ currentTaskLabels , setCurrentTaskLabels ] = useState ( taskLabels ) ; return ( < > < Popup title = "Labels" tab = { 0 } onClose = { ( ) => hidePopup ( ) } > < LabelManager labels = { data ? data . findProject . labels : [ ] } taskLabels = { currentTaskLabels } onLabelCreate = { ( ) => { 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 if ( data ) { const newProjectLabel = data . findProject . labels . find ( ( l ) => l . id === labelId ) ; if ( newProjectLabel ) { setCurrentTaskLabels ( [ ... currentTaskLabels , { id : '' , assignedDate : '' , projectLabel : { ... newProjectLabel } } , ] ) ; } } setCurrentLabel ( labelId ) ; onLabelToggle ( labelId ) ; } else { setCurrentLabel ( labelId ) ; setTab ( 1 ) ; } } } /> < /Popup> < Popup onClose = { ( ) => hidePopup ( ) } title = "Edit label" tab = { 1 } > < LabelEditor labelColors = { labelColors } label = { labels . find ( ( label ) => 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 ) ; } } /> < /Popup> < Popup onClose = { ( ) => hidePopup ( ) } title = "Create new label" tab = { 2 } > < LabelEditor labelColors = { labelColors } label = { null } onLabelEdit = { ( _labelId , name , color ) => { createProjectLabel ( { variables : { projectID , labelColorID : color . id , name : name ?? '' } } ) ; setTab ( 0 ) ; } } /> < /Popup> < />); } ; export default LabelManagerEditor ;