Ziggy - Services and Product Help

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 Ziggy

  • Connection 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