From 82b41c425388ba1eb76c506e2378b4eaaac5e8da Mon Sep 17 00:00:00 2001
From: Tein Schoemaker <teintjomme@gmail.com>
Date: Tue, 2 Sep 2025 12:38:45 +0200
Subject: [PATCH] Core + Extension

---
 src/sections/Advice/components/AdviceSlip.jsx | 12 +++++++
 .../Advice/components/FavouriteSlipsList.jsx  | 14 ++++++++
 src/sections/Advice/index.jsx                 | 36 +++++++++++++++++--
 src/sections/Art/components/ArtList.jsx       | 13 +++++++
 src/sections/Art/components/ArtListItem.jsx   | 18 ++++++++++
 .../Art/components/PublicationHistoryList.jsx | 13 +++++++
 src/sections/Art/index.jsx                    | 23 ++++++++++--
 src/sections/Users/components/UsersList.jsx   | 13 +++++++
 .../Users/components/UsersListItem.jsx        | 12 +++++++
 src/sections/Users/index.jsx                  | 21 +++++++++--
 10 files changed, 168 insertions(+), 7 deletions(-)

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..f8f3d28b 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,12 @@
+function AdviceSlip({ slip, onNewAdvice, onSaveAdvice }) {
+  return (
+    <section className="adivce-slip">
+      <h3>Random Advice</h3>
+      <p>{slip.advice}</p>
+      <button onClick={onNewAdvice}>Get More Advice</button>
+      <button onClick={() => onSaveAdvice(slip)}>Save to Favourties</button>
+    </section>
+  );
+}
+
+export default AdviceSlip;
diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx
index e69de29b..adeb4ccb 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,14 @@
+function FavourtiteSlipsList({ favouriteAdvices }) {
+  return (
+    <section className="favourtite-slips-list">
+      <h3>Favourite Advice Slips</h3>
+      <ul>
+        {favouriteAdvices.map((advice, index) => (
+          <li key={index}>{advice.advice}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default FavourtiteSlipsList;
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..12efa91f 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,11 +1,43 @@
+import { useState, useEffect } from "react";
+import AdviceSlip from "./components/AdviceSlip";
+import FavourtiteSlipsList from "./components/FavouriteSlipsList";
+
 function AdviceSection() {
+  const [data, setData] = useState([]);
+  const [favouriteAdvices, setFavouriteAdvices] = useState([]);
+
+  const fetchData = async () => {
+    const string = await fetch("https://api.adviceslip.com/advice");
+    const data = await string.json();
+    setData(data.slip);
+  };
+
+  const saveAdviceToFavourites = (slip) => {
+    if (!favouriteAdvices.find((fav) => fav.id === slip.id)) {
+      setFavouriteAdvices([...favouriteAdvices, slip]);
+    }
+    console.log(favouriteAdvices);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <section>
       <h2>Advice Section</h2>
       <section className="adivce-slip"></section>
       <section className="favourtite-slips-list"></section>
+      {data && (
+        <AdviceSlip
+          slip={data}
+          onNewAdvice={fetchData}
+          onSaveAdvice={saveAdviceToFavourites}
+        />
+      )}
+      <FavourtiteSlipsList favouriteAdvices={favouriteAdvices} />
     </section>
-  )
+  );
 }
 
-export default AdviceSection
+export default AdviceSection;
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..f1a5e19e 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,13 @@
+import ArtListItem from "./ArtListItem";
+
+function ArtList({ arts }) {
+  return (
+    <ul className="art-list">
+      {arts.map((art, index) => (
+        <ArtListItem key={index} art={art} />
+      ))}
+    </ul>
+  );
+}
+
+export default ArtList;
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..ff705540 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,18 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({ art, index }) {
+  const url = "https://boolean-uk-api-server.fly.dev";
+
+  return (
+    <li key={index}>
+      <div className="frame">
+        <img src={`${url}${art.imageURL}`} />
+      </div>
+      <h3>{art.title}</h3>
+      <p>Artist: {art.artist}</p>
+      <PublicationHistoryList publicationHistory={art.publicationHistory} />
+    </li>
+  );
+}
+
+export default ArtListItem;
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..4c57db4f 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,14 @@
+function PublicationHistoryList({ publicationHistory }) {
+  return (
+    <div>
+      <h4>Publication History:</h4>
+      <ul>
+        {publicationHistory.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
 
+export default PublicationHistoryList;
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..bcef176d 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,10 +1,27 @@
+import { useState, useEffect } from "react";
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+  const [arts, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+    };
+    fetchData();
+  }, []);
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList arts={arts} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default ArtsSection
+export default ArtsSection;
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..07f004f9 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,13 @@
+import UserListItem from './UsersListItem'
+
+function UsersList({ users }) {
+  return (
+    <ul className="users-list">
+    {users.map((user, index) => (
+      <UserListItem key={index} user={user} />
+    ))}
+    </ul>
+  );
+}
+
+export default UsersList;
\ No newline at end of file
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..9c9aa7e2 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,12 @@
+function UsersListItem({ user, index }) {
+
+    return (
+        <li key={index} style={{ background: user.favouriteColour }}>
+            <img src={user.profileImage} />
+            <h3>{user.firstName} {user.lastName}</h3>
+            <p>Email: {user.email}</p>
+        </li>
+    );
+}
+
+export default UsersListItem;
\ No newline at end of file
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..7f53c33a 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,10 +1,27 @@
+import { useState, useEffect } from "react";
+import UsersList from './components/UsersList'
+
 function UsersSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/TeinSchoemaker/contact";
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+    }
+    fetchUsers();
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList users={data} />
+      </div>
     </section>
   )
 }
 
-export default UsersSection
+export default UsersSection;
\ No newline at end of file