From a2caf4a36b85b1e86a616a50ec8b0d7d7f783311 Mon Sep 17 00:00:00 2001
From: Magnus Hissingby <magnus.h@wemail.no>
Date: Mon, 1 Sep 2025 15:31:39 +0200
Subject: [PATCH 1/2] Core complete

---
 src/App.css                                   | 11 ++++-----
 src/sections/Art/components/Art.css           | 16 +++++++++++++
 src/sections/Art/components/ArtList.jsx       | 20 ++++++++++++++++
 src/sections/Art/components/ArtListItem.jsx   | 22 ++++++++++++++++++
 .../Art/components/PublicationHistoryList.jsx | 17 ++++++++++++++
 src/sections/Art/index.jsx                    | 23 ++++++++++++++++++-
 src/sections/Users/components/UsersList.jsx   | 22 ++++++++++++++++++
 .../Users/components/UsersListItem.jsx        | 18 +++++++++++++++
 src/sections/Users/index.jsx                  | 22 +++++++++++++++++-
 9 files changed, 162 insertions(+), 9 deletions(-)
 create mode 100644 src/sections/Art/components/Art.css

diff --git a/src/App.css b/src/App.css
index 2e479417..534d1551 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,15 +2,12 @@ body {
   margin: 0;
 }
 
-* {
-  box-sizing: border-box;
+h2 {
+  text-align:center;
 }
 
-ul[class] {
-  list-style: none;
-
-  margin: 0;
-  padding: 0;
+* {
+  box-sizing: border-box;
 }
 
 .main-layout {
diff --git a/src/sections/Art/components/Art.css b/src/sections/Art/components/Art.css
new file mode 100644
index 00000000..9e1332e0
--- /dev/null
+++ b/src/sections/Art/components/Art.css
@@ -0,0 +1,16 @@
+
+ul {
+    padding:5px;
+}
+
+.art_item {
+    padding-bottom:30px;
+}
+
+.history_list_item {
+    padding-bottom:8px;
+    padding-left:10px;
+}
+
+
+
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..f9c435ac 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,20 @@
+
+/* eslint-disable react/prop-types */
+import './Art.css'
+
+import ArtListItem from "./ArtListItem";
+
+function ArtList({ data, imageURLBase }) { 
+
+    return (
+        <>
+        <ul className="list_of_arts">
+            {data.map((art, index) => (
+                <ArtListItem image={imageURLBase + art.imageURL} title={art.title} name={art.artist} publications={art.publicationHistory} key={index}/>
+            ))}
+        </ul>
+        </>
+    );
+}
+
+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..87c7ae28 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,22 @@
+import PublicationHistoryList from "./PublicationHistoryList"
+import './Art.css'
+
+function ArtListItem({ image, title, name, publications }) {
+
+    return (
+        <>
+        <li className="art_item">
+            <img 
+                src={image}
+                alt="Could not render image"
+                className="art_image"
+            />
+            <h2 className="title">{title}</h2>
+            <h4 className="artist">Artist: {name}</h4>
+            <PublicationHistoryList history={publications}/>
+        </li>
+        </>
+    )
+}
+
+export default ArtListItem
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..8e0b7f2d 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,18 @@
 
+import './Art.css'
+
+function PublicationHistoryList({ history }) {
+
+    return (
+        <>
+        <h3>Publication History</h3>
+        <ul className="history_list">
+            {history.map((it, index) => (
+                <li className="history_list_item" key={index}>♦ {it}</li>
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default PublicationHistoryList
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..cf7adbd2 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,29 @@
+
+import { useState, useEffect } from 'react'
+import ArtList from './components/ArtList';
+
 function ArtsSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/art"
+  const imageURLBase = "https://boolean-uk-api-server.fly.dev"
+
+  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 data={data} imageURLBase={imageURLBase} />
+      </div>
     </section>
   )
 }
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..0ee85def 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,22 @@
+import UsersListItem from "./UsersListItem"
+
+function UsersList({ data }) {
+
+    return (
+        <>
+        <ul className="users_list">
+            {data.map((user, index) => (
+                <UsersListItem 
+                    img={user.profileImage}
+                    name={user.firstName+ " " + user.lastName}
+                    email={user.email}
+                    color={user.favouriteColour} 
+                    key={index}
+                />
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default UsersList
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..bdb378d6 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,18 @@
+
+function UsersListItem({ img, name, email, color }) {
+
+    return (
+        <>
+        <li style={{background:`${color}`}}>
+            <img 
+                src={img}
+                alt={name}
+            />
+            <h3>{name}</h3>
+            <p>Email: {email}</p>
+        </li>
+        </>
+    )
+}
+
+export default UsersListItem
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..f35c4c0a 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,28 @@
+
+import { useState, useEffect } from 'react'
+import UsersList from './components/UsersList'
+
 function UsersSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/magnusgit1/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 data={data} />
+      </div>
     </section>
   )
 }

From df6f42c828608ce01cdd8de3058af466cdbdf82d Mon Sep 17 00:00:00 2001
From: Magnus Hissingby <magnus.h@wemail.no>
Date: Mon, 1 Sep 2025 18:47:40 +0200
Subject: [PATCH 2/2] extension complete

---
 src/sections/Advice/components/AdviceSlip.jsx | 15 +++++++
 .../Advice/components/FavouriteSlipsList.jsx  | 18 +++++++++
 src/sections/Advice/index.jsx                 | 39 ++++++++++++++++++-
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..0d69cb47 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,15 @@
+
+
+function AdviceSlip({ advice, onClick, onFavourite }) {
+    
+    return (
+        <>
+        <h3>Some advice</h3>
+        <p>{advice}</p>
+        <button onClick={onClick}>Get more advice</button>
+        <button value={advice} onClick={onFavourite}>Add to favourites</button>
+        </>
+    )
+}
+
+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..6ec0762a 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,18 @@
+
+function FavouriteSlipsList({ favourites }) {
+
+    return (
+        <>
+        <h3>Favourite advice slips</h3>
+        <ul className="favourites">
+            {favourites.map((fav, index) => (
+                <li key={index}>
+                    {fav}
+                </li>
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default FavouriteSlipsList
\ No newline at end of file
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..cbafa1b9 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,9 +1,44 @@
+
+import { useState, useEffect } from 'react'
+import FavouriteSlipsList from './components/FavouriteSlipsList'
+import AdviceSlip from './components/AdviceSlip'
+
 function AdviceSection() {
+
+  const url = "https://api.adviceslip.com/advice"
+
+  const [data, setData] = useState([])
+  const [isClicked, setIsClicked] = useState(false)
+  const [favourites, setFavourites] = useState([])
+
+  const onClick = () => {
+    setIsClicked(!isClicked)
+  }
+
+  const onFavourite = (e) => {
+    if (!(favourites.includes(e.target.value))){
+    setFavourites([...favourites, e.target.value])
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url)
+      const jsonData = await response.json()
+      setData(jsonData)
+    }
+    fetchData()
+  }, [isClicked])
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        <AdviceSlip advice={data.slip?.advice} onClick={onClick} onFavourite={onFavourite} />
+      </section>
+      <section className="favourtite-slips-list">
+        <FavouriteSlipsList favourites={favourites} />
+      </section>
     </section>
   )
 }