From 46bd74d624edaaae82720f9e1f9f4294783a505f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisabeth=20R=C3=B8ysland?= <elisabeth.skartveit@lyse.net>
Date: Mon, 1 Sep 2025 10:00:55 +0200
Subject: [PATCH 1/4] Implemented the art list

---
 src/sections/Art/index.jsx | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..4585f3cf 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,41 @@
+import { useState, useEffect } from "react";
+
 function ArtsSection() {
+
+  const art_url = "https://boolean-uk-api-server.fly.dev/art";
+  const artImage_url = "https://boolean-uk-api-server.fly.dev";
+  const [artworks, setArtworks] = useState([]);
+
+  useEffect(() => {
+    const fetchArtworks = async () => {
+      const response = await fetch(art_url);
+      const data = await response.json();
+      setArtworks(data);
+    };
+    fetchArtworks();
+  }, []);
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className="art-list">{artworks.map((artwork, index) => (
+          <li key={index}>
+            <div className="frame">
+              <img
+                src={`${artImage_url}${artwork.imageURL}`}
+              />
+            </div>
+            <h3>{artwork.title}</h3>
+            <p>Artist: {artwork.artist}</p>
+            <h4>Publication History:</h4>
+            <ul>{artwork.publicationHistory.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}</ul>
+          </li>
+        ))}
+        </ul>
+      </div>
     </section>
   )
 }

From acde05ef7d5c304f62e95883afd2c9d4d31fbc68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisabeth=20R=C3=B8ysland?= <elisabeth.skartveit@lyse.net>
Date: Mon, 1 Sep 2025 10:17:21 +0200
Subject: [PATCH 2/4] Divided Art section into components

---
 src/sections/Art/components/ArtList.jsx       | 13 ++++++++++++
 src/sections/Art/components/ArtListItem.jsx   | 20 +++++++++++++++++++
 .../Art/components/PublicationHistoryList.jsx | 11 ++++++++++
 src/sections/Art/index.jsx                    | 19 ++----------------
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..4646b03b 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({ artworks}) {
+    return (
+        <ul className="art-list">
+        {artworks.map((artwork, index) => (
+            <ArtListItem key={index} artwork={artwork} />
+        ))}
+        </ul>
+    );
+}
+
+export default ArtList;
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..627d9fa7 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,20 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({ artwork, index}) {
+    const artImage_url = "https://boolean-uk-api-server.fly.dev";
+
+    return (
+        <li key={index}>
+            <div className="frame">
+                <img
+                    src={`${artImage_url}${artwork.imageURL}`}
+                />
+            </div>
+            <h3>{artwork.title}</h3>
+            <p>Artist: {artwork.artist}</p>
+            <PublicationHistoryList publicationHistory={artwork.publicationHistory} />
+        </li>
+    );
+}
+
+export default ArtListItem;
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..3b934838 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,12 @@
+function PublicationHistoryList({ publicationHistory }) {
+    return (
+        <>
+        <h4>Publication History:</h4>
+         <ul>{publicationHistory.map((item, index) => (
+                <li key={index}>{item}</li>
+            ))}</ul>
+        </>
+    );
+}
 
+export default PublicationHistoryList;
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 4585f3cf..9dbe644d 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,9 +1,9 @@
 import { useState, useEffect } from "react";
