refactor

.next/build-manifest.json

@@ -14,6 +14,11 @@
     "static/development/_ssgManifest.js"
   ],
   "pages": {
+    "/": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/index.js"
+    ],
     "/_app": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",

.next/server/pages-manifest.json

@@ -2,5 +2,6 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
+  "/": "pages/index.js",
   "/blog": "pages/blog.js"
 }

.next/static/chunks/webpack.js

@@ -182,7 +182,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "f742e2003338ff922586"; }
+/******/ 		__webpack_require__.h = function() { return "fcd24dceb116c7f417f4"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

components/DefaultLayout.js

@@ -0,0 +1,16 @@
+import MyHeader from "./DefaultHeader";
+import MyHead from "./DefaultHead";
+import Footer from "./DefaultFooter";
+
+export default function Layout({ children, page }) {
+  return (
+    <>
+      <MyHead page={page} />
+      <div id="Layout">
+        <MyHeader />
+        {children}
+        <Footer />
+      </div>
+    </>
+  );
+}

components/BlogPost.js → pages/blog/components/BlogPost.js

@@ -1,4 +1,4 @@
-import WordBreak from "./WordBreak";
+import WordBreak from "../../../components/WordBreak";
 import { Component } from "react";
 import moment from "moment";
 
@@ -29,7 +29,6 @@ class BlogPost extends Component {
   }
 
   render() {
-    console.log(this.props.imgPath);
     return (
       <div
         className="BlogPost"

pages/blog.js → pages/blog/index.js

@@ -1,13 +1,14 @@
 import React, { Component } from "react";
-import Layout from "../components/MyLayout";
-import BlogPost from "../components/BlogPost";
+import Layout from "../../components/DefaultLayout";
+import BlogPost from "./components/BlogPost";
 import axios from "axios";
 
 class Blog extends Component {
   constructor(props) {
     super(props);
     this.state = {
       numBlogs: 0,
+      blogDataRetrieved: false,
       blogData: [],
     };
   }
@@ -17,12 +18,15 @@ class Blog extends Component {
         method: "GET",
         url: "https://rg-portfolio-backend.herokuapp.com/blog-posts",
       }).then((res) => {
-        console.log(res);
-        this.setState({ blogData: res.data, numBlogs: res.data.length });
+        this.setState({
+          blogData: res.data,
+          numBlogs: res.data.length,
+          blogDataRetrieved: true,
+        });
       });
     } catch (err) {
       console.warn("failed to retrieve blog posts:\n", err);
-      return;
+      return false;
     }
   }
   render() {
@@ -54,21 +58,24 @@ class Blog extends Component {
             }
           }}
           <div className="blogpost-container">
-            {this.state.blogData.reverse().map((blog, index) => {
-              let blogImg = blog.blogMedia
-                ? `https://rg-portfolio-bucket.s3.us-west-2.amazonaws.com/blog-images/${blog.blogMedia.name}`
-                : "";
-              return (
-                <BlogPost
-                  id={blog.id}
-                  title={blog.blogHeader}
-                  text={blog.blogText}
-                  imgPath={blogImg}
-                  date={blog.createdAt}
-                  key={blog.blogHeader}
-                />
-              );
-            })}
+            {this.state.blogDataRetrieved
+              ? this.state.blogData.reverse().map((blog, index) => {
+                  const blogImg = blog.blogMedia
+                    ? `https://rg-portfolio-bucket.s3.us-west-2.amazonaws.com/blog-images/${blog.blogMedia.name}`
+                    : "";
+
+                  return (
+                    <BlogPost
+                      id={blog.id}
+                      title={blog.blogHeader}
+                      text={blog.blogText}
+                      imgPath={blogImg}
+                      date={blog.createdAt}
+                      key={blog.blogHeader}
+                    />
+                  );
+                })
+              : "beans"}
           </div>
         </Layout>
       </div>

pages/index.js

@@ -1,4 +1,4 @@
-import Layout from "../components/MyLayout";
+import Layout from "../components/DefaultLayout";
 import Who from "../components/index/Who";
 import Art from "../components/index/Art";