Add error handling (#27)

* Fix application

Author: akucharska

library/src/config/config.ts

@@ -1,6 +1,7 @@
 export interface ConfigInterface {
-  show: ShowConfig,
-  disableDefaultTheme: boolean,
+  show: ShowConfig;
+  disableDefaultTheme: boolean;
+  showErrors: boolean;
 }
 
 interface ShowConfig {
@@ -13,4 +14,3 @@ interface ShowConfig {
   messages: boolean;
   schemas: boolean;
 }
-  

library/src/config/default.ts

@@ -11,5 +11,6 @@ export const defaultConfig: ConfigInterface = {
     messages: true,
     schemas: true,
   },
+  showErrors: false,
   disableDefaultTheme: false,
-}
+};

library/src/containers/AsyncApi/AsyncApi.tsx

@@ -11,6 +11,7 @@ import Security from '../Security/Security';
 import TopicsComponent from '../Topics/Topics';
 import MessagesComponent from '../Messages/Messages';
 import SchemasComponent from '../Schemas/Schemas';
+import ErrorComponent from '../Error/Error';
 
 import { AsyncApiWrapper } from './styled';
 
@@ -23,6 +24,7 @@ export interface AsyncApiProps {
 interface AsyncApiState {
   validatedSchema: AsyncApi;
   validated: boolean;
+  error?: Error | Error[];
 }
 
 const defaultAsyncApi: AsyncApi = {
@@ -37,19 +39,26 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
   state = {
     validatedSchema: defaultAsyncApi,
     validated: false,
+    error: undefined,
   };
 
+  private async prepareSchema(schema: string | Object) {
+    try {
+      let validatedSchema = await this.validateSchema(schema);
+      validatedSchema = this.beautifySchema(validatedSchema);
+      this.setState({ validatedSchema, validated: true, error: undefined });
+    } catch (e) {
+      this.setState({ error: e });
+    }
+  }
+
   async componentWillMount() {
-    let validatedSchema = await this.validateSchema(this.props.schema);
-    validatedSchema = this.beautifySchema(validatedSchema);
-    this.setState({ validatedSchema, validated: true });
+    this.prepareSchema(this.props.schema);
   }
 
   async componentWillReceiveProps(nextProps: AsyncApiProps) {
     if (nextProps.schema !== this.props.schema) {
-      let validatedSchema = await this.validateSchema(nextProps.schema);
-      validatedSchema = this.beautifySchema(validatedSchema);
-      this.setState({ validatedSchema });
+      this.prepareSchema(nextProps.schema);
     }
   }
 
@@ -73,8 +82,7 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
 
   render() {
     const { theme, config } = this.props;
-    const { validatedSchema, validated } = this.state;
-
+    const { validatedSchema, validated, error } = this.state;
     const concatenatedConfig: ConfigInterface = {
       ...defaultConfig,
       ...config,
@@ -83,6 +91,7 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
         ...(config && config.show ? config.show : {}),
       },
     };
+
     const concatenatedTheme: ThemeInterface = concatenatedConfig.disableDefaultTheme
       ? (theme as ThemeInterface)
       : { ...defaultTheme, ...theme };
@@ -92,6 +101,10 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
     return (
       <ThemeProvider theme={concatenatedTheme}>
         <AsyncApiWrapper>
+          {this.showComponent(
+            concatenatedConfig.showErrors && Boolean(error),
+            <ErrorComponent error={error} />,
+          )}
           {this.showComponent(
             concatenatedConfig.show.info && Boolean(validatedSchema.info),
             <InfoComponent

library/src/containers/Error/Error.tsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import {
+  ErrorWrapper,
+  ErrorHeader,
+  ErrorContent,
+  ErrorCode,
+  ErrorPre,
+} from './styled';
+
+interface Props {
+  error?: Error | Error[];
+}
+
+class ErrorComponent extends Component<Props> {
+  private renderErrors(error: Error | Error[]): React.ReactNode {
+    if (Array.isArray(error)) {
+      return error.map((singleError: Error, index: number) => (
+        <ErrorCode key={index}>
+          {(singleError && singleError.message) || singleError}
+        </ErrorCode>
+      ));
+    }
+
+    return <ErrorCode>{(error && error.message) || error}</ErrorCode>;
+  }
+
+  render() {
+    const { error } = this.props;
+
+    if (!error) return null;
+
+    return (
+      <ErrorWrapper>
+        <ErrorHeader>There are errors in your document:</ErrorHeader>
+        <ErrorContent>
+          <ErrorPre>{this.renderErrors(error)}</ErrorPre>
+        </ErrorContent>
+      </ErrorWrapper>
+    );
+  }
+}
+
+export default ErrorComponent;

library/src/containers/Error/styled.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const ErrorWrapper = styled.div`
+  ${props => props.theme.errorWrapper}
+`;
+export const ErrorHeader = styled.div`
+  ${props => props.theme.errorHeader}
+`;
+export const ErrorContent = styled.div`
+  ${props => props.theme.errorContent}
+`;
+
+export const ErrorCode = styled.code`
+  ${props => props.theme.errorCode}
+`;
+
+export const ErrorPre = styled.pre`
+  ${props => props.theme.errorPre}
+`;

library/src/helpers/parser.ts

@@ -29,21 +29,21 @@ class Parser {
     } catch (e) {
       return require('js-yaml').safeLoad(content);
     }
-  };
-    
+  }
+
   private async dereference(json: JSON): Promise<any> {
     return RefParser.dereference(json, {
       dereference: {
-        circular: 'ignore'
-      }
+        circular: 'ignore',
+      },
     });
   }
-      
+
   private async bundle(json: JSON): Promise<any> {
     return RefParser.bundle(json, {
       dereference: {
-        circular: 'ignore'
-      }
+        circular: 'ignore',
+      },
     });
   }
 
@@ -59,7 +59,7 @@ class Parser {
 
   private async validate(json: JSON, schema: string): Promise<JSON> {
     return new Promise<JSON>((resolve, reject) => {
-      this.validator.validate(json, schema, (err) => {
+      this.validator.validate(json, schema, err => {
         if (err) return reject(err);
         return resolve(json);
       });