Johan Reitan

src/sections/Advice/index.jsx

@@ -1,11 +1,68 @@
+import { useEffect, useState } from "react"
+
 function AdviceSection() {
+
+  const url = "https://api.adviceslip.com/advice";
+  const [loading, setLoading] = useState(true);
+  const [slip, setSlip] = useState();
+  const [favouriteSlips, setFavouriteSlips] = useState([]);
+
+
+  const loadSlip = async () => {
+    const response = await fetch(url);
+    const jsonData = await response.json();
+    setSlip(jsonData);
+  };
+
+  const saveSlip = async () => {
+    if(!favouriteSlips.includes(slip)) setFavouriteSlips([...favouriteSlips, slip])
+  };
+
+
+  useEffect(() => {
+    const fetchData = async () => {
+        const response = await fetch(url);
+        const jsonData = await response.json();
+
+
+        setSlip(jsonData);
+  };
+
+  fetchData();
+}, [url]);
+
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        {slip && (
+          <div>
+            <h3>advice #{slip.slip.id}</h3>
+            <p>{slip.slip.advice}</p>
+            <button onClick={loadSlip}>Get More Advice</button>
+            <button onClick={saveSlip}>Save to Favourties</button>
+          </div>
+        )}
+
+
+      </section>
+
+      <section className="favourite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <ul>
+          {favouriteSlips.map((slip, index) => (
+            <li key={index}>
+              <h3>advice #{slip.slip.id}</h3>
+              <p>{slip.slip.advice}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
     </section>
   )
 }
 
 export default AdviceSection
+
+

src/sections/Art/index.jsx

@@ -1,8 +1,50 @@
+import { useEffect, useState } from "react";
+
 function ArtsSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+      setFilteredData(jsonData);
+    };
+    fetchData();
+  }, []);
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <section>
+          <h2>Arts Section</h2>
+          <div className="scroll-container">
+            <ul className="art-list">
+              {filteredData.map((artPiece, index) => (
+                <li key={index}>
+                  <div className="frame">
+                    <img
+                      src={url.slice(0, -4) + artPiece.imageURL}
+                    />
+                  </div>
+                  <h3>{artPiece.title}</h3>
+                  <p>Artist: {artPiece.artist}</p>
+                  <h4>Publication History:</h4>
+                  <ul>
+                    {artPiece.publicationHistory.map((publicationHistory, index) => (
+                      <li key={index}>{publicationHistory}</li> 
+                    ))} 
+                  </ul>
+                </li>
+                ))}
+            </ul>
+          </div>
+        </section>
+
+      </div>
     </section>
   )
 }

src/sections/Users/index.jsx

@@ -1,9 +1,50 @@
+import { useEffect, useState } from "react";
+
 function UsersSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/johanreitan/contact";
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+      setFilteredData(jsonData);
+    };
+    fetchData();
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className="users-list">
+          {filteredData.map((user, index) => (
+            <li 
+            key={index}
+            style={{ background: user.favouriteColour || "gray" }}>
+              <img
+                src={user.profileImage}
+                alt={user.firstName + " " + user.lastName}
+              />
+              <h3>{user.firstName} {user.lastName}</h3>
+              <p>Email: {user.email}</p>
+            </li>
+
+          ))};
+          <li style={{background: "#0d7f26"}}>
+            <img
+              src="https://www.gravatar.com/avatar/chloe.lopez@example.com?s=120&d=identicon"
+              alt="Chloe Lopez"
+            />
+            <h3>Ms Chloe Lopez</h3>
+            <p>Email: chloe.lopez@example.com</p>
+          </li>
+        </ul>
+      </div>
     </section>
+
   )
 }