From 94a246c498871b3ca77b0393ad77bd1e415301fd Mon Sep 17 00:00:00 2001
From: Hanna Adenholm <hanna.adenholm@se.experis.com>
Date: Mon, 1 Sep 2025 15:41:04 +0200
Subject: [PATCH] Did the core and extension

---
 src/sections/Advice/components/AdviceSlip.jsx |  8 +++++
 .../Advice/components/FavouriteSlipsList.jsx  |  9 ++++++
 src/sections/Advice/index.jsx                 | 29 +++++++++++++++++--
 src/sections/Art/components/ArtList.jsx       | 12 ++++++++
 src/sections/Art/components/ArtListItem.jsx   | 17 +++++++++++
 .../Art/components/PublicationHistoryList.jsx | 10 +++++++
 src/sections/Art/index.jsx                    | 22 +++++++++++++-
 src/sections/Users/components/UsersList.jsx   | 13 +++++++++
 .../Users/components/UsersListItem.jsx        | 12 ++++++++
 src/sections/Users/index.jsx                  | 20 ++++++++++++-
 10 files changed, 148 insertions(+), 4 deletions(-)

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..17b12b45 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,8 @@
+export default function AdviceSlip({slip}) {
+    return (
+        <>
+        <h3>Some Advice</h3>
+        <p>{slip.advice}</p>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx
index e69de29b..5de5697e 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,9 @@
+export default function FavouriteSlipsList({slips}) {
+  return (
+    <ul>
+      {slips.map((slip, i) => (
+        <li key={i}>{slip.advice}</li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..d83de411 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,9 +1,34 @@
+import { useEffect, useState } from "react"
+import AdviceSlip from "./components/AdviceSlip";
+import FavouriteSlipsList from "./components/FavouriteSlipsList";
+
 function AdviceSection() {
+  const url = "https://api.adviceslip.com/advice";
+  const [favourites, setFavourites] = useState([])
+  const [advice, setAdvice] = useState(null)
+
+  const fetchData = async () => {
+          const response = await fetch(`${url}?t=${new Date().getTime()}`);
+          const jsonData = await response.json();
+          setAdvice(jsonData.slip);
+        };
+
+  useEffect(() => {
+        fetchData();
+      }, [])
+
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        {advice ? <AdviceSlip slip={advice}/> : <p>Loading...</p>}
+        <button onClick={fetchData}>Get more advice</button>
+        <button onClick={() => setFavourites(prev => [...prev, advice])}>Save to Favourites</button>
+      </section>
+      <section className="favourtite-slips-list">
+        <FavouriteSlipsList slips={favourites}/>
+      </section>
     </section>
   )
 }
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..74f36428 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,12 @@
+import ArtListItem from "./ArtListItem";
+
+export default function ArtList({artList}) {
+
+  return (
+    <ul className="art-list">
+      {artList.map((artwork, i) => (
+        <ArtListItem artwork={artwork} key={i}/>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..913075b4 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,17 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+export default function ArtListItem({artwork}) {
+    return (
+            <li>
+                <div className="frame">
+                <img
+                    src={"https://boolean-uk-api-server.fly.dev" + artwork.imageURL}
+                />
+                </div>
+                <h3>{artwork.title}</h3>
+                <p>Artist: {artwork.artist}</p>
+                <h4>Publication History:</h4>
+                <PublicationHistoryList publications={artwork.publicationHistory}/>
+          </li>
+    );
+}
\ No newline at end of file
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..97b24357 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,11 @@
 
+export default function PublicationHistoryList({publications}) {
+
+  return (
+    <ul>
+      {publications.map((publ, i) => (
+        <li key={i}>{publ}</li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..6fbd2c0f 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,28 @@
+import { useEffect, useState } from "react";
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+
+  const [data, 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 artList={data}/>
+      </div>
     </section>
   )
 }
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..0e45517a 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,13 @@
+import UsersListItem from "./UsersListItem";
+
+
+export default function UsersList({usersList}) {
+
+  return (
+    <ul className="users-list">
+      {usersList.map((user, i) => (
+        <UsersListItem user={user} key={i}/>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..1ec9d5ec 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,12 @@
+export default function UsersListItem({user}) {
+    return (
+        <li style={{background: user.favouriteColour}}>
+            <img
+                src={user.profileImage}
+                alt={user.firstName + " " + user.lastName}
+            />
+            <h3>{user.firstName + " " + user.lastName}</h3>
+            <p>Email: {user.email}</p>
+        </li>
+    );
+}
\ No newline at end of file
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..a3380196 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,26 @@
+import { useEffect, useState } from "react";
+import UsersList from "./components/UsersList";
+
 function UsersSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/adenholm/contact";
+  
+    const [data, setData] = useState([]);
+  
+    useEffect(() => {
+      const fetchData = async () => {
+        const response = await fetch(url);
+        const jsonData = await response.json();
+        setData(jsonData);
+      };
+      fetchData();
+    }, [])
+  
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList usersList={data}/>
+      </div>
     </section>
   )
 }