refactor: add formattedData in IConnection references

This commit is contained in:
Ali BARIN
2022-03-04 20:02:40 +01:00
committed by Ömer Faruk Aydın
parent 719a948134
commit 6a8ec97c31
9 changed files with 22 additions and 21 deletions

View File

@@ -6,10 +6,11 @@ export interface IJSONObject {
[x: string]: IJSONValue; [x: string]: IJSONValue;
} }
export interface IConnection<D extends IJSONObject | string> { export interface IConnection {
id: string; id: string;
key: string; key: string;
data: D; data: string;
formattedData: IJSONObject;
userId: string; userId: string;
verified: boolean; verified: boolean;
count: number; count: number;
@@ -43,7 +44,7 @@ export interface IStep {
status: string; status: string;
position: number; position: number;
parameters: Record<string, unknown>; parameters: Record<string, unknown>;
connection: IConnection; connection: Partial<IConnection>;
flow: IFlow; flow: IFlow;
executionSteps: IExecutionStep[]; executionSteps: IExecutionStep[];
// FIXME: remove this property once execution steps are properly exposed via queries // FIXME: remove this property once execution steps are properly exposed via queries

View File

@@ -42,7 +42,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
const [deleteConnection] = useMutation(DELETE_CONNECTION); const [deleteConnection] = useMutation(DELETE_CONNECTION);
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const { id, key, data, verified, createdAt } = props.connection; const { id, key, formattedData, verified, createdAt } = props.connection;
const contextButtonRef = React.useRef<SVGSVGElement | null>(null); const contextButtonRef = React.useRef<SVGSVGElement | null>(null);
const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null); const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null);
@@ -88,7 +88,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
spacing={1} spacing={1}
> >
<Typography variant="h6"> <Typography variant="h6">
{data.screenName} {formattedData?.screenName}
</Typography> </Typography>
<Typography variant="caption"> <Typography variant="caption">

View File

@@ -21,12 +21,12 @@ type ChooseAccountSubstepProps = {
step: IStep; step: IStep;
}; };
const optionGenerator = (connection: IConnection<IJSONObject>): { label: string; value: string; } => ({ const optionGenerator = (connection: IConnection): { label: string; value: string; } => ({
label: connection?.data?.screenName as string ?? 'Unnamed', label: connection?.formattedData?.screenName as string ?? 'Unnamed',
value: connection?.id as string, value: connection?.id as string,
}); });
const getOption = (options: Record<string, unknown>[], connectionId: string) => options.find(connection => connection.value === connectionId) || null; const getOption = (options: Record<string, unknown>[], connectionId?: string) => options.find(connection => connection.value === connectionId) || null;
function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElement { function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElement {
const { const {

View File

@@ -2,11 +2,11 @@ import { gql } from '@apollo/client';
export const CREATE_CONNECTION = gql` export const CREATE_CONNECTION = gql`
mutation CreateConnection($key: AvailableAppsEnumType!, $data: JSONObject!) { mutation CreateConnection($key: AvailableAppsEnumType!, $data: JSONObject!) {
createConnection(key: $key, data: $data) { createConnection(key: $key, formattedData: $data) {
id id
key key
verified verified
data { formattedData {
screenName screenName
} }
app { app {

View File

@@ -6,7 +6,7 @@ export const UPDATE_CONNECTION = gql`
id id
key key
verified verified
data { formattedData {
screenName screenName
} }
} }

View File

@@ -5,7 +5,7 @@ export const VERIFY_CONNECTION = gql`
verifyConnection(id: $id) { verifyConnection(id: $id) {
id id
verified verified
data { formattedData {
screenName screenName
} }
} }

View File

@@ -8,7 +8,7 @@ export const GET_APP_CONNECTIONS = gql`
id id
key key
verified verified
data { formattedData {
screenName screenName
} }
createdAt createdAt

View File

@@ -1,4 +1,4 @@
import type { IAuthenticationStep } from '@automatisch/types'; import type { IAuthenticationStep, IJSONObject } from '@automatisch/types';
import apolloClient from 'graphql/client'; import apolloClient from 'graphql/client';
import MUTATIONS from 'graphql/mutations'; import MUTATIONS from 'graphql/mutations';
import appConfig from 'config/app'; import appConfig from 'config/app';
@@ -8,7 +8,7 @@ enum AuthenticationSteps {
OpenWithPopup = 'openWithPopup', OpenWithPopup = 'openWithPopup',
} }
const processMutation = async (step: IAuthenticationStep, variables: Record<string, unknown>) => { const processMutation = async (step: IAuthenticationStep, variables: IJSONObject) => {
const mutation = MUTATIONS[step.name]; const mutation = MUTATIONS[step.name];
const mutationResponse = await apolloClient.mutate({ mutation, variables }); const mutationResponse = await apolloClient.mutate({ mutation, variables });
const responseData = mutationResponse.data[step.name]; const responseData = mutationResponse.data[step.name];
@@ -32,15 +32,15 @@ function getObjectOfEntries(iterator: any) {
return result; return result;
} }
const processOpenWithPopup = (step: IAuthenticationStep, variables: Record<string, string>) => { const processOpenWithPopup = (step: IAuthenticationStep, variables: IJSONObject) => {
return new Promise((resolve) => { return new Promise((resolve) => {
const windowFeatures = 'toolbar=no, titlebar=no, menubar=no, width=500, height=700, top=100, left=100'; const windowFeatures = 'toolbar=no, titlebar=no, menubar=no, width=500, height=700, top=100, left=100';
const url = variables.url; 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(); popup?.focus();
const messageHandler = async (event: any) => { const messageHandler = async (event: MessageEvent) => {
// check origin and data.source to trust the event // check origin and data.source to trust the event
if (event.origin !== appConfig.baseUrl || event.data.source !== 'automatisch') { if (event.origin !== appConfig.baseUrl || event.data.source !== 'automatisch') {
return; return;
@@ -56,7 +56,7 @@ const processOpenWithPopup = (step: IAuthenticationStep, variables: Record<strin
}); });
}; };
export const processStep = async (step: IAuthenticationStep, variables: Record<string, string>): Promise<any> => { export const processStep = async (step: IAuthenticationStep, variables: IJSONObject): Promise<any> => {
if (step.type === AuthenticationSteps.Mutation) { if (step.type === AuthenticationSteps.Mutation) {
return processMutation(step, variables); return processMutation(step, variables);
} else if (step.type === AuthenticationSteps.OpenWithPopup) { } else if (step.type === AuthenticationSteps.OpenWithPopup) {

View File

@@ -1,3 +1,3 @@
import type { IConnection, IJSONObject } from '@automatisch/types'; import type { IConnection } from '@automatisch/types';
export type Connection = IConnection<IJSONObject>; export type Connection = IConnection;