Linda Do

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,16 @@
+function AdviceSlip(props){
+    const {random, handleAddFavourite, fetchData} = props
+
+    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={handleAddFavourite} disabled={!random || !random.slip}>
+            Save to Favourites
+        </button>
+    </section>
+    )
+}
+
+export default AdviceSlip

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,15 @@
+function FavouriteSlipsList(props){
+    const { favourites } = props
+    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,11 +1,39 @@
+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 [random, setRandom] = useState(null)
+  const [favourites, setFavourites] = useState([])
+
+   const fetchData = async () => {
+      const response = await fetch(url)
+      const jsonData = await response.json()
+      setRandom(jsonData)
+    }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+   const handleAddFavourite = () => {
+    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} handleAddFavourite={handleAddFavourite} fetchData = {fetchData}/>
+     <FavouriteSlipsList favourites={favourites}/>
     </section>
   )
 }
 
 export default AdviceSection
+
+

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,17 @@
+import ArtListItem from "./ArtListItem"
+
+function ArtList(props) {
+    const { artList } = props
+    const baseUrl = props
+
+    console.log(baseUrl)
+    return (
+        <li>
+        {artList.map((art, index) => (
+            <ArtListItem art={art} key={index} baseUrl={baseUrl}/>
+        ))}
+        </li>
+    )
+}
+
+export default ArtList

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,15 @@
+import PublicationHistoryList from "./PublicationHistoryList"
+
+function ArtListItem({art, index, baseUrl}){
+    return (
+            <div className= "frame" key={index}>
+            <img src={baseUrl.baseUrl + art.imageURL} alt={art.name} key={index}/>
+            <h3>{art.title}</h3>
+            <p>{"Artist: " + art.artist}</p>
+            <h4>Publication History: </h4>
+            <PublicationHistoryList art={art}/>
+            </div>
+    )
+}
+
+export default ArtListItem

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,12 @@
 
+function PublicationHistoryList({art}){
+    return(
+        <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,8 +1,30 @@
+import{ useEffect, useState } from 'react'
+import ArtList from './components/ArtList'
+
 function ArtsSection() {
+  const baseUrl = "https://boolean-uk-api-server.fly.dev"
+  const url = "https://boolean-uk-api-server.fly.dev/art"
+  const [filteredData, setFilteredData] = useState([])
+
+  useEffect(() => {
+    const fetchData = async () => {
+    const response = await fetch(url)
+    const jsonData = await response.json()
+    setFilteredData(jsonData)
+  }
+  fetchData()
+  }, [])
+
+
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className='art-list'>
+          <ArtList artList={filteredData} baseUrl = {baseUrl}/>
+        </ul>
+      </div>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

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

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,12 @@
+function UsersListItem({user, index}) {
+    return (
+    <li key={index} style={{ background: user.favouriteColour }}>
+    <img src={user.profileImage}/>
+    <h3>{user.firstName +" "+ user.lastName}</h3>
+    <p>Email: {user.email}</p>
+    </li>
+    )
+
+}
+
+export default UsersListItem

src/sections/Users/index.jsx

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