From 61349c091a2ab32ffcab98ced06b6284d6777e26 Mon Sep 17 00:00:00 2001
From: Marek Dano <marekdano@users.noreply.github.com>
Date: Fri, 29 May 2020 14:40:17 +0100
Subject: [PATCH] console: migrate ErrorBoundary to TS (#4542)

---
 .../{ErrorBoundary.js => ErrorBoundary.tsx}   | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)
 rename console/src/components/Error/{ErrorBoundary.js => ErrorBoundary.tsx} (66%)

diff --git a/console/src/components/Error/ErrorBoundary.js b/console/src/components/Error/ErrorBoundary.tsx
similarity index 66%
rename from console/src/components/Error/ErrorBoundary.js
rename to console/src/components/Error/ErrorBoundary.tsx
index 09135b06687..da8920059c6 100644
--- a/console/src/components/Error/ErrorBoundary.js
+++ b/console/src/components/Error/ErrorBoundary.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   loadInconsistentObjects,
   redirectToMetadataStatus,
@@ -11,25 +10,40 @@ import PageNotFound, { NotFoundError } from './PageNotFound';
 import RuntimeError from './RuntimeError';
 import { registerRunTimeError } from '../Main/Actions';
 
-class ErrorBoundary extends React.Component {
-  initialState = {
-    hasError: false,
-    info: null,
-    error: null,
-    type: '500',
-  };
+export interface Metadata {
+  inconsistentObjects: object[];
+  ongoingRequest: boolean;
+  allowedQueries: object[];
+}
 
-  constructor(props) {
+export interface ErrorBoundaryProps {
+  metadata: Metadata;
+  dispatch: (arg: unknown) => Promise<unknown>; // TODO update when Redux is migrated to TS;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  type: string;
+}
+
+const initialState: ErrorBoundaryState = {
+  hasError: false,
+  error: null,
+  type: '500',
+};
+
+class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
 
-    this.state = this.initialState;
+    this.state = initialState;
   }
 
-  resetState = () => {
-    this.setState({ ...this.initialState });
-  };
-
-  componentDidCatch(error, info) {
+  componentDidCatch(error: Error) {
     const { dispatch } = this.props;
 
     // for invalid path segment errors
@@ -39,7 +53,7 @@ class ErrorBoundary extends React.Component {
       });
     }
 
-    this.setState({ hasError: true, info: info, error: error });
+    this.setState({ hasError: true, error });
 
     // trigger telemetry
     dispatch(
@@ -60,16 +74,16 @@ class ErrorBoundary extends React.Component {
     );
   }
 
+  resetState = () => {
+    this.setState(initialState);
+  };
+
   render() {
     const { metadata } = this.props;
     const { hasError, type, error } = this.state;
 
     if (hasError && metadata.ongoingRequest) {
-      return (
-        <div>
-          <Spinner />
-        </div>
-      );
+      return <Spinner />;
     }
 
     if (hasError) {
@@ -84,8 +98,4 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-ErrorBoundary.propTypes = {
-  children: PropTypes.element,
-};
-
 export default ErrorBoundary;