import React from 'react' ; import { Button , Spinner } from '@blueprintjs/core' ; import { useMutation } from '@apollo/react-hooks' ; import { useDispatch , useSelector } from 'react-redux' ; import { loader } from 'graphql.macro' ; import { useSnackbar } from 'notistack' ; import { setAttributeInMap } from 'services/resourceAttributes/actions' ; import { onError } from 'services/apollo' ; import InputGroup from '../InputGroup' ; import { IAttribute , IInputGroup , IReduxStore } from 'types' ; const mCreateAttribute = loader ( 'src/graphql/mutations/createAttribute.graphql' ) ; const mCreateInputGroup = loader ( 'src/graphql/mutations/createInputGroup.graphql' ) ; interface Props { attribute : IAttribute ; isEmpty : boolean ; } const InputGroups = ( { attribute , isEmpty } ) => { const dispatch = useDispatch ( ) ; const { enqueueSnackbar } = useSnackbar ( ) ; const selectedNode = useSelector ( ( state ) => state . selectedNode ) ; const path = selectedNode . attribute . path ; const attributesForResource = useSelector ( ( state ) => state . resourceAttributes ) ; let attributeId = attribute ?. id ; const [ createAttribute ] = useMutation ( mCreateAttribute , { onError : onError ( enqueueSnackbar ) } ) ; const [ createInputGroup ] = useMutation ( mCreateInputGroup , { onError : onError ( enqueueSnackbar ) } ) ; if ( ! attribute && ! isEmpty ) { return < Spinner />; } const inputGroups = attribute ?. inputGroups || [ ] ; const onAddInputGroup = async ( ) => { if ( isEmpty ) { const { data : attr } = await createAttribute ( { variables : { resourceId : selectedNode . resource . id , definitionId : selectedNode . attribute . types [ 0 ] , path , sliceName : selectedNode . attribute . definition . sliceName } } ) ; attributeId = attr . createAttribute . id ; const { data : dataAttribute } = await createInputGroup ( { variables : { attributeId : attr . createAttribute . id } } ) ; let currentAttribute = selectedNode . attribute ; while ( currentAttribute . parent ) { currentAttribute = currentAttribute . parent ; const parentPath = currentAttribute . path ; if ( ! attributesForResource [ parentPath ] && ! currentAttribute . isArray && currentAttribute . types . length <= 1 ) { createAttribute ( { variables : { resourceId : selectedNode . resource . id , definitionId : currentAttribute . types [ 0 ] , path : parentPath , sliceName : currentAttribute . definition . sliceName } } ) ; } } dispatch ( setAttributeInMap ( path , dataAttribute . createInputGroup ) ) ; } else { createInputGroup ( { variables : { attributeId } } ) ; } } ; return ( < div id = "input-groups" > { inputGroups . map ( ( inputGroup , index ) => inputGroup ? ( < InputGroup key = { index } inputGroup = { inputGroup } attribute = { attribute } / > ) : null ) } < div > < Button icon = { 'add' } text = { 'Input group' } onClick = { onAddInputGroup } / > < /div> < /div>); } ; export default InputGroups ;