Added blog section to website homepage

prem-data/src/components/HomeBlog.js

@@ -1,16 +1,44 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "../styles.css"
 
 export default function HomeBlog(){
 
+    const [posts, setPosts] = useState([]);
+
+    const fetchData = async () => {
+
+        try{
+            const response = await fetch(`http://localhost:3001/blog-posts`);
+            const data = await response.json();
+            setPosts(data);
+        }
+        catch(error){
+            console.error('Error fetching players');
+        }
+
+    }
+
+    useEffect(() => {
+        fetchData('');
+    }, []);
+
+    console.log(posts[0])
+
+    if(posts.length === 0){
+        return <div>Loading data ...</div>
+    }
+
     return (
         <div className="blog-carousel">
-            <div src="" alt="news img" className="carousel-image"></div>
-            <div class="carousel-navigator">
-                <button class="carousel-locator current-image"></button>
-                <button class="carousel-locator"></button>
-                <button class="carousel-locator"></button>
-                <button class="carousel-locator"></button>
+            <div className="blog-carousel-title">Blogs</div>
+            <img src={posts[0].image} alt="news img" className="carousel-image"></img>
+            <div className="story-title">{posts[0].title}</div>
+            <div className="story-preview">{posts[0].preview}</div>
+            <div className="carousel-navigator">
+                <button className="carousel-locator current-image"></button>
+                <button className="carousel-locator"></button>
+                <button className="carousel-locator"></button>
+                <button className="carousel-locator"></button>
             </div>
         </div>
     )

prem-data/src/index.css

@@ -1,8 +1,8 @@
-
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Nunito','Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Nunito','Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -15,7 +15,7 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: 'Playfair Display', source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
 

prem-data/src/pages/player-page.js

@@ -26,6 +26,18 @@ function PlayerPage() {
         return <p>Loading player data...</p>;
     }
 
+    const convertBase64ToBlob = (base64) => {
+      const byteString = atob(base64.split(',')[1]);
+      const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
+      const ab = new ArrayBuffer(byteString.length);
+      const ia = new Uint8Array(ab);
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+      const blob = new Blob([ab], { type: mimeString });
+      return blob;
+    };
+
     return(
         <div className="player-page">
           <div className="player-page-container">

prem-data/src/styles.css

@@ -23,12 +23,27 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    color: whitesmoke;
     justify-content: space-between;
+    border-top: solid 1px white;
+}
+.blog-carousel-title{
+    font-size: 1.5em;
+    border-bottom: solid 1px white;
+    height: 8%;
+    display: flex;
+    align-items: center;margin-bottom: 3.2em;
+}
+.story-title{
+    font-size: 1.2em;
+}
+.story-preview{
+    font-size: 0.9em;
 }
 .carousel-image{
     width: 100%;
     height: 50%;
-    background-color: green;
+    object-fit: cover;
 }
 .carousel-navigator{
     height: fit-content;
@@ -169,9 +184,6 @@
     overflow: hidden;
     height: 300px;
 }
-
-
-
 .autosuggest-results ul {
     list-style: none;
     padding: 0;

pythonCode/playerDataMaker.py

@@ -173,7 +173,7 @@ def playerStandardStatsMaker(url, file):
 ##------- PROVIDE THE `teamRosterCreator` METHOD WITH A LINK TO THE PARTICULAR PREMIER LEAGUE TEAM
 ##------- This will print the information from the SPECIFIED team's players for that season
 
-link = "https://fbref.com/en/squads/cff3d9bb/2021-2022/Chelsea-Stats"
+link = "https://fbref.com/en/squads/7c21e445/2021-2022/West-Ham-United-Stats"
 namingInfo = link.split("/")
 file1 = open(namingInfo[-1]+".txt", "w")
 teamInfo = teamRosterCreator(link)