Hanna Adenholm

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,8 @@
+export default function AdviceSlip({slip}) {
+    return (
+        <>
+        <h3>Some Advice</h3>
+        <p>{slip.advice}</p>
+        </>
+    )
+}

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,9 @@
+export default function FavouriteSlipsList({slips}) {
+  return (
+    <ul>
+      {slips.map((slip, i) => (
+        <li key={i}>{slip.advice}</li>
+      ))}
+    </ul>
+  );
+}

src/sections/Advice/index.jsx

@@ -1,9 +1,34 @@
+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 [favourites, setFavourites] = useState([])
+  const [advice, setAdvice] = useState(null)
+
+  const fetchData = async () => {
+          const response = await fetch(`${url}?t=${new Date().getTime()}`);
+          const jsonData = await response.json();
+          setAdvice(jsonData.slip);
+        };
+
+  useEffect(() => {
+        fetchData();
+      }, [])
+
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        {advice ? <AdviceSlip slip={advice}/> : <p>Loading...</p>}
+        <button onClick={fetchData}>Get more advice</button>
+        <button onClick={() => setFavourites(prev => [...prev, advice])}>Save to Favourites</button>
+      </section>
+      <section className="favourtite-slips-list">
+        <FavouriteSlipsList slips={favourites}/>
+      </section>
     </section>
   )
 }

src/sections/Art/components/ArtList.jsx

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

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,17 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+export default function ArtListItem({artwork}) {
+    return (
+            <li>
+                <div className="frame">
+                <img
+                    src={"https://boolean-uk-api-server.fly.dev" + artwork.imageURL}
+                />
+                </div>
+                <h3>{artwork.title}</h3>
+                <p>Artist: {artwork.artist}</p>
+                <h4>Publication History:</h4>
+                <PublicationHistoryList publications={artwork.publicationHistory}/>
+          </li>
+    );
+}

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,11 @@
 
+export default function PublicationHistoryList({publications}) {
+
+  return (
+    <ul>
+      {publications.map((publ, i) => (
+        <li key={i}>{publ}</li>
+      ))}
+    </ul>
+  );
+}

src/sections/Art/index.jsx

@@ -1,8 +1,28 @@
+import { useEffect, useState } from "react";
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+    };
+    fetchData();
+  }, [])
+
+
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList artList={data}/>
+      </div>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

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

src/sections/Users/components/UsersListItem.jsx

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

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/adenholm/contact";
+
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+      const fetchData = async () => {
+        const response = await fetch(url);
+        const jsonData = await response.json();
+        setData(jsonData);
+      };
+      fetchData();
+    }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList usersList={data}/>
+      </div>
     </section>
   )
 }