feat: load data from json (EddieHubCommunity#27)

stemount · Sep 10, 2021 · 2320ea6 · 2320ea6
1 parent c8deea8
commit 2320ea6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,16 +3,28 @@ import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 
-import { Button } from "primereact/button";
+import React, { useState, useEffect } from "react";
 
 import Profile from "./Components/Profile";
-import Links from "./Components/Links"
+import Links from "./Components/Links";
 function App() {
+  const [profile, setProfile] = useState({
+    name: "404",
+    bio: "-",
+    avatar:
+      "https://user-images.githubusercontent.com/624760/114314271-ea156a80-9af1-11eb-97ca-977be7565aa6.png",
+    links: [],
+  });
+
+  useEffect(() => {
+    fetch("/data/eddiejaoude.json")
+      .then((response) => response.json())
+      .then((data) => setProfile(data));
+  }, []);
   return (
     <div className="p-m-4">
-      <Profile />
-      <Links/>
-
+      <Profile bio={profile.bio} avatar={profile.avatar} name={profile.name} />
+      <Links />
     </div>
   );
 }

diff --git a/src/Components/Profile.js b/src/Components/Profile.js
@@ -3,12 +3,13 @@ import React from "react";
 import { Avatar } from "primereact/avatar";
 import { Badge } from "primereact/badge";
 
-function Profile() {
+function Profile({ name, bio, avatar }) {
+  console.log(name, bio, avatar);
   return (
     <div>
       <div className="p-d-flex p-jc-center p-ai-center">
         <Avatar
-          image="eddiejaoude.jpg"
+          image={avatar}
           size="xlarge"
           shape="circle"
           className="p-overlay-badge"
@@ -17,7 +18,8 @@ function Profile() {
         </Avatar>
       </div>
       <div className="p-d-flex p-jc-center">
-        <p>Founder of EddieHub</p>
+        <h5>{name}</h5>
+        <p>{bio}</p>
       </div>
     </div>
   );