From 4b541e725c79f7dc1d25988f9a25f1784c39cbf2 Mon Sep 17 00:00:00 2001
From: Andre Velkov Janusev <velkovv97@gmail.com>
Date: Wed, 17 Sep 2025 10:26:33 +0200
Subject: [PATCH 1/2] core complete

---
 src/sections/Advice/index.jsx                 | 22 +++++++++++++--
 src/sections/Art/components/ArtList.jsx       | 28 +++++++++++++++++++
 src/sections/Art/components/ArtListItem.jsx   | 19 +++++++++++++
 .../Art/components/PublicationHistoryList.jsx | 13 +++++++++
 src/sections/Art/index.jsx                    |  9 +++++-
 src/sections/Users/components/UsersList.jsx   | 15 ++++++++++
 .../Users/components/UsersListItem.jsx        | 15 ++++++++++
 src/sections/Users/index.jsx                  | 20 ++++++++++++-
 8 files changed, 137 insertions(+), 4 deletions(-)

diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..dd0c6fa3 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,11 +1,29 @@
+
 function AdviceSection() {
   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>Always the burrito.</p>
+        <button>Get More Advice</button>
+        <button>Save to Favourites</button>
+      </section>
+
+      <section className="favourtite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <ul>
+          <li>Measure twice, cut once.</li>
+          <li>Do not let the bastards grind you down.</li>
+          <li>Always the burrito.</li>
+        </ul>
+      </section>
+
     </section>
   )
 }
 
 export default AdviceSection
