From 6a8ec97c3173cb00ef7c13ae2f569a218cfe4faa Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Fri, 4 Mar 2022 20:02:40 +0100 Subject: [PATCH] refactor: add formattedData in IConnection references --- packages/types/index.d.ts | 7 ++++--- .../web/src/components/AppConnectionRow/index.tsx | 4 ++-- .../src/components/ChooseAccountSubstep/index.tsx | 6 +++--- .../web/src/graphql/mutations/create-connection.ts | 4 ++-- .../web/src/graphql/mutations/update-connection.ts | 2 +- .../web/src/graphql/mutations/verify-connection.ts | 2 +- .../web/src/graphql/queries/get-app-connections.ts | 2 +- packages/web/src/helpers/authenticationSteps.ts | 12 ++++++------ packages/web/src/types/connection.ts | 4 ++-- 9 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts index 83a396f3..a972acd9 100644 --- a/packages/types/index.d.ts +++ b/packages/types/index.d.ts @@ -6,10 +6,11 @@ export interface IJSONObject { [x: string]: IJSONValue; } -export interface IConnection { +export interface IConnection { id: string; key: string; - data: D; + data: string; + formattedData: IJSONObject; userId: string; verified: boolean; count: number; @@ -43,7 +44,7 @@ export interface IStep { status: string; position: number; parameters: Record; - connection: IConnection; + connection: Partial; flow: IFlow; executionSteps: IExecutionStep[]; // FIXME: remove this property once execution steps are properly exposed via queries diff --git a/packages/web/src/components/AppConnectionRow/index.tsx b/packages/web/src/components/AppConnectionRow/index.tsx index 8faeb035..913d7148 100644 --- a/packages/web/src/components/AppConnectionRow/index.tsx +++ b/packages/web/src/components/AppConnectionRow/index.tsx @@ -42,7 +42,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement { const [deleteConnection] = useMutation(DELETE_CONNECTION); const formatMessage = useFormatMessage(); - const { id, key, data, verified, createdAt } = props.connection; + const { id, key, formattedData, verified, createdAt } = props.connection; const contextButtonRef = React.useRef(null); const [anchorEl, setAnchorEl] = React.useState(null); @@ -88,7 +88,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement { spacing={1} > - {data.screenName} + {formattedData?.screenName} diff --git a/packages/web/src/components/ChooseAccountSubstep/index.tsx b/packages/web/src/components/ChooseAccountSubstep/index.tsx index 6453ceac..e7ff46e8 100644 --- a/packages/web/src/components/ChooseAccountSubstep/index.tsx +++ b/packages/web/src/components/ChooseAccountSubstep/index.tsx @@ -21,12 +21,12 @@ type ChooseAccountSubstepProps = { step: IStep; }; -const optionGenerator = (connection: IConnection): { label: string; value: string; } => ({ - label: connection?.data?.screenName as string ?? 'Unnamed', +const optionGenerator = (connection: IConnection): { label: string; value: string; } => ({ + label: connection?.formattedData?.screenName as string ?? 'Unnamed', value: connection?.id as string, }); -const getOption = (options: Record[], connectionId: string) => options.find(connection => connection.value === connectionId) || null; +const getOption = (options: Record[], connectionId?: string) => options.find(connection => connection.value === connectionId) || null; function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElement { const { diff --git a/packages/web/src/graphql/mutations/create-connection.ts b/packages/web/src/graphql/mutations/create-connection.ts index 0967546a..38fbd6e8 100644 --- a/packages/web/src/graphql/mutations/create-connection.ts +++ b/packages/web/src/graphql/mutations/create-connection.ts @@ -2,11 +2,11 @@ import { gql } from '@apollo/client'; export const CREATE_CONNECTION = gql` mutation CreateConnection($key: AvailableAppsEnumType!, $data: JSONObject!) { - createConnection(key: $key, data: $data) { + createConnection(key: $key, formattedData: $data) { id key verified - data { + formattedData { screenName } app { diff --git a/packages/web/src/graphql/mutations/update-connection.ts b/packages/web/src/graphql/mutations/update-connection.ts index a2b617b7..8f323d61 100644 --- a/packages/web/src/graphql/mutations/update-connection.ts +++ b/packages/web/src/graphql/mutations/update-connection.ts @@ -6,7 +6,7 @@ export const UPDATE_CONNECTION = gql` id key verified - data { + formattedData { screenName } } diff --git a/packages/web/src/graphql/mutations/verify-connection.ts b/packages/web/src/graphql/mutations/verify-connection.ts index 7233798b..6e8684ab 100644 --- a/packages/web/src/graphql/mutations/verify-connection.ts +++ b/packages/web/src/graphql/mutations/verify-connection.ts @@ -5,7 +5,7 @@ export const VERIFY_CONNECTION = gql` verifyConnection(id: $id) { id verified - data { + formattedData { screenName } } diff --git a/packages/web/src/graphql/queries/get-app-connections.ts b/packages/web/src/graphql/queries/get-app-connections.ts index 81c64060..e8a972fe 100644 --- a/packages/web/src/graphql/queries/get-app-connections.ts +++ b/packages/web/src/graphql/queries/get-app-connections.ts @@ -8,7 +8,7 @@ export const GET_APP_CONNECTIONS = gql` id key verified - data { + formattedData { screenName } createdAt diff --git a/packages/web/src/helpers/authenticationSteps.ts b/packages/web/src/helpers/authenticationSteps.ts index d18ab4f4..08fead94 100644 --- a/packages/web/src/helpers/authenticationSteps.ts +++ b/packages/web/src/helpers/authenticationSteps.ts @@ -1,4 +1,4 @@ -import type { IAuthenticationStep } from '@automatisch/types'; +import type { IAuthenticationStep, IJSONObject } from '@automatisch/types'; import apolloClient from 'graphql/client'; import MUTATIONS from 'graphql/mutations'; import appConfig from 'config/app'; @@ -8,7 +8,7 @@ enum AuthenticationSteps { OpenWithPopup = 'openWithPopup', } -const processMutation = async (step: IAuthenticationStep, variables: Record) => { +const processMutation = async (step: IAuthenticationStep, variables: IJSONObject) => { const mutation = MUTATIONS[step.name]; const mutationResponse = await apolloClient.mutate({ mutation, variables }); const responseData = mutationResponse.data[step.name]; @@ -32,15 +32,15 @@ function getObjectOfEntries(iterator: any) { return result; } -const processOpenWithPopup = (step: IAuthenticationStep, variables: Record) => { +const processOpenWithPopup = (step: IAuthenticationStep, variables: IJSONObject) => { return new Promise((resolve) => { const windowFeatures = 'toolbar=no, titlebar=no, menubar=no, width=500, height=700, top=100, left=100'; const url = variables.url; - const popup = window.open(url, '_blank', windowFeatures) as WindowProxy; + const popup = window.open(url as string, '_blank', windowFeatures) as WindowProxy; popup?.focus(); - const messageHandler = async (event: any) => { + const messageHandler = async (event: MessageEvent) => { // check origin and data.source to trust the event if (event.origin !== appConfig.baseUrl || event.data.source !== 'automatisch') { return; @@ -56,7 +56,7 @@ const processOpenWithPopup = (step: IAuthenticationStep, variables: Record): Promise => { +export const processStep = async (step: IAuthenticationStep, variables: IJSONObject): Promise => { if (step.type === AuthenticationSteps.Mutation) { return processMutation(step, variables); } else if (step.type === AuthenticationSteps.OpenWithPopup) { diff --git a/packages/web/src/types/connection.ts b/packages/web/src/types/connection.ts index a2c12e54..4f0d85ee 100644 --- a/packages/web/src/types/connection.ts +++ b/packages/web/src/types/connection.ts @@ -1,3 +1,3 @@ -import type { IConnection, IJSONObject } from '@automatisch/types'; +import type { IConnection } from '@automatisch/types'; -export type Connection = IConnection; +export type Connection = IConnection;