Vegard Stigen

src/sections/Advice/index.jsx

@@ -1,9 +1,45 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react'
+
+
 function AdviceSection() {
+
+  const url = "https://api.adviceslip.com/advice";
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const fetchData = async () => {
+    const response = await fetch(url);
+    const jsonData = await response.json();
+    setData(jsonData);
+    setFilteredData(jsonData); 
+  };
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+        <section>
+          <h2>Advice Section</h2>
+          <section className="adivce-slip">
+            <h3>Some Advice</h3>
+            <p>{data.slip ? (data.slip.advice) : ('no advice')}</p>
+            <button>Get More Advice</button>
+            <button>Save to Favourties</button>
+          </section>
+          <section className="favourtite-slips-list">
+            <h3>Favourite Advice Slips</h3>
+            <ul>
+              <li>Measure twice, cut once.</li>
+              <li>{"Don't let the bastards grind you down."}</li>
+              <li>Always the burrito.</li>
+            </ul>
+          </section>
+        </section>
     </section>
   )
 }

src/sections/Art/index.jsx

@@ -1,9 +1,54 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react'
+
 function ArtsSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+  const [searchTerm, setSearchTerm] = 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">
+        <ul className="art-list">
+          {data.map((art, index) => (
+            <li key={index}>
+              <div className="frame">
+                <img
+                  src={"https://boolean-uk-api-server.fly.dev"+art.imageURL}
+                />
+              </div>
+              <h3>{art.title}</h3>
+              <p>Artist: {art.artist}</p>
+              <h4>Publication History:</h4>
+              <ul>
+                {art.publicationHistory.map((history, index) => (
+                  <li key={index}>{history}</li>
+                ))}
+              </ul>
+            </li>
+
+          ))}
+        </ul>
+      </div>
+
     </section>
+
   )
 }
 

src/sections/Users/index.jsx

@@ -1,8 +1,49 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react'
+
 function UsersSection() {
+
+    const url = "https://boolean-uk-api-server.fly.dev/Vegard-S/contact";
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+  const [searchTerm, setSearchTerm] = 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">
+          {data.map((user, index) => (
+          <li key={index} style={{background: user.favouriteColour}}>
+            <img
+              src={user.profileImage}
+              alt={user.firstName + " " + user.lastName}
+            />
+            <h3>{user.firstName + " " + user.lastName}</h3>
+            <p>{user.email}</p>
+          </li>
+          ))}
+
+
+
+        </ul>
+      </div>
+
     </section>
   )
 }