From d9837b7cfd971924353e3bda3910f2f0fdbf3e3b Mon Sep 17 00:00:00 2001
From: Marie Helene Hansen <marhelhan@icloud.com>
Date: Tue, 2 Sep 2025 08:29:23 +0200
Subject: [PATCH] core + extension

---
 src/App.jsx                                   |  2 +-
 src/sections/Advice/components/AdviceSlip.jsx | 41 +++++++++++++++++++
 .../Advice/components/FavouriteSlipsList.jsx  | 12 ++++++
 src/sections/Advice/index.jsx                 | 20 ++++++++-
 src/sections/Art/components/ArtList.jsx       | 33 +++++++++++++++
 src/sections/Art/components/ArtListItem.jsx   | 30 ++++++++++++++
 .../Art/components/PublicationHistoryList.jsx | 13 ++++++
 src/sections/Art/index.jsx                    |  9 +++-
 src/sections/Users/components/UsersList.jsx   | 33 +++++++++++++++
 .../Users/components/UsersListItem.jsx        | 25 +++++++++++
 src/sections/Users/index.jsx                  |  8 +++-
 11 files changed, 219 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5ef8293f..26b2b3fb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,4 +13,4 @@ function App() {
   )
 }
 
-export default App
+export default App;
diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..0d2ad541 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+
+function AdviceSlip({ onAddToFavourites }) {
+
+    const url = "https://api.adviceslip.com/advice";
+    const [data, setData] = useState([]);
+
+    // had to move it outside the useEffect to use it in button for get more advice
+    const fetchData = async () => {
+
+        const response = await fetch(url);
+        const jsonData = await response.json();
+        setData(jsonData.slip);
+    };
+    
+    useEffect(() => {
+
+        fetchData();
+    }, [])
+
+    return (
+        <>
+        <div className='advice-slip'>
+            <h3>
+                Some advice!
+            </h3>
+            <p>
+                {data.advice}
+            </p>
+            <button onClick={fetchData}>
+                Get more advice
+            </button>
+            <button onClick={() => onAddToFavourites(data)}>
+                Save to favourites
+            </button>
+        </div>
+        </>
+    )
+}
+
+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..f5134279 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,12 @@
+function FavouriteSlipsList({ favourites }) {
+
+    return (
+        <ul>
+            {(favourites || []).map((slip) => (
+                <li key={slip.id}>{slip.advice}</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..24ced464 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,11 +1,27 @@
+import { useState } from 'react'
+
+import AdviceSlip from './components/AdviceSlip';
+import FavouriteSlipsList from './components/FavouriteSlipsList';
+
 function AdviceSection() {
+
+  const [favourites, setFavourites] = useState([]);
+
+  const addFavourite = (advice) => {
+    if (!favourites.some((favourites) => favourites.id === advice.id)) {
+      setFavourites((it) => [...it, advice]);
+    }
+  };
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
+      <section className="advice-slip"></section>
+      <AdviceSlip onAddToFavourites={addFavourite} />
       <section className="favourtite-slips-list"></section>
+      <FavouriteSlipsList favourites={favourites} />
     </section>
   )
 }
 
-export default AdviceSection
+export default AdviceSection;
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..d4e8d97e 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+import ArtListItem from "./ArtListItem";
+
+function ArtList() {
+
+    const url = "https://boolean-uk-api-server.fly.dev/art";
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+
+        const fetchData = async () => {
+
+            const response = await fetch(url);
+            const jsonData = await response.json();
+            setData(jsonData);
+        };
+
+        fetchData();
+    }, [])
+
+    return (
+        <div className="scroll-container">
+            <ul className="art-list">
+                {data.map((art, index) => (
+                    <ArtListItem key={index} art={art} />
+                ))}
+            </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..c35d6793 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,30 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({ art }) {
+
+    const baseURL = "https://boolean-uk-api-server.fly.dev";
+
+    return (
+        <>
+        <li>
+            <div className="frame">
+                {art.imageURL ? (
+                <img
+                    src={baseURL + art.imageURL}
+                    alt={`${art.title} patch`}
+                />
+                ) : (
+                "No patch"
+                )}
+            </div> 
+            <h3>{art.title}</h3>
+            <p>{art.artist}</p>
+            <h4>{<PublicationHistoryList
+                publication={art.publicationHistory}
+            />}</h4> 
+        </li>
+        </>
+    )
+}
+
+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..f32b18c3 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,14 @@
+function PublicationHistoryList({ publication }) {
 
+    return (
+        <>
+        <ul>
+            {publication.map((description, index) => (
+                <li key={index}>{description}</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..29daec47 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,10 +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>
   )
 }
 
-export default ArtsSection
+export default ArtsSection;
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..02929780 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+import UsersListItem from './UsersListItem';
+
+function UsersList() {
+
+    const url = "https://boolean-uk-api-server.fly.dev/mariehhansen/contact"
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+    
+            const fetchData = async () => {
+    
+                const response = await fetch(url);
+                const jsonData = await response.json();
+                setData(jsonData);
+            };
+    
+            fetchData();
+        }, [])
+    return (
+        <div className="scroll-container">
+            <ul className="users-list">
+                {data.map((user, index) => (
+                    <UsersListItem key={index} user={user} />
+                ))}
+
+            </ul>
+        </div>
+    )
+}
+
+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..3fef70bb 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,25 @@
+function UsersListItem({ user }) {
+
+    return (
+        <>
+        <li style={{background: user.favouriteColour}}>
+            <div className="frame">
+                {user.profileImage ? (
+                <img
+                    src={user.profileImage}
+                    alt={`${user.firstName} image`}
+                />
+                ) : (
+                "No profile image"
+                )}
+            </div> 
+            <h3>{(user.gender === "Male") ? (
+                "Mr. " + user.firstName + " " + user.lastName
+            ) : ("Mrs. " + 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 77332830..16af794c 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,10 +1,14 @@
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList />
+      </div>
     </section>
   )
 }
 
-export default UsersSection
+export default UsersSection;