Error boundries is done

Author: abrar4799

01-starting-project/01-starting-project/.eslintcache

@@ -1 +1 @@
-[{"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/index.js":"1","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/App.js":"2","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/Users.js":"3","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/User.js":"4","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/UserFinder.js":"5","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/store/users-context.js":"6"},{"size":179,"mtime":1648642904000,"results":"7","hashOfConfig":"8"},{"size":428,"mtime":1649553004741,"results":"9","hashOfConfig":"8"},{"size":1412,"mtime":1649545098880,"results":"10","hashOfConfig":"8"},{"size":313,"mtime":1649461310085,"results":"11","hashOfConfig":"8"},{"size":1966,"mtime":1649556737429,"results":"12","hashOfConfig":"8"},{"size":116,"mtime":1649552843217,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"5nxqio",{"filePath":"17","messages":"18","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"23","messages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/index.js",[],["27","28"],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/App.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/Users.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/User.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/UserFinder.js",["29"],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/store/users-context.js",[],{"ruleId":"30","replacedBy":"31"},{"ruleId":"32","replacedBy":"33"},{"ruleId":"34","severity":1,"message":"35","line":7,"column":7,"nodeType":"36","messageId":"37","endLine":7,"endColumn":18},"no-native-reassign",["38"],"no-negated-in-lhs",["39"],"no-unused-vars","'DUMMY_USERS' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/index.js":"1","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/App.js":"2","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/Users.js":"3","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/User.js":"4","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/UserFinder.js":"5","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/store/users-context.js":"6","/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/ErrorBoundry.js":"7"},{"size":179,"mtime":1648642904000,"results":"8","hashOfConfig":"9"},{"size":428,"mtime":1649553004741,"results":"10","hashOfConfig":"9"},{"size":1531,"mtime":1649562505361,"results":"11","hashOfConfig":"9"},{"size":313,"mtime":1649461310085,"results":"12","hashOfConfig":"9"},{"size":2075,"mtime":1649562107793,"results":"13","hashOfConfig":"9"},{"size":116,"mtime":1649552843217,"results":"14","hashOfConfig":"9"},{"size":418,"mtime":1649562361792,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"5nxqio",{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"21","messages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"25","messages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/index.js",[],["31","32"],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/App.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/Users.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/User.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/UserFinder.js",["33"],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/store/users-context.js",[],"/media/abrar/01D7D91E18FD2AD0/ITI/Class-React/01-starting-project/01-starting-project/src/components/ErrorBoundry.js",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":8,"column":7,"nodeType":"40","messageId":"41","endLine":8,"endColumn":18},"no-native-reassign",["42"],"no-negated-in-lhs",["43"],"no-unused-vars","'DUMMY_USERS' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]

01-starting-project/01-starting-project/src/components/ErrorBoundry.js

@@ -0,0 +1,23 @@
+import { Component } from "react";
+class ErrorBoundry extends Component{
+    constructor(){
+        super();
+        this.state = {hasError : false}
+    }
+    
+    componentDidCatch(error){
+
+        this.setState({hasError: true})
+
+    }
+
+    render(){
+        if(this.state.hasError){
+            return <p>Something went wrong!</p>
+
+        }
+        return this.props.children;
+    }
+
+}
+export default ErrorBoundry;

01-starting-project/01-starting-project/src/components/UserFinder.js

@@ -3,6 +3,7 @@ import { Fragment,   Component } from 'react';
 import Users from './Users';
 import classes from './UserFinder.module.css';
 import UsersContext from '../store/users-context';
+import ErrorBoundry from './ErrorBoundry'
 
 const DUMMY_USERS = [
   { id: 'u1', name: 'Max' },
@@ -27,6 +28,7 @@ static contextType = UsersContext;
         this.setState({filteredUsers : this.context.users})
     }
     componentDidUpdate(prevProps , prevState){
+       
         if(prevState.searchTerm !== this.state.searchTerm){
             this.setState({
                 filteredUsers:this.context.users.filter((user) => user.name.includes(this.state.searchTerm))
@@ -43,7 +45,9 @@ static contextType = UsersContext;
               <div className={classes.finder}>
                 <input type='search' onChange={this.searchChangeHandler.bind(this)} />
               </div>
+              <ErrorBoundry>
               <Users users={this.state.filteredUsers} />
+              </ErrorBoundry>
             </Fragment>
           );
 

01-starting-project/01-starting-project/src/components/Users.js

@@ -11,6 +11,13 @@ class Users extends Component {
 
     };
   }
+  componentDidUpdate(){
+    if (this.props.users.length === 0){
+      throw new Error('No Users Provided! ')
+
+  }
+  }
+
 
   toggleUsersHandler() {
     // this.state.showUsers = false; // NOT!