Marie Helene Hansen

src/App.jsx

@@ -13,4 +13,4 @@ function App() {
   )
 }
 
-export default App
+export default App;

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+
+function AdviceSlip({ onAddToFavourites }) {
+
+    const url = "https://api.adviceslip.com/advice";
+    const [data, setData] = useState([]);
+
+    // had to move it outside the useEffect to use it in button for get more advice
+    const fetchData = async () => {
+
+        const response = await fetch(url);
+        const jsonData = await response.json();
+        setData(jsonData.slip);
+    };
+
+    useEffect(() => {
+
+        fetchData();
+    }, [])
+
+    return (
+        <>
+        <div className='advice-slip'>
+            <h3>
+                Some advice!
+            </h3>
+            <p>
+                {data.advice}
+            </p>
+            <button onClick={fetchData}>
+                Get more advice
+            </button>
+            <button onClick={() => onAddToFavourites(data)}>
+                Save to favourites
+            </button>
+        </div>
+        </>
+    )
+}
+
+export default AdviceSlip;

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,12 @@
+function FavouriteSlipsList({ favourites }) {
+
+    return (
+        <ul>
+            {(favourites || []).map((slip) => (
+                <li key={slip.id}>{slip.advice}</li>
+            ))}
+        </ul>
+  );
+}
+
+export default FavouriteSlipsList;

src/sections/Advice/index.jsx

@@ -1,11 +1,27 @@
+import { useState } from 'react'
+
+import AdviceSlip from './components/AdviceSlip';
+import FavouriteSlipsList from './components/FavouriteSlipsList';
+
 function AdviceSection() {
+
+  const [favourites, setFavourites] = useState([]);
+
+  const addFavourite = (advice) => {
+    if (!favourites.some((favourites) => favourites.id === advice.id)) {
+      setFavourites((it) => [...it, advice]);
+    }
+  };
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
+      <section className="advice-slip"></section>
+      <AdviceSlip onAddToFavourites={addFavourite} />
       <section className="favourtite-slips-list"></section>
+      <FavouriteSlipsList favourites={favourites} />
     </section>
   )
 }
 
-export default AdviceSection
+export default AdviceSection;

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+import ArtListItem from "./ArtListItem";
+
+function ArtList() {
+
+    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 (
+        <div className="scroll-container">
+            <ul className="art-list">
+                {data.map((art, index) => (
+                    <ArtListItem key={index} art={art} />
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,30 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({ art }) {
+
+    const baseURL = "https://boolean-uk-api-server.fly.dev";
+
+    return (
+        <>
+        <li>
+            <div className="frame">
+                {art.imageURL ? (
+                <img
+                    src={baseURL + art.imageURL}
+                    alt={`${art.title} patch`}
+                />
+                ) : (
+                "No patch"
+                )}
+            </div> 
+            <h3>{art.title}</h3>
+            <p>{art.artist}</p>
+            <h4>{<PublicationHistoryList
+                publication={art.publicationHistory}
+            />}</h4> 
+        </li>
+        </>
+    )
+}
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,14 @@
+function PublicationHistoryList({ publication }) {
 
+    return (
+        <>
+        <ul>
+            {publication.map((description, index) => (
+                <li key={index}>{description}</li>
+            ))}
+        </ul>
+        </>
+    )
+}
+
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,10 +1,15 @@
+import ArtList from "./components/ArtList"
+
 function ArtsSection() {
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList/>
+      </div>
+
     </section>
   )
 }
 
-export default ArtsSection
+export default ArtsSection;

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+import UsersListItem from './UsersListItem';
+
+function UsersList() {
+
+    const url = "https://boolean-uk-api-server.fly.dev/mariehhansen/contact"
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+
+            const fetchData = async () => {
+
+                const response = await fetch(url);
+                const jsonData = await response.json();
+                setData(jsonData);
+            };
+
+            fetchData();
+        }, [])
+    return (
+        <div className="scroll-container">
+            <ul className="users-list">
+                {data.map((user, index) => (
+                    <UsersListItem key={index} user={user} />
+                ))}
+
+            </ul>
+        </div>
+    )
+}
+
+export default UsersList;

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,25 @@
+function UsersListItem({ user }) {
+
+    return (
+        <>
+        <li style={{background: user.favouriteColour}}>
+            <div className="frame">
+                {user.profileImage ? (
+                <img
+                    src={user.profileImage}
+                    alt={`${user.firstName} image`}
+                />
+                ) : (
+                "No profile image"
+                )}
+            </div> 
+            <h3>{(user.gender === "Male") ? (
+                "Mr. " + user.firstName + " " + user.lastName
+            ) : ("Mrs. " + user.firstName + " " + user.lastName)}</h3>
+            <p>{"Email: " + user.email}</p>
+        </li>
+        </>
+    );
+}
+
+export default UsersListItem;

src/sections/Users/index.jsx

@@ -1,10 +1,14 @@
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList />
+      </div>
     </section>
   )
 }
 
-export default UsersSection
+export default UsersSection;