lesson-26

iamshaunjp · iamshaunjp · commit a976efbceafa · 2020-12-14T13:46:14.000Z
diff --git a/dojo-blog/.eslintcache b/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","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js":"6","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js":"7","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js":"8"},{"size":432,"mtime":1607775534246,"results":"9","hashOfConfig":"10"},{"size":686,"mtime":1607950780610,"results":"11","hashOfConfig":"10"},{"size":430,"mtime":1607944554893,"results":"12","hashOfConfig":"10"},{"size":403,"mtime":1607949632667,"results":"13","hashOfConfig":"10"},{"size":428,"mtime":1607950800450,"results":"14","hashOfConfig":"10"},{"size":1097,"mtime":1607949646818,"results":"15","hashOfConfig":"10"},{"size":143,"mtime":1607944196371,"results":"16","hashOfConfig":"10"},{"size":248,"mtime":1607950696608,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"13wetv0",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["35","36"],"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",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"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","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js":"6","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js":"7","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js":"8"},{"size":432,"mtime":1607775534246,"results":"9","hashOfConfig":"10"},{"size":686,"mtime":1607950780610,"results":"11","hashOfConfig":"10"},{"size":430,"mtime":1607944554893,"results":"12","hashOfConfig":"10"},{"size":403,"mtime":1607949632667,"results":"13","hashOfConfig":"10"},{"size":428,"mtime":1607950800450,"results":"14","hashOfConfig":"10"},{"size":1097,"mtime":1607949646818,"results":"15","hashOfConfig":"10"},{"size":143,"mtime":1607944196371,"results":"16","hashOfConfig":"10"},{"size":608,"mtime":1607953273843,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"13wetv0",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["35","36"],"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",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]
diff --git a/dojo-blog/src/BlogDetails.js b/dojo-blog/src/BlogDetails.js
@@ -1,11 +1,21 @@
 import { useParams } from "react-router-dom";
+import useFetch from "./useFetch";
 
 const BlogDetails = () => {
   const { id } = useParams();
+  const { data: blog, error, isPending } = useFetch('http://localhost:8000/blogs/' + id);
 
   return (
     <div className="blog-details">
-      <h2>Blog details - { id }</h2>
+      { isPending && <div>Loading...</div> }
+      { error && <div>{ error }</div> }
+      { blog && (
+        <article>
+          <h2>{ blog.title }</h2>
+          <p>Written by { blog.author }</p>
+          <div>{ blog.body }</div>
+        </article>
+      )}
     </div>
   );
 }
diff --git a/dojo-blog/src/index.css b/dojo-blog/src/index.css
@@ -52,3 +52,21 @@
   text-decoration: none;
 }
 
+/* blog details page */
+.blog-details h2 {
+  font-size: 20px;
+  color: #f1356d;
+  margin-bottom: 10px;
+}
+.blog-details div {
+  margin: 20px 0;
+}
+.blog-details button {
+  background: #f1356d;
+  color: #fff;
+  border: 0;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+

Original file line number	Diff line number	Diff line change
`@@ -1 +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","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js":"6","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js":"7","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js":"8"},{"size":432,"mtime":1607775534246,"results":"9","hashOfConfig":"10"},{"size":686,"mtime":1607950780610,"results":"11","hashOfConfig":"10"},{"size":430,"mtime":1607944554893,"results":"12","hashOfConfig":"10"},{"size":403,"mtime":1607949632667,"results":"13","hashOfConfig":"10"},{"size":428,"mtime":1607950800450,"results":"14","hashOfConfig":"10"},{"size":1097,"mtime":1607949646818,"results":"15","hashOfConfig":"10"},{"size":143,"mtime":1607944196371,"results":"16","hashOfConfig":"10"},{"size":248,"mtime":1607950696608,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"13wetv0",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["35","36"],"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",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]
	`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","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js":"6","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js":"7","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js":"8"},{"size":432,"mtime":1607775534246,"results":"9","hashOfConfig":"10"},{"size":686,"mtime":1607950780610,"results":"11","hashOfConfig":"10"},{"size":430,"mtime":1607944554893,"results":"12","hashOfConfig":"10"},{"size":403,"mtime":1607949632667,"results":"13","hashOfConfig":"10"},{"size":428,"mtime":1607950800450,"results":"14","hashOfConfig":"10"},{"size":1097,"mtime":1607949646818,"results":"15","hashOfConfig":"10"},{"size":143,"mtime":1607944196371,"results":"16","hashOfConfig":"10"},{"size":608,"mtime":1607953273843,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"13wetv0",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["35","36"],"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",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]