Magnus Hissingby

src/App.css

@@ -2,15 +2,12 @@ body {
   margin: 0;
 }
 
-* {
-  box-sizing: border-box;
+h2 {
+  text-align:center;
 }
 
-ul[class] {
-  list-style: none;
-
-  margin: 0;
-  padding: 0;
+* {
+  box-sizing: border-box;
 }
 
 .main-layout {

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,15 @@
+
+
+function AdviceSlip({ advice, onClick, onFavourite }) {
+
+    return (
+        <>
+        <h3>Some advice</h3>
+        <p>{advice}</p>
+        <button onClick={onClick}>Get more advice</button>
+        <button value={advice} onClick={onFavourite}>Add to favourites</button>
+        </>
+    )
+}
+
+export default AdviceSlip

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,18 @@
+
+function FavouriteSlipsList({ favourites }) {
+
+    return (
+        <>
+        <h3>Favourite advice slips</h3>
+        <ul className="favourites">
+            {favourites.map((fav, index) => (
+                <li key={index}>
+                    {fav}
+                </li>
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default FavouriteSlipsList

src/sections/Advice/index.jsx

@@ -1,9 +1,44 @@
+
+import { useState, useEffect } from 'react'
+import FavouriteSlipsList from './components/FavouriteSlipsList'
+import AdviceSlip from './components/AdviceSlip'
+
 function AdviceSection() {
+
+  const url = "https://api.adviceslip.com/advice"
+
+  const [data, setData] = useState([])
+  const [isClicked, setIsClicked] = useState(false)
+  const [favourites, setFavourites] = useState([])
+
+  const onClick = () => {
+    setIsClicked(!isClicked)
+  }
+
+  const onFavourite = (e) => {
+    if (!(favourites.includes(e.target.value))){
+    setFavourites([...favourites, e.target.value])
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url)
+      const jsonData = await response.json()
+      setData(jsonData)
+    }
+    fetchData()
+  }, [isClicked])
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="adivce-slip">
+        <AdviceSlip advice={data.slip?.advice} onClick={onClick} onFavourite={onFavourite} />
+      </section>
+      <section className="favourtite-slips-list">
+        <FavouriteSlipsList favourites={favourites} />
+      </section>
     </section>
   )
 }

src/sections/Art/components/Art.css

@@ -0,0 +1,16 @@
+
+ul {
+    padding:5px;
+}
+
+.art_item {
+    padding-bottom:30px;
+}
+
+.history_list_item {
+    padding-bottom:8px;
+    padding-left:10px;
+}
+
+
+

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,20 @@
+
+/* eslint-disable react/prop-types */
+import './Art.css'
+
+import ArtListItem from "./ArtListItem";
+
+function ArtList({ data, imageURLBase }) { 
+
+    return (
+        <>
+        <ul className="list_of_arts">
+            {data.map((art, index) => (
+                <ArtListItem image={imageURLBase + art.imageURL} title={art.title} name={art.artist} publications={art.publicationHistory} key={index}/>
+            ))}
+        </ul>
+        </>
+    );
+}
+
+export default ArtList

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,22 @@
+import PublicationHistoryList from "./PublicationHistoryList"
+import './Art.css'
+
+function ArtListItem({ image, title, name, publications }) {
+
+    return (
+        <>
+        <li className="art_item">
+            <img 
+                src={image}
+                alt="Could not render image"
+                className="art_image"
+            />
+            <h2 className="title">{title}</h2>
+            <h4 className="artist">Artist: {name}</h4>
+            <PublicationHistoryList history={publications}/>
+        </li>
+        </>
+    )
+}
+
+export default ArtListItem

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,18 @@
 
+import './Art.css'
+
+function PublicationHistoryList({ history }) {
+
+    return (
+        <>
+        <h3>Publication History</h3>
+        <ul className="history_list">
+            {history.map((it, index) => (
+                <li className="history_list_item" key={index}>♦ {it}</li>
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default PublicationHistoryList

src/sections/Art/index.jsx

@@ -1,8 +1,29 @@
+
+import { useState, useEffect } from 'react'
+import ArtList from './components/ArtList';
+
 function ArtsSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/art"
+  const imageURLBase = "https://boolean-uk-api-server.fly.dev"
+
+  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} imageURLBase={imageURLBase} />
+      </div>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,22 @@
+import UsersListItem from "./UsersListItem"
+
+function UsersList({ data }) {
+
+    return (
+        <>
+        <ul className="users_list">
+            {data.map((user, index) => (
+                <UsersListItem 
+                    img={user.profileImage}
+                    name={user.firstName+ " " + user.lastName}
+                    email={user.email}
+                    color={user.favouriteColour} 
+                    key={index}
+                />
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default UsersList

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,18 @@
+
+function UsersListItem({ img, name, email, color }) {
+
+    return (
+        <>
+        <li style={{background:`${color}`}}>
+            <img 
+                src={img}
+                alt={name}
+            />
+            <h3>{name}</h3>
+            <p>Email: {email}</p>
+        </li>
+        </>
+    )
+}
+
+export default UsersListItem

src/sections/Users/index.jsx

@@ -1,8 +1,28 @@
+
+import { useState, useEffect } from 'react'
+import UsersList from './components/UsersList'
+
 function UsersSection() {
+
+  const url = "https://boolean-uk-api-server.fly.dev/magnusgit1/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>
   )
 }