From 16b9a41b0d5f311a17ce79c4e4113511e183ed92 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Sun, 3 Nov 2024 10:17:33 +0200 Subject: [PATCH 1/2] fix: refetch after create destination --- .../connect-destination-modal-body/index.tsx | 85 +++++-------------- 1 file changed, 22 insertions(+), 63 deletions(-) diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx index e1954ce8e..b105c14c5 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx @@ -9,19 +9,8 @@ import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql'; import { Body, Container, SideMenuWrapper } from '../styled'; import { Divider, SectionTitle } from '@/reuseable-components'; import { ConnectionNotification } from './connection-notification'; -import { - useConnectDestinationForm, - useConnectEnv, - useDestinationFormData, - useEditDestinationFormHandlers, -} from '@/hooks'; -import { - StepProps, - DestinationInput, - DestinationTypeItem, - DestinationDetailsResponse, - ConfiguredDestination, -} from '@/types'; +import { useComputePlatform, useConnectDestinationForm, useConnectEnv, useDestinationFormData, useEditDestinationFormHandlers } from '@/hooks'; +import { StepProps, DestinationInput, DestinationTypeItem, DestinationDetailsResponse, ConfiguredDestination } from '@/types'; const SIDE_MENU_DATA: StepProps[] = [ { @@ -42,38 +31,24 @@ interface ConnectDestinationModalBodyProps { onFormValidChange: (isValid: boolean) => void; } -export function ConnectDestinationModalBody({ - destination, - onSubmitRef, - onFormValidChange, -}: ConnectDestinationModalBodyProps) { +export function ConnectDestinationModalBody({ destination, onSubmitRef, onFormValidChange }: ConnectDestinationModalBodyProps) { const [destinationName, setDestinationName] = useState(''); const [showConnectionError, setShowConnectionError] = useState(false); - const { - dynamicFields, - exportedSignals, - setDynamicFields, - setExportedSignals, - } = useDestinationFormData(); + const { dynamicFields, exportedSignals, setDynamicFields, setExportedSignals } = useDestinationFormData(); const { connectEnv } = useConnectEnv(); + const { refetch } = useComputePlatform(); const { buildFormDynamicFields } = useConnectDestinationForm(); - const { handleDynamicFieldChange, handleSignalChange } = - useEditDestinationFormHandlers(setExportedSignals, setDynamicFields); + const { handleDynamicFieldChange, handleSignalChange } = useEditDestinationFormHandlers(setExportedSignals, setDynamicFields); - const addConfiguredDestination = useAppStore( - ({ addConfiguredDestination }) => addConfiguredDestination - ); + const addConfiguredDestination = useAppStore(({ addConfiguredDestination }) => addConfiguredDestination); - const { data } = useQuery( - GET_DESTINATION_TYPE_DETAILS, - { - variables: { type: destination?.type }, - skip: !destination, - } - ); + const { data } = useQuery(GET_DESTINATION_TYPE_DETAILS, { + variables: { type: destination?.type }, + skip: !destination, + }); useLayoutEffect(() => { if (!destination) return; @@ -109,9 +84,7 @@ export function ConnectDestinationModalBody({ }, [dynamicFields, destinationName, exportedSignals]); useEffect(() => { - const isFormValid = dynamicFields.every((field) => - field.required ? field.value : true - ); + const isFormValid = dynamicFields.every((field) => (field.required ? field.value : true)); onFormValidChange(isFormValid); }, [dynamicFields]); @@ -131,9 +104,7 @@ export function ConnectDestinationModalBody({ handleDynamicFieldChange(name, value); } function processFieldValue(field) { - return field.componentType === INPUT_TYPES.DROPDOWN - ? field.value.value - : field.value; + return field.componentType === INPUT_TYPES.DROPDOWN ? field.value.value : field.value; } function processFormFields() { @@ -185,17 +156,16 @@ export function ConnectDestinationModalBody({ try { // Await connection and store the configured destination if successful - await connectEnv(body, storeConfiguredDestination); + // await connectEnv(body, storeConfiguredDestination); + await connectEnv(body, refetch); } catch (error) { console.error('Failed to submit destination configuration:', error); // Handle error (e.g., show notification or alert) } } - if (!destination) return null; - const actionButton = useMemo(() => { - if (destination.testConnectionSupported) { + if (!!destination?.testConnectionSupported) { return ( { @@ -212,13 +182,9 @@ export function ConnectDestinationModalBody({ ); } return null; - }, [ - destination, - destinationName, - exportedSignals, - processFormFields, - onFormValidChange, - ]); + }, [destination, destinationName, exportedSignals, processFormFields, onFormValidChange]); + + if (!destination) return null; return ( @@ -227,16 +193,9 @@ export function ConnectDestinationModalBody({ - - - + + + Date: Sun, 3 Nov 2024 10:21:09 +0200 Subject: [PATCH 2/2] fix: refetch after update destination --- .../hooks/destinations/useUpdateDestination.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/webapp/hooks/destinations/useUpdateDestination.ts b/frontend/webapp/hooks/destinations/useUpdateDestination.ts index d060dc42e..4970a940c 100644 --- a/frontend/webapp/hooks/destinations/useUpdateDestination.ts +++ b/frontend/webapp/hooks/destinations/useUpdateDestination.ts @@ -4,24 +4,23 @@ import { UPDATE_DESTINATION } from '@/graphql'; import { useDrawerStore } from '@/store'; import { DestinationInput } from '@/types'; import { useMutation } from '@apollo/client'; +import { useComputePlatform } from '../compute-platform'; export function useUpdateDestination() { const [updateDestinationMutation] = useMutation(UPDATE_DESTINATION); - const setDrawerItem = useDrawerStore( - ({ setSelectedItem }) => setSelectedItem - ); + const setDrawerItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem); + const { refetch } = useComputePlatform(); - async function updateExistingDestination( - id: string, - destination: DestinationInput - ) { + async function updateExistingDestination(id: string, destination: DestinationInput) { try { const { data } = await updateDestinationMutation({ variables: { id, destination }, }); - setDrawerItem({ id, item: data?.updateDestination, type: 'destination' }); - console.log({ data }); + + setDrawerItem(null); + refetch(); + return data?.updateDestination?.id; } catch (error) { console.error('Error updating destination:', error);