Jonas Finborud Nyman

src/App.jsx

@@ -4,6 +4,10 @@ import UsersSection from './sections/Users'
 import './App.css'
 
 function App() {
+
+
+
+
   return (
     <div className="main-layout">
       <ArtsSection />

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,16 @@
+import ArtListItem from "./ArtListItem"
+
+const ArtList = (props) => {
+
+    return (
+        <ul>
+            {props.artworkList.map((artwork, index) => {
+                return (
+                    <ArtListItem artwork={artwork} key={index} index={index} baseURL={props.baseURL} />
+                )
+            })}
+        </ul>
+    )
+}
+
+export default ArtList

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,20 @@
+import PublicationHistoryList from "./PublicationHistoryList"
+
+const ArtListItem = (props) => {
+
+    return (
+        <li style={{listStyleType: "none"}} id={props.index}>
+            <div className="frame">
+                <img
+                    src={`${props.baseURL}${props.artwork.imageURL}`}
+                />
+            </div>
+            <h3>{props.artwork.title}</h3>
+            <p>{props.artwork.artist}</p>
+            <h4>Publication History:</h4>
+            <PublicationHistoryList artwork={props.artwork}/>
+      </li>
+    )
+}
+
+export default ArtListItem

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,13 @@
 
+const PublicationHistoryList = (props) => {
+
+    return (
+        <ul>
+          <li>{props.artwork.publicationHistory[0]}</li>
+          <li>{props.artwork.publicationHistory[1]}</li>
+          <li>{props.artwork.publicationHistory[2]}</li>
+        </ul>
+    )
+}
+
+export default PublicationHistoryList

src/sections/Art/index.jsx

@@ -1,8 +1,29 @@
+import { useState } from "react"
+import ArtList from "./components/ArtList"
+import { useEffect } from "react"
+
 function ArtsSection() {
+
+  const [artworkList, setArtworkList] = useState(null)
+
+  const baseURL = "https://boolean-uk-api-server.fly.dev/"
+
+  useEffect(() => {
+      fetch(baseURL + "art")
+      .then(res => res.json())
+      .then(data => setArtworkList(data))
+  }, [])
+
+  console.log(artworkList)
+
+  console.log(baseURL + "art")
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        {artworkList && <ArtList artworkList={artworkList} baseURL={baseURL} />}
+      </div>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,17 @@
+import UsersListItem from "./UsersListItem"
+
+const UsersList = (props) => {
+
+
+    return ( 
+        <ul className="users-list">
+            {props.usersList.map((user, index) => {
+                return (
+                    <UsersListItem user={user} index={index} key={index}/>
+                )
+            })}
+        </ul>
+    )
+}
+
+export default UsersList

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,17 @@
+
+const UsersListItem = (props) => {
+
+
+    return (
+        <li id={props.index} style={{background: "#0d7f26"}}>
+            <img
+            src={props.user.profileImage}
+            alt={`${props.user.firstName} ${props.user.lastName}`}
+            />
+            <h3>{`${props.user.firstName} ${props.user.lastName}`}</h3>
+            <p>Email: {`${props.user.email}`}</p>
+        </li>
+    )
+}
+
+export default UsersListItem

src/sections/Users/index.jsx

@@ -1,8 +1,29 @@
+import { useEffect, useState } from "react"
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
+
+  const [usersList, setUsersList] = useState(null)
+
+  const baseURL = "https://boolean-uk-api-server.fly.dev/"
+  const githubUsername = "jonasmelonas"
+
+  useEffect(() => {
+    fetch(`${baseURL}${githubUsername}/contact`)
+    .then(res => res.json())
+    .then(data => setUsersList(data))
+  }, [])
+
+  console.log(usersList)
+
+  console.log(`${baseURL}${githubUsername}/contact`)
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        {usersList && <UsersList usersList={usersList} />}
+      </div>
     </section>
   )
 }