+import ArtList from "./components/ArtList";
 
 function ArtsSection() {
 
   const art_url = "https://boolean-uk-api-server.fly.dev/art";
-  const artImage_url = "https://boolean-uk-api-server.fly.dev";
   const [artworks, setArtworks] = useState([]);
 
   useEffect(() => {
@@ -19,22 +19,7 @@ function ArtsSection() {
     <section>
       <h2>Arts Section</h2>
       <div className="scroll-container">
-        <ul className="art-list">{artworks.map((artwork, index) => (
-          <li key={index}>
-            <div className="frame">
-              <img
-                src={`${artImage_url}${artwork.imageURL}`}
-              />
-            </div>
-            <h3>{artwork.title}</h3>
-            <p>Artist: {artwork.artist}</p>
-            <h4>Publication History:</h4>
-            <ul>{artwork.publicationHistory.map((item, i) => (
-              <li key={i}>{item}</li>
-            ))}</ul>
-          </li>
-        ))}
-        </ul>
+        <ArtList artworks={artworks}/>
       </div>
     </section>
   )

From 38bbd20d39b962bb973fafa7df101123ed94bccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisabeth=20R=C3=B8ysland?= <elisabeth.skartveit@lyse.net>
Date: Mon, 1 Sep 2025 10:41:16 +0200
Subject: [PATCH 3/4] Implemented the users list with components

---
 src/sections/Art/components/ArtList.jsx       |  2 +-
 .../Art/components/PublicationHistoryList.jsx |  9 +++++----
 src/sections/Users/components/UsersList.jsx   | 13 ++++++++++++
 .../Users/components/UsersListItem.jsx        | 15 ++++++++++++++
 src/sections/Users/index.jsx                  | 20 ++++++++++++++++++-
 5 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index 4646b03b..1edd8483 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -1,6 +1,6 @@
 import ArtListItem from "./ArtListItem";
 
-function ArtList({ artworks}) {
+function ArtList({ artworks }) {
     return (
         <ul className="art-list">
         {artworks.map((artwork, index) => (
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index 3b934838..7e4f507c 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1,10 +1,11 @@
 function PublicationHistoryList({ publicationHistory }) {
     return (
         <>
-        <h4>Publication History:</h4>
-         <ul>{publicationHistory.map((item, index) => (
-                <li key={index}>{item}</li>
-            ))}</ul>
+            <h4>Publication History:</h4>
+            <ul>{publicationHistory.map((item, index) => (
+                    <li key={index}>{item}</li>
+                ))}
+            </ul>
         </>
     );
 }
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..49745341 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,15 @@
+function UsersListItem({ user, index }) {
+  
+    return (
+        <li key={index} 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>
+    );
+}
+
+export default UsersListItem;
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..4be3511d 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,26 @@
+import { useState, useEffect } from "react";
+import UsersList from './components/UsersList'
+
 function UsersSection() {
+
+  const users_url = "https://boolean-uk-api-server.fly.dev/elisabethroys/contact";
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const response = await fetch(users_url);
+      const data = await response.json();
+      setUsers(data);
+    }
+    fetchUsers();
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList users={users} />
+      </div>
     </section>
   )
 }

From e62ce2098eaa3b22376cb9f364226c41e4f837bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisabeth=20R=C3=B8ysland?= <elisabeth.skartveit@lyse.net>
Date: Mon, 1 Sep 2025 13:27:36 +0200
Subject: [PATCH 4/4] Implemented Advice lists with components

---
 src/sections/Advice/components/AdviceSlip.jsx | 13 ++++++++
 .../Advice/components/FavouriteSlipsList.jsx  | 13 ++++++++
 src/sections/Advice/index.jsx                 | 32 +++++++++++++++++--
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..01fb2118 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,13 @@
+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;
\ No newline at end of file
diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx
index e69de29b..35fd252d 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,13 @@
+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;
\ No newline at end of file
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..35767066 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,9 +1,37 @@
+import { useState, useEffect } from "react";
+import AdviceSlip from "./components/AdviceSlip"
+import FavourtiteSlipsList from "./components/FavouriteSlipsList"
+
 function AdviceSection() {
+
+  const advice_url = "https://api.adviceslip.com/advice";
+  const [advice, setAdvice] = useState([]);
+  const [favouriteAdvices, setFavouriteAdvices] = useState([]);
+
+  const fetchAdvice = async () => {
+      const string = await fetch(advice_url);
+      const data = await string.json();
+      setAdvice(data.slip);
+  };
+
+  const saveAdviceToFavourites = (slip) => {
+      if (!favouriteAdvices.find((fav) => fav.id === slip.id)) {
+        setFavouriteAdvices([...favouriteAdvices, slip]);
+      }
+      console.log(favouriteAdvices);
+    };
+
+
+  useEffect(() => {
+    fetchAdvice();
+  }, []);
+
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      {advice && <AdviceSlip slip={advice} onNewAdvice={fetchAdvice} onSaveAdvice={saveAdviceToFavourites}/>}
+      <FavourtiteSlipsList favouriteAdvices={favouriteAdvices}/>
     </section>
   )
 }