André Chamoun

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,12 @@
+function AdviceSlip({ advice, onGetMore, onSave }) {
+  return (
+    <section className="adivce-slip">
+      <h3>Some Advice</h3>
+      <p>{advice}</p>
+      <button onClick={onGetMore}>Get More Advice</button>
+      <button onClick={onSave}>Save to Favourites</button>
+    </section>
+  );
+}
+
+export default AdviceSlip;

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,14 @@
+function FavouriteSlipsList({ items }) {
+  return (
+    <section className="favourtite-slips-list">
+      <h3>Favourite Advice Slips</h3>
+      <ul>
+        {items.map((text, idx) => (
+          <li key={idx}>{text}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default FavouriteSlipsList;

src/sections/Advice/index.jsx

@@ -1,11 +1,44 @@
+import { useState, useEffect } from "react";
+import AdviceSlip from "./components/AdviceSlip.jsx";
+import FavouriteSlipsList from "./components/FavouriteSlipsList.jsx";
+
+const ADVICE_API = "https://api.adviceslip.com";
+
 function AdviceSection() {
+  const [advice, setAdvice] = useState("");
+  const [favouriteSlips, setFavouriteSlips] = useState([]);
+
+  const fetchAdvice = () => {
+    fetch(`${ADVICE_API}/advice`)
+      .then((response) => response.json())
+      .then((data) => setAdvice(data.slip.advice));
+  };
+
+  useEffect(() => {
+    fetchAdvice();
+  }, []);
+
+  const handleSave = () => {
+    if (advice && !favouriteSlips.includes(advice)) {
+      setFavouriteSlips([...favouriteSlips, advice]);
+    }
+  };
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        <AdviceSlip
+          advice={advice}
+          onGetMore={fetchAdvice}
+          onSave={handleSave}
+        />
+      </section>
+      <section className="favourtite-slips-list">
+        <FavouriteSlipsList items={favouriteSlips} />
+      </section>
     </section>
-  )
+  );
 }
 
-export default AdviceSection
+export default AdviceSection;

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,13 @@
+import ArtListItem from "./ArtListItem.jsx";
+
+function ArtList({ artworks }) {
+  return (
+    <ul className="art-list">
+      {artworks.map((artwork) => (
+        <ArtListItem key={artwork.id} artwork={artwork} />
+      ))}
+    </ul>
+  );
+}
+
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,19 @@
+function ArtListItem({ artwork }) {
+  return (
+    <li>
+      <div className="frame">
+        <img src={artwork.imageUrl} alt={artwork.title} />
+      </div>
+      <h3>{artwork.title}</h3>
+      <p>Artist: {artwork.artist}</p>
+      <h4>Publication History:</h4>
+      <ul>
+        {artwork.publicationHistoryList.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </li>
+  );
+}
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,14 @@
+function PublicationHistoryList({ entries = [] }) {
+  return (
+    <>
+      <h4>Publication History:</h4>
+      <ul>
+        {entries.map((line, idx) => (
+          <li key={idx}>{line}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
 
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,10 +1,36 @@
+import { useEffect, useState } from "react";
+import ArtList from "./components/ArtList.jsx";
+
+const BASE = "https://boolean-uk-api-server.fly.dev";
+
 function ArtsSection() {
+  const [artworks, setArtworks] = useState([]);
+
+  useEffect(() => {
+    fetch(`${BASE}/art`)
+      .then((response) => response.json())
+      .then((data) => {
+        const artworksWithData = data.map((art) => {
+          return {
+            id: art.id,
+            title: art.title,
+            artist: art.artist,
+            imageUrl: `${BASE}${art.imageURL}`,
+            publicationHistoryList: art.publicationHistory || [],
+          };
+        });
+        setArtworks(artworksWithData);
+      });
+  }, []);
+
   return (
     <section>
-      <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <h2>Art Section</h2>
+      <div className="scroll-container">
+        <ArtList artworks={artworks} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default ArtsSection
+export default ArtsSection;

src/sections/Art/template.html

@@ -5,7 +5,7 @@ <h2>Arts Section</h2>
       <li>
         <div class="frame">
           <img
-            src="https://boolean-api-server.fly.dev/images/paris-street-rainy-day.jpg"
+            src="https://boolean-uk-api-server.fly.dev/images/paris-street-rainy-day.jpg"
           />
         </div>
         <h3>Paris Street; Rainy Day</h3>

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,13 @@
+import UsersListItem from "./UsersListItem";
+
+function UsersList({ users }) {
+  return (
+    <ul className="users-list">
+      {users.map((user, index) => (
+        <UsersListItem key={index} user={user} />
+      ))}
+    </ul>
+  );
+}
+
+export default UsersList;

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,13 @@
+function UsersListItem({ user }) {
+  const fullName = `${user.firstName} ${user.lastName}`;
+
+  return (
+    <li style={{ background: user.favouriteColour }}>
+      <img src={user.profileImage} alt={fullName} />
+      <h3>{fullName}</h3>
+      <p>Email: {user.email}</p>
+    </li>
+  );
+}
+
+export default UsersListItem;

src/sections/Users/index.jsx

@@ -1,10 +1,28 @@
+import { useState, useEffect } from "react";
+import UsersList from "./components/UsersList";
+
+const BASE_URL = "https://boolean-uk-api-server.fly.dev";
+
 function UsersSection() {
+  const [users, setUsers] = useState([]);
+
+  // Replace with your GitHub username
+  const GITHUB_USERNAME = "andrechamoun555";
+
+  useEffect(() => {
+    fetch(`${BASE_URL}/${GITHUB_USERNAME}/contact`)
+      .then((response) => response.json())
+      .then(setUsers);
+  }, []);
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList users={users} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default UsersSection
+export default UsersSection;