From 0d98511de64fb144224d70219ac47c453cef197a Mon Sep 17 00:00:00 2001
From: Linda Do <lindado_98@hotmail.com>
Date: Mon, 1 Sep 2025 13:32:07 +0200
Subject: [PATCH 1/5] core

---
 src/sections/Art/index.jsx   | 39 +++++++++++++++++++++++++++++++++++-
 src/sections/Users/index.jsx | 27 ++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..c0e8aaef 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,45 @@
+import{ useEffect, useState } from 'react'
+
 function ArtsSection() {
+  const baseUrl = "https://boolean-uk-api-server.fly.dev"
+  const url = "https://boolean-uk-api-server.fly.dev/art"
+  const [filteredData, setFilteredData] = useState([])
+
+  useEffect(() => {
+    const fetchData = async () => {
+    const response = await fetch(url)
+    const jsonData = await response.json()
+    setFilteredData(jsonData)
+  }
+  fetchData()
+  }, [])
+
+
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className='art-list'>
+          <li>
+            {filteredData.map((art, index) => (
+              <div className= "frame" key={index}>
+              <img src={baseUrl + art.imageURL} alt={art.name} key={index}/>
+              {console.log(baseUrl + art.image)}
+              <h3>{art.title}</h3>
+              <p>{"Artist: " + art.artist}</p>
+              <h4>Publication History: </h4>
+              <ul>
+                <li>{art.publicationHistory[0]}</li>
+                <li>{art.publicationHistory[1]}</li>
+                <li>{art.publicationHistory[2]}</li>
+              </ul>
+              </div>
+            ))}
+            
+          </li>
+        </ul>
+      </div>
     </section>
   )
 }
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..4a351fcc 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,33 @@
+import{ useEffect, useState } from 'react'
+
 function UsersSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/lindadqd/contact"
+
+  const [filteredData, setFilteredData] = useState([])
+
+  useEffect(() => {
+    const fetchData = async () => {
+    const response = await fetch(url)
+    const jsonData = await response.json()
+    setFilteredData(jsonData)
+  }
+  fetchData()
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className= "users-list">
+          {filteredData.map((user, index) => (
+              <li key={index} style={{ background: user.favouriteColour }}>
+              <img src={user.profileImage}/>
+              <h3>{user.firstName +" "+ user.lastName}</h3>
+              <p>Email: {user.email}</p>
+              </li>
+            ))}
+        </ul>
+      </div>
     </section>
   )
 }

From cb46b5497e1df1d15604a0cddb176a14602183df Mon Sep 17 00:00:00 2001
From: Linda Do <lindado_98@hotmail.com>
Date: Mon, 1 Sep 2025 14:03:08 +0200
Subject: [PATCH 2/5] extension

---
 src/sections/Advice/index.jsx | 45 +++++++++++++++++++++++++++++++++--
 src/sections/Art/index.jsx    |  1 +
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..4fb9c024 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,11 +1,52 @@
+import{ useEffect, useState } from 'react'
+
 function AdviceSection() {
+  const url = "https://api.adviceslip.com/advice"
+  const [random, setRandom] = useState(null)
+  const [favourites, setFavourites] = useState([])
+
+   const fetchData = async () => {
+      const response = await fetch(url)
+      const jsonData = await response.json()
+      setRandom(jsonData)
+    }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+   const handleAddFavourite = () => {
+    if (random && random.slip) {
+      // Avoid duplicates
+      if (!favourites.some(fav => fav.id === random.slip.id)) {
+        setFavourites([...favourites, random.slip])
+      }
+    }
+  }
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        <h3>Some Advice</h3>
+        <p>{random && random.slip ? random.slip.advice : "Loading..."}</p>
+        <button onClick={fetchData}>Get More Advice</button>
+          <button onClick={handleAddFavourite} disabled={!random || !random.slip}>
+            Save to Favourites
+          </button>
+      </section>
+      <section className="favourtite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <ul>
+          {favourites.map(slip => (
+            <li key={slip.id}>{slip.advice}</li>
+          ))}
+        </ul>
+      </section>
     </section>
   )
 }
 
 export default AdviceSection
