From afa84a845169a4cccf296c9700914ffe0d33fd73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Thu, 18 Mar 2021 12:32:07 +0100 Subject: [PATCH 001/143] refactor: switch to parser-js in most places (#264) --- library/src/containers/AsyncApi/AsyncApi.tsx | 101 ++++++++--------- library/src/containers/Channels/Channel.tsx | 107 ++++++++---------- library/src/containers/Channels/Channels.tsx | 22 ++-- library/src/containers/Channels/Operation.tsx | 55 ++++----- library/src/containers/Channels/Parameter.tsx | 56 ++++----- .../src/containers/Channels/Parameters.tsx | 14 +-- library/src/containers/Info/Info.tsx | 44 ++++--- library/src/containers/Info/License.tsx | 1 - library/src/containers/Messages/Message.tsx | 100 ++++++++-------- library/src/containers/Messages/Messages.tsx | 34 +++--- library/src/containers/Messages/Payload.tsx | 31 +++-- library/src/containers/Schemas/Schemas.tsx | 13 +-- library/src/containers/Servers/Flow.tsx | 73 ++++++------ library/src/containers/Servers/Flows.tsx | 39 +++---- library/src/containers/Servers/Security.tsx | 25 ++-- .../src/containers/Servers/SecurityItem.tsx | 18 +-- library/src/containers/Servers/Server.tsx | 90 ++++++++------- library/src/containers/Servers/Servers.tsx | 22 ++-- library/src/containers/Servers/Variables.tsx | 17 ++- library/src/helpers/parser.ts | 6 +- library/src/store/index.ts | 1 + library/src/store/useSpec.ts | 12 ++ library/src/types.ts | 2 + 23 files changed, 454 insertions(+), 429 deletions(-) create mode 100644 library/src/store/useSpec.ts diff --git a/library/src/containers/AsyncApi/AsyncApi.tsx b/library/src/containers/AsyncApi/AsyncApi.tsx index 8841dac76..f2f6aee6d 100644 --- a/library/src/containers/AsyncApi/AsyncApi.tsx +++ b/library/src/containers/AsyncApi/AsyncApi.tsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { AsyncAPIDocument } from '@asyncapi/parser'; import { AsyncAPI, @@ -11,7 +12,7 @@ import { import { ConfigInterface, defaultConfig } from '../../config'; import { beautifier, bemClasses, stateHelpers, Parser } from '../../helpers'; import { CSS_PREFIX } from '../../constants'; -import { useExpandedContext, useChangeHashContext } from '../../store'; +import { useSpec, useExpandedContext, useChangeHashContext } from '../../store'; import { ErrorComponent } from '../Error/Error'; import { InfoComponent } from '../Info/Info'; @@ -22,6 +23,7 @@ import { SchemasComponent } from '../Schemas/Schemas'; interface AsyncAPIState { validatedSchema: NullableAsyncApi; + asyncapi: AsyncAPIDocument | null; error?: ErrorObject; } @@ -37,6 +39,7 @@ const defaultAsyncApi: AsyncAPI = { class AsyncApiComponent extends Component { state: AsyncAPIState = { validatedSchema: defaultAsyncApi, + asyncapi: null, error: undefined, }; private readonly parser: Parser; @@ -66,7 +69,7 @@ class AsyncApiComponent extends Component { render() { const { config } = this.props; - const { validatedSchema, error } = this.state; + const { validatedSchema, asyncapi, error } = this.state; const concatenatedConfig: ConfigInterface = { ...defaultConfig, ...config, @@ -80,7 +83,11 @@ class AsyncApiComponent extends Component { }, }; - if (!validatedSchema || !Object.keys(validatedSchema).length) { + if ( + !validatedSchema || + !Object.keys(validatedSchema).length || + asyncapi === null + ) { if (!error) { return null; } @@ -105,69 +112,57 @@ class AsyncApiComponent extends Component { ); return ( - - -
- {concatenatedConfig.showErrors && !!error && ( - - )} - {concatenatedConfig.show.info && validatedSchema.info && ( - - )} - {concatenatedConfig.show.channels && validatedSchema.channels && ( - - )} - {concatenatedConfig.show.servers && !!validatedSchema.servers && ( - - )} - {validatedSchema.components && ( -
- {concatenatedConfig.show.messages && - validatedSchema.components.messages && ( + + + +
+ {concatenatedConfig.showErrors && !!error && ( + + )} + {concatenatedConfig.show.info && } + {concatenatedConfig.show.channels && ( + + )} + {concatenatedConfig.show.servers && ( + + )} + {validatedSchema.components && ( +
+ {concatenatedConfig.show.messages && ( )} - {concatenatedConfig.show.schemas && - validatedSchema.components.schemas && ( + {concatenatedConfig.show.schemas && ( )} -
- )} -
- - +
+ )} +
+ + + ); } @@ -179,6 +174,7 @@ class AsyncApiComponent extends Component { ); this.setState({ validatedSchema: this.beautifySchema(parsedFromUrl.data), + asyncapi: parsedFromUrl.asyncapi, error: parsedFromUrl.error, }); return; @@ -187,6 +183,7 @@ class AsyncApiComponent extends Component { const parsed = await this.parser.parse(schema, parserOptions); this.setState({ validatedSchema: this.beautifySchema(parsed.data), + asyncapi: parsed.asyncapi, error: parsed.error, }); } diff --git a/library/src/containers/Channels/Channel.tsx b/library/src/containers/Channels/Channel.tsx index 29c23f2ca..c0f5e6d33 100644 --- a/library/src/containers/Channels/Channel.tsx +++ b/library/src/containers/Channels/Channel.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Channel } from '@asyncapi/parser'; import { OperationComponent } from './Operation'; import { Parameters as ParametersComponent } from './Parameters'; @@ -6,62 +7,54 @@ import { Parameters as ParametersComponent } from './Parameters'; import { Badge, BadgeType, Markdown, Toggle } from '../../components'; import { bemClasses, removeSpecialChars } from '../../helpers'; import { MESSAGE_TEXT, ITEM_LABELS, CONTAINER_LABELS } from '../../constants'; -import { Channel, RawMessage, isRawMessage, PayloadType } from '../../types'; +import { PayloadType } from '../../types'; interface Props { - name: string; + channelName: string; channel: Channel; toggleExpand?: boolean; } export const ChannelComponent: React.FunctionComponent = ({ - name, + channelName, channel, toggleExpand = false, }) => { const className = ITEM_LABELS.CHANNEL; - const identifier = bemClasses.identifier([CONTAINER_LABELS.CHANNELS, name]); + const identifier = bemClasses.identifier([ + CONTAINER_LABELS.CHANNELS, + channelName, + ]); const dataIdentifier = bemClasses.identifier([ CONTAINER_LABELS.CHANNELS, - removeSpecialChars(name), + removeSpecialChars(channelName), ]); - const message = - (channel.publish && channel.publish.message) || - (channel.subscribe && channel.subscribe.message); + const hasPublish = channel.hasPublish(); + const publish = channel.publish(); - const oneOfPublish = - channel.publish && - channel.publish.message && - !isRawMessage(channel.publish.message); + const hasSubscribe = channel.hasSubscribe(); + const subscribe = channel.subscribe(); - const oneOfSubscribe = - channel.subscribe && - channel.subscribe.message && - !isRawMessage(channel.subscribe.message); + const message = + (hasPublish && publish.message()) || (hasSubscribe && subscribe.message()); + + const oneOfPublish = hasPublish && publish.hasMultipleMessages(); + const oneOfSubscribe = hasSubscribe && subscribe.hasMultipleMessages(); - const oneOfExists = Boolean(oneOfPublish || oneOfSubscribe); + const oneOfExists = oneOfPublish || oneOfSubscribe; const header = (

    - {channel.deprecated && ( -
  • - -
    • - )} - {channel.publish && ( + {hasPublish && (
    • )} - {channel.subscribe && ( + {hasSubscribe && (
  • = ({ )}
- {name} + {channelName}

); const content = ( <> - {channel.description && ( + {channel.hasDescription() && (
- {channel.description} + {channel.description()}
)} - + {channel.hasParameters() && ( + + )}
{oneOfExists ? null : (

- - {(message as RawMessage)?.title || - (message as RawMessage)?.name || - MESSAGE_TEXT} - + {(message && message.uid()) || MESSAGE_TEXT}

)}