From 8b5047d403f03a972c81ce19f77323cd82cf41b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans=20Jakob=20H=C3=A5land?=
 <Hans.Jakob.Haland@no.experis.com>
Date: Mon, 1 Sep 2025 10:52:47 +0200
Subject: [PATCH 1/3] Adds art and user sections

---
 src/sections/Art/components/ArtList.jsx       | 25 +++++++++++++++++++
 src/sections/Art/components/ArtListItem.jsx   | 18 +++++++++++++
 .../Art/components/PublicationHistoryList.jsx | 10 ++++++++
 src/sections/Art/index.jsx                    | 19 +++++++++++++-
 src/sections/Users/components/UsersList.jsx   | 20 +++++++++++++++
 .../Users/components/UsersListItem.jsx        | 12 +++++++++
 src/sections/Users/index.jsx                  | 20 ++++++++++++++-
 7 files changed, 122 insertions(+), 2 deletions(-)

diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..c0b93ecf 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,25 @@
+import ArtListItem from "./ArtListItem";
+
+const ArtList = ({data, baseImgUrl}) => {
+
+    return (
+        <>
+            <div className="scroll-container">
+                <ul className="art-list" style ={{listStyleType: 'none'}}>
+                {data.map((art, i) => (
+                    <li key={i}>
+                    <ArtListItem 
+                        imageURL={baseImgUrl + art.imageURL} 
+                        title={art.title} 
+                        artist={art.artist}
+                        pubHistory={art.publicationHistory}
+                    />
+                    </li>
+                ))}
+                </ul>
+            </div>
+        </>
+    )
+}
+
+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..ed4a09a8 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,18 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+const ArtListItem = ({imageURL, title, artist, pubHistory}) => {
+
+    return (
+        <div>
+            <div className="frame">
+                <img src={imageURL} />
+            </div>  
+            <h3>{title}</h3>
+            <p>Artist: {artist}</p>
+            <h4>Publication history:</h4>
+            <PublicationHistoryList data={pubHistory}/>
+        </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..da3cdb41 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,11 @@
+const PublicationHistoryList = ({ data }) => {
 
+    return (
+        <ul>
+        {data.map((item, j) => (
+            <li key={j}>{item}</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 0c74ffc2..67352274 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,25 @@
+import { useEffect, useState } from "react"
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+  const baseImgUrl = "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>
+      <ArtList data={data} baseImgUrl={baseImgUrl}/>
     </section>
   )
 }
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..0f72cc81 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,20 @@
+import UserListItem from "./UsersListItem";
+
+const UserList = ( {data} ) => {
+    return (
+        <ul className="users-list" style ={{listStyleType: 'none'}}>
+          {data.map( (user, index) => (
+                <UserListItem 
+                    key={index}
+                    image={user.profileImage}
+                    firstName={user.firstName}
+                    lastName={user.lastName}
+                    email={user.email}
+                    favColor={user.favouriteColour}
+                />
+          ))}
+        </ul>
+    )
+} 
+
+export default UserList;
\ No newline at end of file
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..d11ed812 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,12 @@
+const UserListItem = ({image, firstName, lastName, email, favColor}) => {
+    console.log(favColor)
+    return (
+        <li style={{backgroundColor: `${favColor}`}}>
+            <img src={image} alt={`${firstName} ${lastName}`}/>
+            <h3>{`${firstName} ${lastName}`}</h3>
+            <p>Email: {email}</p>
+        </li>
+    )
+}
+
+export default UserListItem;
\ No newline at end of file
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..936a2c62 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,26 @@
+import {useState, useEffect} from "react";
+import UserList from "./components/UsersList";
+
 function UsersSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/hansjhaland/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">
+        <UserList data={data}/>
+      </div>
     </section>
   )
 }

From c0a6f002833f7247a357a241de2918398f9bd4a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans=20Jakob=20H=C3=A5land?=
 <Hans.Jakob.Haland@no.experis.com>
Date: Mon, 1 Sep 2025 10:55:02 +0200
Subject: [PATCH 2/3] Removes unnecessary log

---
 src/sections/Users/components/UsersListItem.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index d11ed812..8c12fdb8 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -1,5 +1,4 @@
 const UserListItem = ({image, firstName, lastName, email, favColor}) => {
-    console.log(favColor)
     return (
         <li style={{backgroundColor: `${favColor}`}}>
             <img src={image} alt={`${firstName} ${lastName}`}/>

From c657170998229872bfbd45d742b6b2b320989bf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans=20Jakob=20H=C3=A5land?=
 <Hans.Jakob.Haland@no.experis.com>
Date: Mon, 1 Sep 2025 11:37:10 +0200
Subject: [PATCH 3/3] Adds advice setion with favourites

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

diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..06f37ea0 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,11 @@
+const AdviceSlip = ({advice, fetchAdvice, saveToFavourites}) => {
+    return (
+        <section className="adivce-slip">
+            <h3>Some Advice</h3>
+            <p>{advice}</p>
+            <button onClick={fetchAdvice}>Get More Advice</button>
+            <button onClick={saveToFavourites}>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..a7c283ed 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,13 @@
+const FavouriteSlipsList = ({favourites}) => {
+    return (
+        <section className="favourtite-slips-list">
+            <h3>Favourite Advice Slips</h3>
+            {favourites.map((advice, index) => (
+            <li key={index}>
+                <p>{advice}</p>
+            </li>
+            ))}
+        </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 0405f11f..9d39e46a 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,9 +1,40 @@
+import { useEffect, useState } from "react"
+import AdviceSlip from "./components/AdviceSlip";
+import FavouriteSlipsList from "./components/FavouriteSlipsList";
+
 function AdviceSection() {
+  const url = "https://api.adviceslip.com/advice";
+  const [advice, setAdvice] = useState("");
+  const [favourites, setFavourites] = useState([]);
+
+  const fetchAdvice = async () => {
+    console.log("Fetching advice");
+    const response = await fetch(url);
+    const jsonData = await response.json();
+    setAdvice(jsonData.slip.advice);
+  }
+
+  const saveToFavourites = () => {
+    if (favourites.includes(advice)) {
+      return;
+    }
+    setFavourites((prevFavourites) => [...prevFavourites, advice]);
+    console.log("Added advice");
+  }
+
+  useEffect( () => {
+    fetchAdvice();
+  } , []);
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <AdviceSlip 
+        advice={advice} 
+        fetchAdvice={fetchAdvice} 
+        saveToFavourites={saveToFavourites}
+      />
+      <FavouriteSlipsList favourites={favourites}/>
     </section>
   )
 }