From 51b1ba9fedea9205be7ebe34ffd70c0fc95a050b Mon Sep 17 00:00:00 2001
From: lucasholter00 <lucas.holter@hotmail.com>
Date: Mon, 1 Sep 2025 16:18:25 +0200
Subject: [PATCH 1/2] Core

---
 src/api.js                                    | 33 +++++++++++++++++++
 src/sections/Art/components/ArtList.jsx       | 15 +++++++++
 src/sections/Art/components/ArtListItem.jsx   | 24 ++++++++++++++
 .../Art/components/PublicationHistoryList.jsx |  5 +++
 src/sections/Art/index.jsx                    | 22 ++++++++++++-
 src/sections/Users/components/UsersList.jsx   | 14 ++++++++
 .../Users/components/UsersListItem.jsx        | 16 +++++++++
 src/sections/Users/index.jsx                  | 18 +++++++++-
 8 files changed, 145 insertions(+), 2 deletions(-)
 create mode 100644 src/api.js

diff --git a/src/api.js b/src/api.js
new file mode 100644
index 00000000..fa0bb504
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,33 @@
+const apiURI = "https://boolean-uk-api-server.fly.dev"
+
+export function getUsers(){
+  const apiURI = "https://boolean-uk-api-server.fly.dev"
+  return fetch(apiURI + "/lucasholter00/contact", {
+    method: "GET",
+    headers: {
+      "Accept": "application/json"
+    }
+  }).then(res => {
+    if (!res.ok) {
+      // If response status is not 2xx, throw error to be caught below
+      throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+    return res.json();
+  }).catch(err => {throw err})
+}
+
+export function getArt(){
+  const apiURI = "https://boolean-uk-api-server.fly.dev"
+  return fetch(apiURI + "/art", {
+    method: "GET",
+    headers: {
+      "Accept": "application/json"
+    }
+  }).then(res => {
+    if (!res.ok) {
+      // If response status is not 2xx, throw error to be caught below
+      throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+    return res.json();
+  }).catch(err => {throw err})
+}
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..fb72d07b 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,15 @@
+import ArtListItem from "./ArtListItem";
+
+export default function ArtList({ artList }){
+
+  return (
+
+    <ul className="art-list">
+      {artList.map((art, index) =>(
+        <ArtListItem art={ art } index={ index } />
+      ))}
+    </ul>
+
+  )
+
+}
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..478032d5 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,24 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+export default function ArtListItem( { art, index } ){
+
+  return(
+    <>
+      <li key={ index }>
+        <div className="frame">
+          <img
+            src={ art.imageURL }
+          />
+        </div>
+        <h3>{ art.title }</h3>
+        <p>Artist: { art.artist }</p>
+        <h4>Publication History:</h4>
+        <ul>
+          { art.publicationHistory.map((pub, index) => (
+            <PublicationHistoryList pub={ pub } index={ index } />
+          ))}
+        </ul>
+      </li>
+    </>
+  )
+}
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..79a0ffb1 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,6 @@
+export default function PublicationHistoryList({ pub, index }){
 
+  return(
+    <li key={ index }>{ pub }</li>
+  )
+}
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..a4b72d2d 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,28 @@
+import { useEffect, useState } from "react"
+import { getArt } from "../../api"
+import ArtList from "./components/ArtList"
+
 function ArtsSection() {
+
+  const [artList, setArtList] = useState([])
+
+  useEffect(() => {
+    
+    getArt()
+    .then((data) => {
+      setArtList(data)
+    }).catch(err => console.log(err))
+    }, [])
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+
+      <ArtList artList={ artList } />
+
+
+      </div>
     </section>
   )
 }
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..2ec17292 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,14 @@
+import UsersListItem from "./UsersListItem";
+
+export default function UsersList({ users }){
+
+  return (
+    <>
+      <ul className="users-list">
+        {users.map((user, index) => (
+          <UsersListItem user={ user } key={ index }/>
+        ))}
+      </ul>
+    </>
+  )
+}
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..7efce0ae 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,16 @@
+
+export default function UsersListItem({ user, index }){
+
+  return (
+    < >
+      <li style={{background: user.favouriteColour}} key={ index }> 
+        <img
+          src={ user.profileImage }
+          alt={ user.name }
+        />
+        <h3>{ user.firstName } { user.lastName }</h3>
+        <p>{ user.email }</p>
+      </li>
+    </>
+  )
+}
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..c8958abb 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,24 @@
+import { useEffect, useState } from "react"
+import { getUsers } from "../../api"
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
+  const [users, setUsers] = useState([])
+
+  useEffect(() => {
+    getUsers()
+    .then(data => setUsers(data))
+    .catch(err => console.log(err))
+  },[])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <div className="scroll-container">
+          <UsersList users={ users } />
+        </div>
+      </div>
     </section>
   )
 }

