Lucas Carlsson Holter

src/api.js

@@ -0,0 +1,47 @@
+const apiURI = "https://boolean-uk-api-server.fly.dev"
+
+export function getUsers(){
+  return fetch(apiURI + "/lucasholter00/contact", {
+    method: "GET",
+    headers: {
+      "Accept": "application/json"
+    }
+  }).then(res => {
+    if (!res.ok) {
+      // If response status is not 2xx, throw error to be caught below
+      throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+    return res.json();
+  }).catch(err => {throw err})
+}
+
+export function getArt(){
+  return fetch(apiURI + "/art", {
+    method: "GET",
+    headers: {
+      "Accept": "application/json"
+    }
+  }).then(res => {
+    if (!res.ok) {
+      // If response status is not 2xx, throw error to be caught below
+      throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+    return res.json();
+  }).catch(err => {throw err})
+}
+
+export function getAdvice(){
+  return fetch("https://api.adviceslip.com/advice", {
+    cache: "no-store",
+    method: "GET",
+    headers: {
+      "Accept": "application/json"
+    }
+  }).then(res => {
+    if (!res.ok) {
+      // If response status is not 2xx, throw error to be caught below
+      throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+    return res.json();
+  }).catch(err => {throw err})
+}

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,11 @@
+export default function AdviceSlip( { advice, newAdvice, addToFavorites } ){
+
+  return (
+    <>
+      <h3>Some Advice</h3>
+      <p>{ advice.slip?.advice || "....loading" }</p>
+      <button onClick={ newAdvice }>Get More Advice</button>
+      <button onClick={ addToFavorites }>Save to Favourties</button>
+    </>
+  )
+}

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,10 @@
+export default function FavouriteSlipsList( { favoriteAdvice } ){
+
+  return(
+      <ul>
+        {favoriteAdvice.map((curr, index) => (
+          <li key={ index }> { curr.slip?.advice } </li>
+        ))}
+      </ul>
+  )
+}

src/sections/Advice/index.jsx

@@ -1,11 +1,43 @@
+import { useEffect, useState } from "react"
+import { getAdvice } from "../../api"
+import AdviceSlip from "./components/AdviceSlip"
+import FavouriteSlipsList from "./components/FavouriteSlipsList"
+
 function AdviceSection() {
+
+  const [advice, setAdvice] = useState({})
+  const [favoriteAdvice, setFavoriteAdvice] = useState([])
+
+  function newAdvice(){
+    setAdvice({})
+    getAdvice()
+    .then((data) => setAdvice(data))
+    .catch((err) => console.log(err))
+  }
+
+  function addToFavorites(){
+    setFavoriteAdvice([...favoriteAdvice, advice])
+  }
+
+  useEffect(() => {
+    newAdvice()
+    console.log(advice)
+  }, [])
+
   return (
-    <section>
-      <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
-    </section>
-  )
+    <>
+      <section>
+        <h2>Advice Section</h2>
+        <section className="adivce-slip">
+          <AdviceSlip advice={ advice } newAdvice={ newAdvice } addToFavorites={ addToFavorites } />
+        </section>
+        <section className="favourtite-slips-list">
+          <h3>Favourite Advice Slips</h3>
+          <FavouriteSlipsList favoriteAdvice={ favoriteAdvice } />
+        </section>
+      </section>
+    </>
+   )
 }
 
 export default AdviceSection

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,15 @@
+import ArtListItem from "./ArtListItem";
+
+export default function ArtList({ artList }){
+
+  return (
+
+    <ul className="art-list">
+      {artList.map((art, index) =>(
+        <ArtListItem art={ art } index={ index } />
+      ))}
+    </ul>
+
+  )
+
+}

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,24 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+export default function ArtListItem( { art, index } ){
+
+  return(
+    <>
+      <li key={ index }>
+        <div className="frame">
+          <img
+            src={ art.imageURL }
+          />
+        </div>
+        <h3>{ art.title }</h3>
+        <p>Artist: { art.artist }</p>
+        <h4>Publication History:</h4>
+        <ul>
+          { art.publicationHistory.map((pub, index) => (
+            <PublicationHistoryList pub={ pub } index={ index } />
+          ))}
+        </ul>
+      </li>
+    </>
+  )
+}

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,6 @@
+export default function PublicationHistoryList({ pub, index }){
 
+  return(
+    <li key={ index }>{ pub }</li>
+  )
+}

src/sections/Art/index.jsx

@@ -1,8 +1,28 @@
+import { useEffect, useState } from "react"
+import { getArt } from "../../api"
+import ArtList from "./components/ArtList"
+
 function ArtsSection() {
+
+  const [artList, setArtList] = useState([])
+
+  useEffect(() => {
+
+    getArt()
+    .then((data) => {
+      setArtList(data)
+    }).catch(err => console.log(err))
+    }, [])
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+
+      <ArtList artList={ artList } />
+
+
+      </div>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

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

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,16 @@
+
+export default function UsersListItem({ user, index }){
+
+  return (
+    < >
+      <li style={{background: user.favouriteColour}} key={ index }> 
+        <img
+          src={ user.profileImage }
+          alt={ user.name }
+        />
+        <h3>{ user.firstName } { user.lastName }</h3>
+        <p>{ user.email }</p>
+      </li>
+    </>
+  )
+}

src/sections/Users/index.jsx

@@ -1,8 +1,24 @@
+import { useEffect, useState } from "react"
+import { getUsers } from "../../api"
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
+  const [users, setUsers] = useState([])
+
+  useEffect(() => {
+    getUsers()
+    .then(data => setUsers(data))
+    .catch(err => console.log(err))
+  },[])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <div className="scroll-container">
+          <UsersList users={ users } />
+        </div>
+      </div>
     </section>
   )
 }