Hans Jakob Håland

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,11 @@
+const AdviceSlip = ({advice, fetchAdvice, saveToFavourites}) => {
+    return (
+        <section className="adivce-slip">
+            <h3>Some Advice</h3>
+            <p>{advice}</p>
+            <button onClick={fetchAdvice}>Get More Advice</button>
+            <button onClick={saveToFavourites}>Save to Favourites</button>
+        </section>
+    )
+}
+export default AdviceSlip;

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,13 @@
+const FavouriteSlipsList = ({favourites}) => {
+    return (
+        <section className="favourtite-slips-list">
+            <h3>Favourite Advice Slips</h3>
+            {favourites.map((advice, index) => (
+            <li key={index}>
+                <p>{advice}</p>
+            </li>
+            ))}
+        </section>
+    )
+}
+export default FavouriteSlipsList;

src/sections/Advice/index.jsx

@@ -1,9 +1,40 @@
+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 [advice, setAdvice] = useState("");
+  const [favourites, setFavourites] = useState([]);
+
+  const fetchAdvice = async () => {
+    console.log("Fetching advice");
+    const response = await fetch(url);
+    const jsonData = await response.json();
+    setAdvice(jsonData.slip.advice);
+  }
+
+  const saveToFavourites = () => {
+    if (favourites.includes(advice)) {
+      return;
+    }
+    setFavourites((prevFavourites) => [...prevFavourites, advice]);
+    console.log("Added advice");
+  }
+
+  useEffect( () => {
+    fetchAdvice();
+  } , []);
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <AdviceSlip 
+        advice={advice} 
+        fetchAdvice={fetchAdvice} 
+        saveToFavourites={saveToFavourites}
+      />
+      <FavouriteSlipsList favourites={favourites}/>
     </section>
   )
 }

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,25 @@
+import ArtListItem from "./ArtListItem";
+
+const ArtList = ({data, baseImgUrl}) => {
+
+    return (
+        <>
+            <div className="scroll-container">
+                <ul className="art-list" style ={{listStyleType: 'none'}}>
+                {data.map((art, i) => (
+                    <li key={i}>
+                    <ArtListItem 
+                        imageURL={baseImgUrl + art.imageURL} 
+                        title={art.title} 
+                        artist={art.artist}
+                        pubHistory={art.publicationHistory}
+                    />
+                    </li>
+                ))}
+                </ul>
+            </div>
+        </>
+    )
+}
+
+export default ArtList

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,18 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+const ArtListItem = ({imageURL, title, artist, pubHistory}) => {
+
+    return (
+        <div>
+            <div className="frame">
+                <img src={imageURL} />
+            </div>  
+            <h3>{title}</h3>
+            <p>Artist: {artist}</p>
+            <h4>Publication history:</h4>
+            <PublicationHistoryList data={pubHistory}/>
+        </div>
+    )
+}
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,11 @@
+const PublicationHistoryList = ({ data }) => {
 
+    return (
+        <ul>
+        {data.map((item, j) => (
+            <li key={j}>{item}</li>
+        ))}
+        </ul>
+    )
+}
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,8 +1,25 @@
+import { useEffect, useState } from "react"
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+  const baseImgUrl = "https://boolean-uk-api-server.fly.dev";
+  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>
+      <ArtList data={data} baseImgUrl={baseImgUrl}/>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,20 @@
+import UserListItem from "./UsersListItem";
+
+const UserList = ( {data} ) => {
+    return (
+        <ul className="users-list" style ={{listStyleType: 'none'}}>
+          {data.map( (user, index) => (
+                <UserListItem 
+                    key={index}
+                    image={user.profileImage}
+                    firstName={user.firstName}
+                    lastName={user.lastName}
+                    email={user.email}
+                    favColor={user.favouriteColour}
+                />
+          ))}
+        </ul>
+    )
+} 
+
+export default UserList;

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,11 @@
+const UserListItem = ({image, firstName, lastName, email, favColor}) => {
+    return (
+        <li style={{backgroundColor: `${favColor}`}}>
+            <img src={image} alt={`${firstName} ${lastName}`}/>
+            <h3>{`${firstName} ${lastName}`}</h3>
+            <p>Email: {email}</p>
+        </li>
+    )
+}
+
+export default UserListItem;

src/sections/Users/index.jsx

@@ -1,8 +1,26 @@
+import {useState, useEffect} from "react";
+import UserList from "./components/UsersList";
+
 function UsersSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/hansjhaland/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">
+        <UserList data={data}/>
+      </div>
     </section>
   )
 }