+
+
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..20b1ce2c 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,28 @@
+
+import { useState, useEffect } from "react"
+import ArtListItem from "./ArtListItem"
+
+export default function ArtList() {
+
+  const [artList, setArt] = useState([])
+
+  useEffect(() => {
+
+    fetch('https://boolean-uk-api-server.fly.dev/art')
+    .then(res => res.json())
+    .then(data => {
+      console.log(data)
+      setArt(data) 
+    })
+
+  }, [])
+
+  return (
+    <ul className="art-list">
+      {artList.map(art => (
+        <ArtListItem key={art.id} artInfo={art} />
+      ))}
+    </ul>
+  )
+
+}
\ No newline at end of file
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..d6035d37 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,19 @@
+
+import PublicationHistoryList from "./PublicationHistoryList"
+
+export default function ArtListItem({ artInfo }) {
+
+  return (
+    <li>
+      <div className="frame">
+        <img src={`https://boolean-uk-api-server.fly.dev${artInfo.imageURL}`} />
+      </div>
+
+      <h3>{artInfo.title}</h3>
+      <p>Artist: {artInfo.artist}</p>
+
+      <PublicationHistoryList history={artInfo.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..c7736b5d 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,14 @@
 
+export default function PublicationHistoryList({ history }) {
+
+  return (
+    <>
+      <h4>Publication History:</h4>
+      <ul>
+        {history.map((pub, i) => (
+          <li key={i}>{pub}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..22892748 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,15 @@
+import ArtList from "./components/ArtList"
+
 function ArtsSection() {
+  
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+
+        <ArtList />
+
+      </div>
     </section>
   )
 }
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..b899b64f 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,15 @@
+import UsersListItem from "./UsersListItem"
+
+export default function UsersList({ contacts }) {
+  console.log(contacts)
+
+  return (
+    <ul className="users-list">
+      
+      {contacts && contacts.map((c, i) => (
+        <UsersListItem key={i} contactInfo={c}/>
+      ))}
+
+    </ul>
+  )
+}
\ No newline at end of file
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..ff289c41 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,15 @@
+
+export default function UsersListItem({ contactInfo }) {
+  console.log(contactInfo)
+  return (
+    <>
+    <li style={{ background: `${contactInfo.favouriteColour}` }}>
+      <img
+        src={contactInfo.profileImage}
+        alt={`${contactInfo.firstName} ${contactInfo.lastName}`} />
+      <h3>{`${contactInfo.firstName} ${contactInfo.lastName}`}</h3>
+      <p>Email: {`${contactInfo.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..41855346 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,9 +1,27 @@
+import { useEffect, useState } from "react"
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
+  const [contacts, setContacts] = useState([])
+
+  useEffect(() => {
+
+    fetch('https://boolean-uk-api-server.fly.dev/test/contact')
+    .then(res => res.json())
+    .then(data => setContacts(data))
+
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+
+        <UsersList contacts={contacts}/>
+
+      </div>
     </section>
+
   )
 }
 

From f1cd4f7c541eec9684f8b524da32da81a19247a8 Mon Sep 17 00:00:00 2001
From: Andre Velkov Janusev <velkovv97@gmail.com>
Date: Wed, 17 Sep 2025 11:04:28 +0200
Subject: [PATCH 2/2] extension done

---
 src/sections/Advice/components/AdviceSlip.jsx | 12 +++++
 .../Advice/components/FavouriteSlipsList.jsx  | 14 ++++++
 src/sections/Advice/index.jsx                 | 47 +++++++++++++------
 src/sections/Art/components/ArtList.jsx       |  5 +-
 src/sections/Users/components/UsersList.jsx   |  1 -
 .../Users/components/UsersListItem.jsx        |  2 +-
 6 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..e999be6b 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,12 @@
+
+export default function AdviceSlip({ adviceInfo }) {
+
+  return (
+    <section className="adivce-slip">
+
+      <h3>Some Advice</h3>
+      {adviceInfo && <p>{adviceInfo.slip.advice}</p>}
+
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx
index e69de29b..58615afc 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,14 @@
+
+export default function FavouriteSlipsList({ favouritesList}) {
+  
+  return (
+    <section className="favourtite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <ul>
+          {favouritesList && favouritesList.map((fav, i) => (
+            <li key={i}>{fav.slip.advice}</li>
+          ))}
+        </ul>
+      </section>
+  )
+}
\ No newline at end of file
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index dd0c6fa3..58eb0be6 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,24 +1,41 @@
+import { useEffect, useState } from "react"
+import AdviceSlip from "./components/AdviceSlip"
+import FavouriteSlipsList from "./components/FavouriteSlipsList"
 
 function AdviceSection() {
+  const [advice, setAdvice] = useState()
+  const [favAdvice, setFavAdvice] = useState([])
+
+  const fetchAdvice = async () => {
+    const res = await fetch('https://api.adviceslip.com/advice')
+    const data = await res.json()
+    setAdvice(data)
+  }
+
+  useEffect(() => {
+    fetchAdvice()
+
+    // fetch('https://api.adviceslip.com/advice')
+    // .then(res => res.json())
+    // .then(data => setAdvice(data))
+  }, [])
+
+  function onSaveToFavourites() {
+    if (advice) {
+      setFavAdvice(prev => [...prev, advice])
+    }
+  }
+
   return (
     <section>
       <h2>Advice Section</h2>
       
-      <section className="adivce-slip">
-        <h3>Some Advice</h3>
-        <p>Always the burrito.</p>
-        <button>Get More Advice</button>
-        <button>Save to Favourites</button>
-      </section>
-
-      <section className="favourtite-slips-list">
-        <h3>Favourite Advice Slips</h3>
-        <ul>
-          <li>Measure twice, cut once.</li>
-          <li>Do not let the bastards grind you down.</li>
-          <li>Always the burrito.</li>
-        </ul>
-      </section>
+      <AdviceSlip adviceInfo={advice}/>
+            
+      <button onClick={fetchAdvice}>Get More Advice</button>
+      <button onClick={onSaveToFavourites}>Save to Favourites</button>
+      
+      <FavouriteSlipsList favouritesList={favAdvice}/>
 
     </section>
   )
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index 20b1ce2c..03baea07 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -10,10 +10,7 @@ export default function ArtList() {
 
     fetch('https://boolean-uk-api-server.fly.dev/art')
     .then(res => res.json())
-    .then(data => {
-      console.log(data)
-      setArt(data) 
-    })
+    .then(data => setArt(data))
 
   }, [])
 
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index b899b64f..fb9d1f86 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -1,7 +1,6 @@
 import UsersListItem from "./UsersListItem"
 
 export default function UsersList({ contacts }) {
-  console.log(contacts)
 
   return (
     <ul className="users-list">
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index ff289c41..2ec333d0 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -1,6 +1,6 @@
 
 export default function UsersListItem({ contactInfo }) {
-  console.log(contactInfo)
+
   return (
     <>
     <li style={{ background: `${contactInfo.favouriteColour}` }}>