From bdf19c664f7dc528f231b96aa79c394d2c15b9ce Mon Sep 17 00:00:00 2001
From: lucasholter00 <lucas.holter@hotmail.com>
Date: Mon, 1 Sep 2025 17:09:35 +0200
Subject: [PATCH 2/2] Add extension

---
 src/api.js                                    | 18 +++++++-
 src/sections/Advice/components/AdviceSlip.jsx | 11 +++++
 .../Advice/components/FavouriteSlipsList.jsx  | 10 +++++
 src/sections/Advice/index.jsx                 | 44 ++++++++++++++++---
 4 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/api.js b/src/api.js
index fa0bb504..88bb9c3a 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,7 +1,6 @@
 const apiURI = "https://boolean-uk-api-server.fly.dev"
 
 export function getUsers(){
-  const apiURI = "https://boolean-uk-api-server.fly.dev"
   return fetch(apiURI + "/lucasholter00/contact", {
     method: "GET",
     headers: {
@@ -17,7 +16,6 @@ export function getUsers(){
 }
 
 export function getArt(){
-  const apiURI = "https://boolean-uk-api-server.fly.dev"
   return fetch(apiURI + "/art", {
     method: "GET",
     headers: {
@@ -31,3 +29,19 @@ export function getArt(){
     return res.json();
   }).catch(err => {throw err})
 }
+
+export function getAdvice(){
+  return fetch("https://api.adviceslip.com/advice", {
+    cache: "no-store",
+    method: "GET",
+    headers: {
+      "Accept": "application/json"
+    }
+  }).then(res => {
+    if (!res.ok) {
+      // If response status is not 2xx, throw error to be caught below
+      throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+    return res.json();
+  }).catch(err => {throw err})
+}
diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..3d614068 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,11 @@
+export default function AdviceSlip( { advice, newAdvice, addToFavorites } ){
+
+  return (
+    <>
+      <h3>Some Advice</h3>
+      <p>{ advice.slip?.advice || "....loading" }</p>
+      <button onClick={ newAdvice }>Get More Advice</button>
+      <button onClick={ addToFavorites }>Save to Favourties</button>
+    </>
+  )
+}
diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx
index e69de29b..2e1e5c20 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,10 @@
+export default function FavouriteSlipsList( { favoriteAdvice } ){
+
+  return(
+      <ul>
+        {favoriteAdvice.map((curr, index) => (
+          <li key={ index }> { curr.slip?.advice } </li>
+        ))}
+      </ul>
+  )
+}
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..29b0e606 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,11 +1,43 @@
+import { useEffect, useState } from "react"
+import { getAdvice } from "../../api"
+import AdviceSlip from "./components/AdviceSlip"
+import FavouriteSlipsList from "./components/FavouriteSlipsList"
+
 function AdviceSection() {
+
+  const [advice, setAdvice] = useState({})
+  const [favoriteAdvice, setFavoriteAdvice] = useState([])
+
+  function newAdvice(){
+    setAdvice({})
+    getAdvice()
+    .then((data) => setAdvice(data))
+    .catch((err) => console.log(err))
+  }
+
+  function addToFavorites(){
+    setFavoriteAdvice([...favoriteAdvice, advice])
+  }
+
+  useEffect(() => {
+    newAdvice()
+    console.log(advice)
+  }, [])
+
   return (
-    <section>
-      <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
-    </section>
-  )
+    <>
+      <section>
+        <h2>Advice Section</h2>
+        <section className="adivce-slip">
+          <AdviceSlip advice={ advice } newAdvice={ newAdvice } addToFavorites={ addToFavorites } />
+        </section>
+        <section className="favourtite-slips-list">
+          <h3>Favourite Advice Slips</h3>
+          <FavouriteSlipsList favoriteAdvice={ favoriteAdvice } />
+        </section>
+      </section>
+    </>
+   )
 }
 
 export default AdviceSection