Jakub Mroz

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { useState, useEffect } from "react";
+
+function AdviceSlip({ url, setFavourite, favourites }) {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    handleFetch();
+  }, []);
+
+  const handleFetch = () => {
+    setLoading(true);
+    fetch(url)
+      .then((res) => res.json())
+      .then((result) => {
+        setData(result);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fetch error:", error);
+        setLoading(false);
+      });
+  };
+
+  const AddFavourite = (favId) => {
+    if (favourites.includes(favId)) {
+      return;
+    }
+    setFavourite((prevIds) => [...prevIds, favId]);
+  };
+
+  if (loading) {
+    return <section className="adivce-slip"></section>;
+  }
+
+  return (
+    <section className="adivce-slip">
+      <h3>Some Advice</h3>
+      <p>{data.slip.advice}</p>
+      <button onClick={handleFetch}>Get More Advice</button>
+      <button onClick={() => AddFavourite(data.slip.id)}>
+        Save to Favourties
+      </button>
+    </section>
+  );
+}
+
+export default AdviceSlip;

src/sections/Advice/components/FavouriteSlipItem.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useState, useEffect } from "react";
+
+function FavouriteSlipItem({ url, id }) {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(url + "/" + id)
+      .then((res) => res.json())
+      .then((result) => {
+        setData(result);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fetch error:", error);
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
+
+  if (loading) {
+    return <section className="adivce-slip"></section>;
+  }
+
+  return <li>{data.slip.advice}</li>;
+}
+
+export default FavouriteSlipItem;

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useEffect } from "react";
+import FavouriteSlipItem from "./FavouriteSlipItem";
+
+function FavouriteSlipsList({ url, favourites }) {
+  useEffect(() => {
+    console.log(favourites);
+  }, [favourites]);
+
+  return (
+    <section className="favourtite-slips-list">
+      <h3>Favourite Advice Slips</h3>
+      <ul>
+        {favourites.map((item, index) => (
+          <FavouriteSlipItem key={index} url={url} id={item} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default FavouriteSlipsList;

src/sections/Advice/index.jsx

@@ -1,11 +1,23 @@
+import { useState } from "react";
+import AdviceSlip from "./components/AdviceSlip";
+import FavouriteSlipsList from "./components/FavouriteSlipsList";
+
 function AdviceSection() {
+  const apiUrl = "https://api.adviceslip.com/advice";
+
+  const [favourites, setFavourites] = useState([]);
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <AdviceSlip
+        url={apiUrl}
+        setFavourite={setFavourites}
+        favourites={favourites}
+      />
+      <FavouriteSlipsList favourites={favourites} url={apiUrl} />
     </section>
-  )
+  );
 }
 
-export default AdviceSection
+export default AdviceSection;

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ArtListItem from "./ArtListItem";
+
+function ArtList({ data, url }) {
+  return (
+    <ul className="art-list">
+      {data.map((item, index) => (
+        <ArtListItem key={index} entity={item} url={url} />
+      ))}
+    </ul>
+  );
+}
+
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,18 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({ entity, url }) {
+  return (
+    <li>
+      ArtListItem
+      <div className="frame">
+        <img src={url + entity.imageURL} />
+      </div>
+      <h3>{entity.title}</h3>
+      <p>Artist: {entity.artist}</p>
+      <h4>Publication History:</h4>
+      <PublicationHistoryList publications={entity.publicationHistory} />
+    </li>
+  );
+}
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,13 @@
+import React from "react";
 
+function PublicationHistoryList({ publications }) {
+  return (
+    <ul>
+      {publications.map((item, index) => (
+        <li key={index}>{item}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,10 +1,48 @@
+import { useState, useEffect } from "react";
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+  const apiUrl = "https://boolean-uk-api-server.fly.dev/art";
+  const imgUrl = "https://boolean-uk-api-server.fly.dev";
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(apiUrl)
+      .then((res) => res.json())
+      .then((result) => {
+        setData(result);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fetch error:", error);
+        setLoading(false);
+      });
+  }, []);
+
+  /*
+  useEffect(() => {
+    console.log(data);
+  }, [data])
+  */
+
+  if (loading) {
+    return (
+      <section>
+        <h2>Arts Section</h2>
+        <div className="scroll-container"></div>
+      </section>
+    );
+  }
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList data={data} url={imgUrl} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default ArtsSection
+export default ArtsSection;

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import UsersListItem from "./UsersListItem";
+
+function UsersList({ data }) {
+  return (
+    <div>
+      <ul className="users-list">
+        {data.map((item, index) => (
+          <UsersListItem key={index} entity={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default UsersList;

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+function UsersListItem({ entity }) {
+  const style = {
+    background: entity.favouriteColour,
+  };
+
+  return (
+    <li style={style}>
+      <img
+        src={entity.profileImage}
+        alt={entity.firstName + " " + entity.lastName}
+      />
+      <h3>
+        {entity.firstName} {entity.lastName}
+      </h3>
+      <p>Email: {entity.email}</p>
+    </li>
+  );
+}
+
+export default UsersListItem;

src/sections/Users/index.jsx

@@ -1,10 +1,47 @@
+import { useState, useEffect } from "react";
+import UsersList from "./components/UsersList";
+
 function UsersSection() {
+  const apiUrl = "https://boolean-uk-api-server.fly.dev/JakubMroz4/contact";
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(apiUrl)
+      .then((res) => res.json())
+      .then((result) => {
+        setData(result);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fetch error:", error);
+        setLoading(false);
+      });
+  }, []);
+
+  /*
+  useEffect(() => {
+    console.log(data);
+  }, [data])
+  */
+
+  if (loading) {
+    return (
+      <section>
+        <h2>Users Section</h2>
+        <div className="scroll-container"></div>
+      </section>
+    );
+  }
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList data={data} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default UsersSection
+export default UsersSection;