Isabell Tran

src/App.jsx

@@ -1,6 +1,6 @@
-import AdviceSection from './sections/Advice'
 import ArtsSection from './sections/Art'
 import UsersSection from './sections/Users'
+import AdviceSection from './sections/Advice'
 import './App.css'
 
 function App() {

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,14 @@
+function AdviceSlip({random, fetchData, handleAddFavourites}) {
+    return (    
+        <section className="adivce-slip">
+        <h3>Some Advice</h3>
+        <p>{random && random.slip ? random.slip.advice : "Loading..."}</p>
+        <button onClick={fetchData}>Get More Advice</button>
+        <button onClick={handleAddFavourites}>Save to Favourties</button>
+      </section>
+
+    )
+}
+
+
+export default AdviceSlip;

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,15 @@
+
+function FavouriteSlipsList({favourites}) {
+  return (
+    <section className="favourtite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <ul>
+          {favourites.map(slip => (
+            <li key={slip.id}>{slip.advice}</li>
+          ))}
+        </ul>
+      </section>
+  )
+}
+
+export default FavouriteSlipsList

src/sections/Advice/index.jsx

@@ -1,9 +1,34 @@
+import { useEffect, useState } from "react"
+import FavouriteSlipsList from "./components/FavouriteSlipsList";
+import AdviceSlip from "./components/AdviceSlip";
+
 function AdviceSection() {
+  const url = "https://api.adviceslip.com/advice";
+  const [random, setRandom] = useState("");
+  const [favourites, setFavourites] = useState([]);
+
+
+    const fetchData = async () => {
+        const response = await fetch(url);
+        const jsonData = await response.json();
+        setRandom(jsonData);
+    };
+    useEffect(() => {
+    fetchData();
+      }, []);
+
+    const handleAddFavourites = () => {
+      if (random && random.slip ){
+        if (!favourites.some(fav => fav.id === random.slip.id)) {
+          setFavourites([...favourites, random.slip]);
+      }
+    }
+  }
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <AdviceSlip random={random} fetchData={fetchData} handleAddFavourites={handleAddFavourites} />
+      <FavouriteSlipsList favourites={favourites} />
     </section>
   )
 }

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,13 @@
+import ArtListItem from "./ArtListItem"
+
+function ArtList({art, url}) {
+
+    return (
+        <div className = "scroll-container">
+            <ArtListItem art = {art} url = {url} />
+        </div>
+
+    )
+}
+
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,24 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({art, url}) { 
+
+    return (
+        <>
+        <ul className="art-list">
+        <li>
+            <div className="frame">
+            <img
+                src={url + art.imageURL}
+            />
+            </div>
+            <h3>{art.title}</h3>
+            <p>Artist: {art.artist}</p>
+            <PublicationHistoryList art={art}/>
+        </li>
+        </ul>
+        </>
+
+    )
+}
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,15 @@
+function PublicationHistoryList({art}) {
+    return (
+        <>
+            <h4>Publication History:</h4>
+            <ul>
+            <li>{art.publicationHistory[0]}</li>
+            <li>{art.publicationHistory[1]}</li>
+            <li>{art.publicationHistory[2]}</li>
+            </ul>
+        </>
+    )
+}
 
+
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,10 +1,32 @@
-function ArtsSection() {
-  return (
-    <section>
-      <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
-    </section>
-  )
+import {useEffect, useState} from "react"
+import ArtList from "./components/ArtList";
+
+function ArtListItem() {
+
+    const url = "https://boolean-uk-api-server.fly.dev";
+
+    const [data, setData] = useState([]);
+    const [filteredData, setFilteredData] = useState([]);   
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const reponse = await fetch(url+"/art");
+            const jsonData = await reponse.json();
+            setData(jsonData);
+            setFilteredData(jsonData);
+        };
+        fetchData();
+    }, []);
+
+    return (
+        <section>
+        <h2>Arts Section</h2>
+        {filteredData.map((art, index) => (
+          <ArtList key = {index} art = {art} url = {url}/>
+        ))}
+      </section>
+
+    )
 }
 
-export default ArtsSection
+export default ArtListItem;

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,13 @@
+import UsersListItem from "./UsersListItem"
+
+function UsersList({props}) {
+    const { user } = props
+  return (
+    <div className="scroll-container">
+        <UsersListItem user = {user} />
+
+    </div>
+  )
+}
+
+export default UsersList

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,16 @@
+function UsersListItem(props) {
+    const { user } = props;
+  return (
+    <ul className="users-list">
+        <li style={{background: user.favouriteColour}}>
+            <img
+              src={user.profileImage}
+            />
+            <h3>{user.firstName} {user.lastName}</h3>
+            <p>{user.email}</p>
+        </li>
+    </ul>
+  )
+}
+
+export default UsersListItem

src/sections/Users/index.jsx

@@ -1,8 +1,29 @@
+import { useEffect, useState } from 'react'
+import UsersListItem from './components/UsersListItem';
+
 function UsersSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/isabelltran/contact";
+
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+      setFilteredData(jsonData);
+    };
+    fetchData();  
+  }, []);
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      {filteredData.map((user, index) => (
+        <UsersListItem key={index} user={user} />
+      ))}
     </section>
   )
 }