React component
This is the React component that will render in the canvas. There's really nothing special about this. Ziggy provides some methods for loading and saving.
fetch()
loads the Flow values for the Block.update()
saves them.connections()
may not be required but is in this case. It loads the ZiggyConnection items so you can render them in a drop down, for example.
const HSCollectionWriteV1: FC<HubspotBodyV1Props> = React.memo(
({ nodeId, block }) => {
const fetch = useConnectionStore.getState().fetch
const updateBlock = useFlowStore.getState().updateBlock
const connections = useConnectionStore(state => state.connections)
if (!block) return <></>
const [config, setConfig] = useState<BlockConfig_HSCollectionWriteV1>(
block.config as BlockConfig_HSCollectionWriteV1,
)
const [isDirty, setIsDirty] = useState<boolean>(false)
const [connectionOptions, setConnectionOptions] = useState<
StandardDropdownItem[]
>([])
useEffect(() => {
const init = async () => {
await fetch()
}
init()
}, [])
useEffect(() => {
const options: StandardDropdownItem[] = connections.map(c => {
return {
id: c.uuid,
label: c.name,
}
})
setConnectionOptions(options)
}, [connections])
useEffect(() => {
setConfig(block.config as BlockConfig_HSCollectionWriteV1)
}, [block])
useEffect(() => {
if (isDirty) {
handleSave()
setIsDirty(false)
}
}, [isDirty])
const handleSave = async () => {
const copy = deepCopy(block)
copy.config = config
updateBlock(nodeId, copy)
setIsDirty(false)
}
const handleShouldUpsert = () => {
setConfig({ ...config, shouldUpsert: !config.shouldUpsert })
setIsDirty(true)
}
const handleShouldValidate = () => {
const newShouldValidate = !config.shouldValidate
const newConfig = { ...config, shouldValidate: newShouldValidate }
setConfig(newConfig)
const blockCopy = deepCopy(block)
blockCopy.numOutputs =
newShouldValidate && newConfig.useFailedValidationEdge ? 2 : 1
blockCopy.config = newConfig
updateBlock(nodeId, blockCopy)
}
const handleFailedValidationEdge = () => {
const newUseFailedValidationEdge = !config.useFailedValidationEdge
const newConfig = {
...config,
useFailedValidationEdge: newUseFailedValidationEdge,
}
setConfig(newConfig)
const blockCopy = deepCopy(block)
blockCopy.numOutputs = newUseFailedValidationEdge ? 2 : 1
blockCopy.config = newConfig
updateBlock(nodeId, blockCopy)
}
const handleSetConnection = (item: StandardDropdownItem) => {
setConfig({ ...config, connectionUuid: item.id })
setIsDirty(true)
}
const getCurrentItemPair = () => {
return connectionOptions.find(co => co.id === config.connectionUuid)
}
const handleUniqueIdPropertyName = (text: string) => {
setConfig({ ...config, uniqueIdPropertyName: text })
setIsDirty(true)
}
return (
<>
<div className="flex flex-col gap-1 min-w-[300px]">
{/*CONNECTION */}
<BlockParameterSection label="Connection">
<StandardDropdownPaired
options={connectionOptions}
onSelect={handleSetConnection}
item={getCurrentItemPair()}
/>
</BlockParameterSection>
{/*TYPE*/}
<BlockParameterSection label="Operation type">
<CheckboxWithLabel
label="Upsert"
checked={config.shouldUpsert}
onChange={handleShouldUpsert}
/>
<CheckboxWithLabel
className="mt-3"
label="Perform data property validation"
checked={config.shouldValidate}
onChange={handleShouldValidate}
/>
{config.shouldValidate && (
<CheckboxWithLabel
className="mt-3 ml-3"
label="Invalid to second output edge"
checked={config.useFailedValidationEdge}
onChange={handleFailedValidationEdge}
/>
)}
</BlockParameterSection>
<div className="pt-2">
<HSObjectName
config={config}
setConfig={setConfig as any}
onDirty={() => setIsDirty(true)}
/>
<div className="py-2"></div>
{config.shouldUpsert && (
<LabelInputPairVertical
label="HS property to match against"
value={config.uniqueIdPropertyName}
onChange={handleUniqueIdPropertyName}
/>
)}
</div>
</div>
</>
)
},
)
Last modified: 10 February 2025