From 8294a6c5630cd404389df04967d0890257d26554 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Mon, 30 Jan 2023 16:36:00 +0200 Subject: [PATCH 1/2] optimize data fetching - pass "destination" through react-router outlet context --- .../DestinationItemPage/DestinationItemPage.tsx | 5 ++--- .../src/pages/destination/DestinationOverviewPage.tsx | 10 +++++----- .../DestinationSettingsPage.tsx | 10 ++++------ 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/airbyte-webapp/src/pages/destination/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/destination/DestinationItemPage/DestinationItemPage.tsx index 7fc4bf1bef9e..349122b02d94 100644 --- a/airbyte-webapp/src/pages/destination/DestinationItemPage/DestinationItemPage.tsx +++ b/airbyte-webapp/src/pages/destination/DestinationItemPage/DestinationItemPage.tsx @@ -10,12 +10,11 @@ import { Breadcrumbs } from "components/ui/Breadcrumbs"; import { PageHeader } from "components/ui/PageHeader"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; +import { useGetDestination } from "hooks/services/useDestinationHook"; import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary"; import { StartOverErrorView } from "views/common/StartOverErrorView"; import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout"; -import { useGetDestination } from "../../../hooks/services/useDestinationHook"; - export const DestinationItemPage: React.FC = () => { useTrackPage(PageTrackingCodes.DESTINATION_ITEM); const params = useParams() as { "*": StepsTypes | ""; id: string }; @@ -48,7 +47,7 @@ export const DestinationItemPage: React.FC = () => { /> }> - + diff --git a/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx b/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx index 1996af562bb6..5d1abf493998 100644 --- a/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx +++ b/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx @@ -1,23 +1,23 @@ import { useMemo } from "react"; -import { useNavigate, useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; +import { useOutletContext } from "react-router-dom"; import { ConnectorIcon } from "components/common/ConnectorIcon"; -import { StepsTypes, TableItemTitle } from "components/ConnectorBlocks"; +import { TableItemTitle } from "components/ConnectorBlocks"; import { DestinationConnectionTable } from "components/destination/DestinationConnectionTable"; import Placeholder, { ResourceTypes } from "components/Placeholder"; import { DropdownMenuOptionType } from "components/ui/DropdownMenu"; +import { DestinationRead } from "core/request/AirbyteClient"; import { useConnectionList } from "hooks/services/useConnectionHook"; -import { useGetDestination } from "hooks/services/useDestinationHook"; import { useSourceList } from "hooks/services/useSourceHook"; import { DestinationPaths } from "pages/routePaths"; import { useDestinationDefinition } from "services/connector/DestinationDefinitionService"; export const DestinationOverviewPage = () => { - const params = useParams() as { "*": StepsTypes | ""; id: string }; const navigate = useNavigate(); - const destination = useGetDestination(params.id); + const { destination } = useOutletContext<{ destination: DestinationRead }>(); const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId); // We load only connections attached to this destination to be shown in the connections grid const { connections } = useConnectionList({ destinationId: [destination.destinationId] }); diff --git a/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx b/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx index 9e46d6bed34e..55923ed18971 100644 --- a/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx +++ b/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx @@ -1,13 +1,12 @@ import React, { useCallback } from "react"; import { FormattedMessage } from "react-intl"; -import { useParams } from "react-router-dom"; - -import { StepsTypes } from "components/ConnectorBlocks"; +import { useOutletContext } from "react-router-dom"; +import { DestinationRead } from "core/request/AirbyteClient"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker"; import { useConnectionList } from "hooks/services/useConnectionHook"; -import { useDeleteDestination, useGetDestination, useUpdateDestination } from "hooks/services/useDestinationHook"; +import { useDeleteDestination, useUpdateDestination } from "hooks/services/useDestinationHook"; import { useDeleteModal } from "hooks/useDeleteModal"; import { useDestinationDefinition } from "services/connector/DestinationDefinitionService"; import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService"; @@ -17,8 +16,7 @@ import { ConnectorCardValues } from "views/Connector/ConnectorForm/types"; import styles from "./DestinationSettings.module.scss"; export const DestinationSettingsPage: React.FC = () => { - const params = useParams() as { "*": StepsTypes | ""; id: string }; - const destination = useGetDestination(params.id); + const { destination } = useOutletContext<{ destination: DestinationRead }>(); const { connections: connectionsWithDestination } = useConnectionList({ destinationId: [destination.destinationId] }); const destinationSpecification = useGetDestinationDefinitionSpecification(destination.destinationDefinitionId); const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId); From ce74cb5f5abf477e7967e718ce6c7aab5a413fdc Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Tue, 31 Jan 2023 13:32:00 +0200 Subject: [PATCH 2/2] extract destination outlet context to separate interface --- .../src/pages/destination/DestinationOverviewPage.tsx | 5 +++-- .../DestinationSettingsPage/DestinationSettingsPage.tsx | 4 ++-- airbyte-webapp/src/pages/destination/types.ts | 5 +++++ 3 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 airbyte-webapp/src/pages/destination/types.ts diff --git a/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx b/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx index 5d1abf493998..a0c63fd0d1d1 100644 --- a/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx +++ b/airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx @@ -8,16 +8,17 @@ import { DestinationConnectionTable } from "components/destination/DestinationCo import Placeholder, { ResourceTypes } from "components/Placeholder"; import { DropdownMenuOptionType } from "components/ui/DropdownMenu"; -import { DestinationRead } from "core/request/AirbyteClient"; import { useConnectionList } from "hooks/services/useConnectionHook"; import { useSourceList } from "hooks/services/useSourceHook"; import { DestinationPaths } from "pages/routePaths"; import { useDestinationDefinition } from "services/connector/DestinationDefinitionService"; +import { DestinationOutletContext } from "./types"; + export const DestinationOverviewPage = () => { const navigate = useNavigate(); - const { destination } = useOutletContext<{ destination: DestinationRead }>(); + const { destination } = useOutletContext(); const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId); // We load only connections attached to this destination to be shown in the connections grid const { connections } = useConnectionList({ destinationId: [destination.destinationId] }); diff --git a/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx b/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx index 55923ed18971..45e2f96440fb 100644 --- a/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx +++ b/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx @@ -2,7 +2,6 @@ import React, { useCallback } from "react"; import { FormattedMessage } from "react-intl"; import { useOutletContext } from "react-router-dom"; -import { DestinationRead } from "core/request/AirbyteClient"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker"; import { useConnectionList } from "hooks/services/useConnectionHook"; @@ -14,9 +13,10 @@ import { ConnectorCard } from "views/Connector/ConnectorCard"; import { ConnectorCardValues } from "views/Connector/ConnectorForm/types"; import styles from "./DestinationSettings.module.scss"; +import { DestinationOutletContext } from "../types"; export const DestinationSettingsPage: React.FC = () => { - const { destination } = useOutletContext<{ destination: DestinationRead }>(); + const { destination } = useOutletContext(); const { connections: connectionsWithDestination } = useConnectionList({ destinationId: [destination.destinationId] }); const destinationSpecification = useGetDestinationDefinitionSpecification(destination.destinationDefinitionId); const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId); diff --git a/airbyte-webapp/src/pages/destination/types.ts b/airbyte-webapp/src/pages/destination/types.ts new file mode 100644 index 000000000000..c84baf79e2d9 --- /dev/null +++ b/airbyte-webapp/src/pages/destination/types.ts @@ -0,0 +1,5 @@ +import { DestinationRead } from "core/request/AirbyteClient"; + +export interface DestinationOutletContext { + destination: DestinationRead; +}