lesson-19

dojo-blog/.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js":"1","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js":"2","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js":"3","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js":"4","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js":"5"},{"size":432,"mtime":1607775534246,"results":"6","hashOfConfig":"7"},{"size":231,"mtime":1607876502242,"results":"8","hashOfConfig":"7"},{"size":378,"mtime":1607876760570,"results":"9","hashOfConfig":"7"},{"size":647,"mtime":1607882245357,"results":"10","hashOfConfig":"7"},{"size":318,"mtime":1607880940165,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"13wetv0",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["23","24"],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js":"1","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js":"2","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js":"3","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js":"4","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js":"5"},{"size":432,"mtime":1607775534246,"results":"6","hashOfConfig":"7"},{"size":231,"mtime":1607876502242,"results":"8","hashOfConfig":"7"},{"size":378,"mtime":1607876760570,"results":"9","hashOfConfig":"7"},{"size":1046,"mtime":1607936516349,"results":"10","hashOfConfig":"7"},{"size":318,"mtime":1607880940165,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"13wetv0",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["23","24"],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]

dojo-blog/src/Home.js

@@ -4,24 +4,35 @@ import BlogList from "./BlogList";
 const Home = () => {
   const [blogs, setBlogs] = useState(null);
   const [isPending, setIsPending] = useState(true);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     setTimeout(() => {
       fetch('http://localhost:8000/blogs')
       .then(res => {
+        if (!res.ok) { // error coming back from server
+          throw Error('could not fetch the data for that resource');
+        } 
         return res.json();
       })
       .then(data => {
         setIsPending(false);
         setBlogs(data);
+        setError(null);
+      })
+      .catch(err => {
+        // auto catches network / connection error
+        setIsPending(false);
+        setError(err.message);
       })
     }, 1000);
   }, [])
 
   return (
     <div className="home">
+      { error && <div>{ error }</div> }
       { isPending && <div>Loading...</div> }
-      {blogs && <BlogList blogs={blogs} />}
+      { blogs && <BlogList blogs={blogs} /> }
     </div>
   );
 }