Kristoffer Blücher

src/sections/Advice/index.jsx

@@ -3,6 +3,7 @@ function AdviceSection() {
     <section>
       <h2>Advice Section</h2>
       <section className="adivce-slip"></section>
+
       <section className="favourtite-slips-list"></section>
     </section>
   )

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,19 @@
+import ArtListItem from "./ArtListItem.jsx";
+
+function ArtList({data}) {
+
+    return(
+
+        <ul className="art-list">
+
+        {data.map((Painting) => (
+            <ArtListItem key={Painting.id} Painting={Painting} />
+        ))}
+
+        </ul>
+
+    )
+
+}
+
+export default ArtList

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,28 @@
+import PublicationHistory from "./PublicationHistoryList.jsx"
+
+
+function ArtListItem({Painting}) {
+
+    return (
+
+        <li>
+        <div className="frame">
+          <img
+            src={"https://boolean-uk-api-server.fly.dev" + Painting.imageURL}
+            alt = "image"
+          />
+        </div>
+
+        <h3>{Painting.title}</h3>
+        <p>Artist: {Painting.artist}</p>
+        <h4> Publication history: </h4>
+        <PublicationHistory pubHistory = {Painting.publicationHistory} />
+
+        </li>
+
+    )
+
+}
+
+
+export default ArtListItem

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,20 @@
 
+
+
+function PublicationHistory ({pubHistory}) {
+
+
+    return(
+        <ul>
+            {pubHistory.map((publication, index ) => (
+                <li key={index}>{publication}</li>
+            ))}
+
+        </ul>
+
+    )
+
+
+}
+
+export default PublicationHistory

src/sections/Art/index.jsx

@@ -1,8 +1,32 @@
+import {useState, useEffect } from "react";
+import ArtList from "./components/ArtList.jsx";
+
+
 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 data={data}/>
+      </div>
+
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,22 @@
+import UsersListItem from "./UsersListItem.jsx";
+
+
+
+function UsersList ({data}) {
+
+    return (
+
+        <ul className = "users-list" >
+
+            {data.map((User) => (
+
+                <UsersListItem key={User.id} User={User} />
+            ))}
+
+        </ul>
+
+    )
+
+}
+
+export default UsersList

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,21 @@
+
+
+
+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>
+    )
+
+}
+
+
+export default UsersListItem

src/sections/Users/index.jsx

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