Richrefactor

package.json

@@ -9,8 +9,10 @@
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "ethers": "^5.7.2",
+    "html-react-parser": "^3.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
     "web3": "^1.8.1"

src/App.js

@@ -1,14 +1,16 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
-import Landing from './components/landing/landing';
-import Layout from './layout';
-import Web3 from './pages/web3';
+import Landing from "./components/landing/landing";
+import Layout from "./layout";
+import Web3 from "./pages/web3";
 
-import { useWeb3React } from '@web3-react/core'
+import { useWeb3React } from "@web3-react/core";
 import { InjectedConnector } from "@web3-react/injected-connector";
-
+import Partnerships from "./components/partnerships/Partnerships";
+import BlogTest from "./components/blog/BlogTest";
+import BlogPost from "./components/blog/BlogPost";
 
 export const Web3Context = React.createContext();
 
@@ -19,20 +21,23 @@ function App() {
   // },[]);
   return (
     <Web3Context.Provider value={{ activate, deactivate, active, account }}>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Layout />}>
-            <Route index element={<Landing />} />
-            <Route path="web3" element={<Web3 />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
+      {/* <BrowserRouter> */}
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Landing />} />
+          <Route path="web3" element={<Web3 />} />
+          <Route path="partnerships" element={<Partnerships />} />
+          <Route path="blog" element={<BlogTest />} />
+          <Route path="blog/:id" element={<BlogPost />} />
+        </Route>
+      </Routes>
+      {/* </BrowserRouter> */}
     </Web3Context.Provider>
   );
 }
 
 const Injected = new InjectedConnector({
-  supportedChainIds: [1, 3, 4, 5, 42]
- });
+  supportedChainIds: [1, 3, 4, 5, 42],
+});
 
 export default App;

src/components/blog/BlogPost.js

@@ -0,0 +1,79 @@
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+import { API_KEY } from "./constants_test";
+
+import classes from "./BlogPost.module.css";
+import { dateConverter } from "./dateConverter";
+
+import parse from "html-react-parser";
+
+const BlogPost = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [postData, setPostData] = useState(null);
+  const parse = require("html-react-parser");
+
+  const location = useLocation();
+  const id = location.pathname.slice(6);
+
+  useEffect(() => {
+    const fetchFunction = async function () {
+      try {
+        console.log("hello, api!");
+        const response = await fetch(
+          `https://web3-builders.ghost.io/ghost/api/content/posts/${id}/?key=${API_KEY}`
+        );
+        const data = await response.json();
+        console.log(data.posts[0]);
+        setPostData(data.posts[0]);
+        setIsLoading(false);
+        console.log(postData);
+        // console.log(data.posts[0].html);
+
+        if (!response.ok) {
+          throw new Error("something went wrong with fetching post data!");
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    fetchFunction();
+  }, []);
+
+  // const html = parse(postData?.html.toString());
+  // const string = "";
+  // const htmlstring = html + string;
+  // const htmltest = postData?.html;
+  // console.log(htmlstring);
+  // console.log("hello world");
+
+  return (
+    <div className={classes.container}>
+      <div>
+        {!isLoading ? (
+          <div>
+            <div className={classes["post-info"]}>
+              <p>{dateConverter(postData.published_at)}</p>
+              <p>|</p>
+              <p>{postData.reading_time} min read</p>
+            </div>
+            <div className={classes["post-title"]}>
+              <h1>{postData.title}</h1>
+            </div>
+            <div className={classes['feature-img']}>
+              <img src={postData.feature_image}></img>
+            </div>
+          </div>
+        ) : (
+          ""
+        )}
+        <div
+          className={classes["post-content"]}
+          dangerouslySetInnerHTML={{ __html: postData?.html }}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogPost;