Trym Haugan Berger

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,16 @@
+
+function AdviceSlip({newadvice, fetchNewAdvice, saveToFavourites}) {
+  return (
+    <>
+        <h2>Advice Section</h2>
+        <section className="adivce-slip">
+            <h3>Advice #{newadvice.slip.id}</h3>
+            <p>{newadvice.slip.advice}</p>
+            <button onClick={fetchNewAdvice}>Get More Advice</button>
+            <button onClick={saveToFavourites}>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((adv, i) => (
+          <li key={i}>{adv.slip.advice}</li>  
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+export default FavouriteSlipsList

src/sections/Advice/index.jsx

@@ -1,9 +1,29 @@
+import { useEffect, useState } from "react"
+import AdviceSlip from "./components/AdviceSlip";
+import FavouriteSlipsList from "./components/FavouriteSlipsList";
+
 function AdviceSection() {
+
+const [favAdvices, setfavAdvices] = useState([]);
+const [newadvice, setnewadvice] = useState({slip:{id: "0", advice: "Loading..."}});
+const [newfetch, setnewfetch] = useState(false)
+const baseurl = 'https://api.adviceslip.com/advice'
+
+useEffect(() => {fetch(baseurl).then(res => res.json()).then(setnewadvice)}, [newfetch])
+console.log(newadvice)
+
+const fetchNewAdvice = () => {
+    setnewfetch(!newfetch)
+};
+
+const saveToFavourites = () => {
+    setfavAdvices(prev => [...prev, newadvice])
+}
+
   return (
     <section>
-      <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <AdviceSlip newadvice={newadvice} fetchNewAdvice={fetchNewAdvice} saveToFavourites={saveToFavourites}/>
+      <FavouriteSlipsList favourites={favAdvices}/>
     </section>
   )
 }

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,14 @@
+import ArtListItem from "./ArtListItem"
+
+
+function ArtList({arts, baseurl}) {
+  return (
+    <ul className="art-list">
+        {arts.map((art, i) => (
+            <ArtListItem baseurl={baseurl} art={art} key={i}/>
+        ))}
+      </ul>
+  )
+}
+
+export default ArtList

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,22 @@
+
+function ArtListItem({baseurl, art}) {
+  return (
+        <li>
+              <div className="frame">
+                <img
+                  src={baseurl.concat(art.imageURL)}
+                />
+              </div>
+              <h3>{art.title}</h3>
+              <p>Artist: {art.artist}</p>
+              <h4>Publication History:</h4>
+              <ul>
+                {art.publicationHistory.map((pub, j) => {
+                  return <li key={j}>{pub}</li>
+                })}
+              </ul>
+        </li>
+  )
+}
+
+export default ArtListItem

src/sections/Art/index.jsx

@@ -1,10 +1,20 @@
+import { useEffect, useState } from "react"
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+
+  const [arts, setArts] = useState([]);
+  const baseurl = 'https://boolean-uk-api-server.fly.dev'
+
+  useEffect(() => {fetch('https://boolean-uk-api-server.fly.dev/art').then(res => res.json()).then(setArts)}, [])
+
   return (
-    <section>
-      <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
-    </section>
+  <section>
+    <h2>Arts Section</h2>
+    <div className="scroll-container">
+      <ArtList arts={arts} baseurl={baseurl}/>
+    </div>
+</section>
   )
 }
-
 export default ArtsSection

src/sections/Users/components/UsersList.jsx

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

src/sections/Users/components/UsersListItem.jsx

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

src/sections/Users/index.jsx

@@ -1,8 +1,19 @@
+import { useEffect, useState } from "react"
+import UsersList from "./components/UsersList";
+
 function UsersSection() {
+
+const [users, setUsers] = useState([]);
+const baseurl = 'https://boolean-uk-api-server.fly.dev/598115/contact'
+
+useEffect(() => {fetch(baseurl).then(res => res.json()).then(setUsers)}, [])
+
   return (
     <section>
-      <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+    <h2>Users Section</h2>
+      <div className="scroll-container">
+      <UsersList users={users}/>
+      </div>
     </section>
   )
 }