+
+ 
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index c0e8aaef..84085312 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -33,6 +33,7 @@ function ArtsSection() {
                 <li>{art.publicationHistory[0]}</li>
                 <li>{art.publicationHistory[1]}</li>
                 <li>{art.publicationHistory[2]}</li>
+
               </ul>
               </div>
             ))}

From f74b5b6354d68d3c6191c6984cfd89398d75f7da Mon Sep 17 00:00:00 2001
From: Linda Do <lindado_98@hotmail.com>
Date: Mon, 1 Sep 2025 14:31:54 +0200
Subject: [PATCH 3/5] art components

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

diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..8906107d 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,17 @@
+import ArtListItem from "./ArtListItem"
+
+function ArtList(props) {
+    const { artList } = props
+    const baseUrl = props
+
+    console.log(baseUrl)
+    return (
+        <li>
+        {artList.map((art, index) => (
+            <ArtListItem art={art} key={index} baseUrl={baseUrl}/>
+        ))}
+        </li>
+    )
+}
+
+export default ArtList
\ No newline at end of file
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..dbfd7c17 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,15 @@
+import PublicationHistoryList from "./PublicationHistoryList"
+
+function ArtListItem({art, index, baseUrl}){
+    return (
+            <div className= "frame" key={index}>
+            <img src={baseUrl.baseUrl + art.imageURL} alt={art.name} key={index}/>
+            <h3>{art.title}</h3>
+            <p>{"Artist: " + art.artist}</p>
+            <h4>Publication History: </h4>
+            <PublicationHistoryList art={art}/>
+            </div>
+    )
+}
+
+export default ArtListItem
\ No newline at end of file
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..a9780458 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,12 @@
 
+function PublicationHistoryList({art}){
+    return(
+        <ul>
+            <li>{art.publicationHistory[0]}</li>
+            <li>{art.publicationHistory[1]}</li>
+            <li>{art.publicationHistory[2]}</li>
+        </ul>
+    )
+}
+
+export default PublicationHistoryList
\ No newline at end of file
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 84085312..11d74808 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,4 +1,5 @@
 import{ useEffect, useState } from 'react'
