Add Medium Post

2020-07-03 00:13:31 -07:00 · 2020-07-03 00:13:31 -07:00 · 54e899a155
parent 0250d56bba
commit 54e899a155
5 changed files with 2826 additions and 0 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -10,6 +10,8 @@
  "author": "",
  "license": "See License",
  "dependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-react-app": "^3.1.2",
    "dotenv": "^8.1.0",
    "express": "^4.17.1",
    "heroku-ssl-redirect": "0.0.4",
--- a/public/MediumPost.html
+++ b/public/MediumPost.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Add React in One Minute</title>
+  </head>
+  <body>
+
+    <!-- We will put our React component inside this div. -->
+    <div id="medium_blog_container"></div>
+
+    <!-- Load React. -->
+    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
+    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+
+    <!-- Load our React component. -->
+    <script src="MediumPost/index.js"></script>
+
+  </body>
+</html>
--- a/public/MediumPost/index.js
+++ b/public/MediumPost/index.js
@ -0,0 +1,56 @@
+var MediumPost = function MediumPost() {
+
+  var state = {
+    error: null,
+    isLoaded: false,
+    items: []
+  };
+
+  var error = state.error,
+      isLoaded = state.isLoaded,
+      items = state.items;
+
+  var recentItems = [];
+
+  for (var i = 0; i < 5; i++) {
+    recentItems.push(items[i]);
+  }
+
+  if (error) {
+    return React.createElement(
+      "div",
+      null,
+      "Error: ",
+      error.message
+    );
+  }
+
+  if (!isLoaded) {
+    return React.createElement(
+      "div",
+      null,
+      "Loading..."
+    );
+  }
+
+  return React.createElement(
+    "ul",
+    { style: { listStyleType: "none",
+        width: "100%",
+        padding: "0"
+      } },
+    recentItems.map(function (item) {
+      return React.createElement(
+        "a",
+        { style: { textDecoration: "none" }, href: item.link, key: item.title },
+        React.createElement(
+          "li",
+          { style: { marginTop: "5px" } },
+          item.title
+        )
+      );
+    })
+  );
+};
+
+var domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(React.createElement(MediumPost, null), domContainer);
--- a/src/MediumPost/index.js
+++ b/src/MediumPost/index.js
@ -0,0 +1,40 @@
+const MediumPost = () => {
+
+    const state = {
+        error: null,
+        isLoaded: false,
+        items: []
+      };
+
+    const { error, isLoaded, items } = state;
+    const recentItems = [];
+    
+    for(var i=0;i<5;i++){
+      recentItems.push(items[i]);
+    }
+
+    if (error) {
+        return <div>Error: {error.message}</div>;
+      } 
+    
+    if (!isLoaded) {
+      return <div>Loading...</div>;
+    } 
+
+  return (
+        <ul style={{ listStyleType: "none",
+        width: "100%",
+        padding:"0",
+        }}>
+          {recentItems.map(item => (
+            <a style={{textDecoration: "none"}} href={item.link} key={item.title}>
+            <li style={{  marginTop: "5px",}}>
+            {item.title}
+            </li>
+            </a>
+          ))}
+        </ul>
+      );
+  }
+
+  const domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(<MediumPost/>, domContainer);