André Velkov Janusev

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,12 @@
+
+export default function AdviceSlip({ adviceInfo }) {
+
+  return (
+    <section className="adivce-slip">
+
+      <h3>Some Advice</h3>
+      {adviceInfo && <p>{adviceInfo.slip.advice}</p>}
+
+    </section>
+  )
+}

src/sections/Advice/components/FavouriteSlipsList.jsx

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

src/sections/Advice/index.jsx

@@ -1,11 +1,46 @@
+import { useEffect, useState } from "react"
+import AdviceSlip from "./components/AdviceSlip"
+import FavouriteSlipsList from "./components/FavouriteSlipsList"
+
 function AdviceSection() {
+  const [advice, setAdvice] = useState()
+  const [favAdvice, setFavAdvice] = useState([])
+
+  const fetchAdvice = async () => {
+    const res = await fetch('https://api.adviceslip.com/advice')
+    const data = await res.json()
+    setAdvice(data)
+  }
+
+  useEffect(() => {
+    fetchAdvice()
+
+    // fetch('https://api.adviceslip.com/advice')
+    // .then(res => res.json())
+    // .then(data => setAdvice(data))
+  }, [])
+
+  function onSaveToFavourites() {
+    if (advice) {
+      setFavAdvice(prev => [...prev, advice])
+    }
+  }
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+
+      <AdviceSlip adviceInfo={advice}/>
+
+      <button onClick={fetchAdvice}>Get More Advice</button>
+      <button onClick={onSaveToFavourites}>Save to Favourites</button>
+
+      <FavouriteSlipsList favouritesList={favAdvice}/>
+
     </section>
   )
 }
 
 export default AdviceSection
+
+

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,25 @@
+
+import { useState, useEffect } from "react"
+import ArtListItem from "./ArtListItem"
+
+export default function ArtList() {
+
+  const [artList, setArt] = useState([])
+
+  useEffect(() => {
+
+    fetch('https://boolean-uk-api-server.fly.dev/art')
+    .then(res => res.json())
+    .then(data => setArt(data))
+
+  }, [])
+
+  return (
+    <ul className="art-list">
+      {artList.map(art => (
+        <ArtListItem key={art.id} artInfo={art} />
+      ))}
+    </ul>
+  )
+
+}

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,19 @@
+
+import PublicationHistoryList from "./PublicationHistoryList"
+
+export default function ArtListItem({ artInfo }) {
+
+  return (
+    <li>
+      <div className="frame">
+        <img src={`https://boolean-uk-api-server.fly.dev${artInfo.imageURL}`} />
+      </div>
+
+      <h3>{artInfo.title}</h3>
+      <p>Artist: {artInfo.artist}</p>
+
+      <PublicationHistoryList history={artInfo.publicationHistory} />
+
+    </li>
+  )
+}

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,14 @@
 
+export default function PublicationHistoryList({ history }) {
+
+  return (
+    <>
+      <h4>Publication History:</h4>
+      <ul>
+        {history.map((pub, i) => (
+          <li key={i}>{pub}</li>
+        ))}
+      </ul>
+    </>
+  )
+}

src/sections/Art/index.jsx

@@ -1,8 +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>
   )
 }

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,14 @@
+import UsersListItem from "./UsersListItem"
+
+export default function UsersList({ contacts }) {
+
+  return (
+    <ul className="users-list">
+
+      {contacts && contacts.map((c, i) => (
+        <UsersListItem key={i} contactInfo={c}/>
+      ))}
+
+    </ul>
+  )
+}

src/sections/Users/components/UsersListItem.jsx

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

src/sections/Users/index.jsx

@@ -1,9 +1,27 @@
+import { useEffect, useState } from "react"
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
+  const [contacts, setContacts] = useState([])
+
+  useEffect(() => {
+
+    fetch('https://boolean-uk-api-server.fly.dev/test/contact')
+    .then(res => res.json())
+    .then(data => setContacts(data))
+
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+
+        <UsersList contacts={contacts}/>
+
+      </div>
     </section>
+
   )
 }