+import ArtList from './components/ArtList'
 
 function ArtsSection() {
   const baseUrl = "https://boolean-uk-api-server.fly.dev"
@@ -21,24 +22,7 @@ function ArtsSection() {
       <h2>Arts Section</h2>
       <div className="scroll-container">
         <ul className='art-list'>
-          <li>
-            {filteredData.map((art, index) => (
-              <div className= "frame" key={index}>
-              <img src={baseUrl + art.imageURL} alt={art.name} key={index}/>
-              {console.log(baseUrl + art.image)}
-              <h3>{art.title}</h3>
-              <p>{"Artist: " + art.artist}</p>
-              <h4>Publication History: </h4>
-              <ul>
-                <li>{art.publicationHistory[0]}</li>
-                <li>{art.publicationHistory[1]}</li>
-                <li>{art.publicationHistory[2]}</li>
-
-              </ul>
-              </div>
-            ))}
-            
-          </li>
+          <ArtList artList={filteredData} baseUrl = {baseUrl}/>
         </ul>
       </div>
     </section>

From 6f6e1bc1482e15df4b687badf58d9a5830549456 Mon Sep 17 00:00:00 2001
From: Linda Do <lindado_98@hotmail.com>
Date: Mon, 1 Sep 2025 14:38:13 +0200
Subject: [PATCH 4/5] Users components

---
 src/sections/Users/components/UsersList.jsx     | 15 +++++++++++++++
 src/sections/Users/components/UsersListItem.jsx | 12 ++++++++++++
 src/sections/Users/index.jsx                    | 11 ++---------
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..87a50b8e 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,15 @@
+import UsersListItem from "./UsersListItem"
+
+function UsersList(props) {
+    const { users } = props
+
+    return (
+        <ul className= "users-list">
+          {users.map((user, index) => (
+            <UsersListItem user={user} key={index}/>
+            ))}
+        </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..895dd13c 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 4a351fcc..4f0f8da7 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,4 +1,5 @@
 import{ useEffect, useState } from 'react'
+import UsersList from './components/UsersList'
 
 function UsersSection() {
   const url = "https://boolean-uk-api-server.fly.dev/lindadqd/contact"
@@ -18,15 +19,7 @@ function UsersSection() {
     <section>
       <h2>Users Section</h2>
       <div className="scroll-container">
-        <ul className= "users-list">
-          {filteredData.map((user, index) => (
-              <li key={index} style={{ background: user.favouriteColour }}>
-              <img src={user.profileImage}/>
-              <h3>{user.firstName +" "+ user.lastName}</h3>
-              <p>Email: {user.email}</p>
-              </li>
-            ))}
-        </ul>
+        <UsersList users={filteredData}/>
       </div>
     </section>
   )

From 6d02b3d7c8fa9896067097ef0dae2d9a3173d31e Mon Sep 17 00:00:00 2001
From: Linda Do <lindado_98@hotmail.com>
Date: Mon, 1 Sep 2025 15:11:54 +0200
Subject: [PATCH 5/5] completed

---
 src/sections/Advice/components/AdviceSlip.jsx | 16 ++++++++++++++
 .../Advice/components/FavouriteSlipsList.jsx  | 15 +++++++++++++
 src/sections/Advice/index.jsx                 | 21 ++++---------------
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..c89cf29d 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,16 @@
+function AdviceSlip(props){
+    const {random, handleAddFavourite, fetchData} = props
+    
+    return(
+    <section className="adivce-slip">
+        <h3>Some Advice</h3>
+        <p>{random && random.slip ? random.slip.advice : "Loading..."}</p>
+        <button onClick={fetchData}>Get More Advice</button>
+          <button onClick={handleAddFavourite} disabled={!random || !random.slip}>
+            Save to Favourites
+        </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..35d01b8d 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,15 @@
+function FavouriteSlipsList(props){
+    const { favourites } = props
+    return (
+     <section className="favourtite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <ul>
+          {favourites.map(slip => (
+            <li key={slip.id}>{slip.advice}</li>
+          ))}
+        </ul>
+      </section>
+    )
+}
+
+export default FavouriteSlipsList
\ No newline at end of file
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 4fb9c024..3eec577b 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,4 +1,6 @@
 import{ useEffect, useState } from 'react'
+import AdviceSlip from './components/AdviceSlip'
+import FavouriteSlipsList from './components/FavouriteSlipsList'
 
 function AdviceSection() {
   const url = "https://api.adviceslip.com/advice"
@@ -17,7 +19,6 @@ function AdviceSection() {
 
    const handleAddFavourite = () => {
     if (random && random.slip) {
-      // Avoid duplicates
       if (!favourites.some(fav => fav.id === random.slip.id)) {
         setFavourites([...favourites, random.slip])
       }
@@ -27,22 +28,8 @@ function AdviceSection() {
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip">
-        <h3>Some Advice</h3>
-        <p>{random && random.slip ? random.slip.advice : "Loading..."}</p>
-        <button onClick={fetchData}>Get More Advice</button>
-          <button onClick={handleAddFavourite} disabled={!random || !random.slip}>
-            Save to Favourites
-          </button>
-      </section>
-      <section className="favourtite-slips-list">
-        <h3>Favourite Advice Slips</h3>
-        <ul>
-          {favourites.map(slip => (
-            <li key={slip.id}>{slip.advice}</li>
-          ))}
-        </ul>
-      </section>
+      <AdviceSlip random={random} handleAddFavourite={handleAddFavourite} fetchData = {fetchData}/>
+     <FavouriteSlipsList favourites={favourites}/>
     </section>
   )
 }