From c7b46dadc33cf2c4544c6656f93f31dc564d572d Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrel@tyrelsouza.com>
Date: Mon, 26 Sep 2022 16:07:26 -0400
Subject: [PATCH] errorboundary

---
 classes/src/components/ErrorBoundary.js | 24 ++++++++++++++++++++++++
 classes/src/components/UserFinder.js    | 14 ++++++++++----
 classes/src/components/Users.js         |  6 ++++++
 3 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 classes/src/components/ErrorBoundary.js

diff --git a/classes/src/components/ErrorBoundary.js b/classes/src/components/ErrorBoundary.js
new file mode 100644
index 0000000..852c3b3
--- /dev/null
+++ b/classes/src/components/ErrorBoundary.js
@@ -0,0 +1,24 @@
+import { Component } from "react";
+
+class ErrorBoundary extends Component {
+  constructor() {
+    super();
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  componentDidCatch(error) {
+    console.log(error)
+    this.setState({ hasError: true });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <p>Something went wrong</p>;
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/classes/src/components/UserFinder.js b/classes/src/components/UserFinder.js
index 956cf4d..50412e0 100644
--- a/classes/src/components/UserFinder.js
+++ b/classes/src/components/UserFinder.js
@@ -1,5 +1,6 @@
 import { Component, Fragment } from "react";
 import UsersContext from "../store/users-context";
+import ErrorBoundary from "./ErrorBoundary";
 import classes from "./UserFinder.module.css";
 import Users from "./Users";
 
@@ -35,10 +36,15 @@ class UserFinder extends Component {
   render() {
     return (
       <Fragment>
-        <div className={classes.finder}>
-          <input type="search" onChange={this.searchChangeHandler.bind(this)} />
-        </div>
-        <Users users={this.state.filteredUsers} />
+        <ErrorBoundary>
+          <div className={classes.finder}>
+            <input
+              type="search"
+              onChange={this.searchChangeHandler.bind(this)}
+            />
+          </div>
+          <Users users={this.state.filteredUsers} />
+        </ErrorBoundary>
       </Fragment>
     );
   }
diff --git a/classes/src/components/Users.js b/classes/src/components/Users.js
index f60b77b..8a7ce78 100644
--- a/classes/src/components/Users.js
+++ b/classes/src/components/Users.js
@@ -13,6 +13,12 @@ class Users extends React.Component {
     };
   }
 
+  componentDidUpdate(){
+    if (this.props.users.length === 0) {
+      throw new Error('no users')
+    }
+  }
+
   toggleUsersHandler() {
     this.setState((curState) => {
       return {