converted fhirResource and ErrorBoundary to functional components, tr…

…ied using try catch approach to fix ErrorBoundary

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Changelog format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.1.0
+
+### Changed
+
+- FhirResource and ErrorBoundary to functional components
+
 ## 1.0.0
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

src/components/containers/FhirResource/FhirResource.js

@@ -1,58 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import * as FhirResourceTypes from '../../supportedFhirResourceList';
 import ResourceContainer from '../ResourceContainer';
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
 
-  componentDidCatch(error, info) {
-    // Display fallback UI
-    this.setState({ hasError: true, error });
-    // You can also log the error to an error reporting service
-    // logErrorToMyService(error, info);
-    console.error(
-      'An error occured when trying to render a FHIR Component:',
-      error,
-    );
-  }
+const ErrorBoundary = props => {
+  const [hasError, setHasError] = useState(false);
+  const [error, setError] = useState();
 
-  render() {
-    if (this.state.hasError) {
+  const errCheck = () => {
+    if (hasError) {
       // You can render any custom fallback UI
       return (
-        <ResourceContainer {...this.props}>
-          <FhirResourceTypes.Generic {...this.props} />
+        <ResourceContainer>
+          <FhirResourceTypes.Generic />
         </ResourceContainer>
       );
     }
-    return this.props.children;
+    return props.children;
+  };
+
+  try {
+    const content = errCheck();
+    return content;
+  } catch (err) {
+    setError(err);
+    setHasError(true);
+    console.error(
+      'An error occured when trying to render a FHIR Component:',
+      error,
+    );
+    const content = errCheck();
+    return content;
   }
-}
+};
 
-class FhirResource extends React.Component {
-  renderSwitch() {
-    const { resourceType } = this.props.fhirResource || {};
+export const FhirResource = props => {
+  const renderSwitch = () => {
+    const { resourceType } = props.fhirResource || {};
     switch (resourceType) {
       case 'Binary':
-        return <FhirResourceTypes.Binary {...this.props} />;
+        return <FhirResourceTypes.Binary {...props} />;
       default:
         const FhirComponent =
           FhirResourceTypes[resourceType] !== undefined
             ? FhirResourceTypes[resourceType]
             : FhirResourceTypes.Generic;
         return (
-          <ResourceContainer {...this.props}>
-            <FhirComponent {...this.props} />
+          <ResourceContainer {...props}>
+            <FhirComponent {...props} />
           </ResourceContainer>
         );
     }
-  }
-
-  render() {
-    return <ErrorBoundary>{this.renderSwitch()}</ErrorBoundary>;
-  }
-}
-
-export default FhirResource;
+  };
+  return <ErrorBoundary>{renderSwitch()}</ErrorBoundary>;
+};