Emanuels Egils Zaurins

src/App.jsx

@@ -7,7 +7,7 @@ function App() {
   return (
     <div className="main-layout">
       <ArtsSection />
-      <UsersSection />
+     <UsersSection />
       <AdviceSection />
     </div>
   )

src/sections/Advice/index.jsx

@@ -1,9 +1,84 @@
+import { useEffect, useState } from "react"
+
+
 function AdviceSection() {
+
+
+      const [data, setData] = useState({"slip": { "id": 0, "advice": "Dummy"}});
+    const [fav, setFav] = useState(["Dummy", "strings"]);
+
+
+      useEffect(() =>{
+        fetch('https://api.adviceslip.com/advice')
+        .then(response => {
+          return response.json();
+        })
+        .then (jsonData =>{
+          setData(jsonData);
+          console.log(data);
+
+
+        })
+        .catch(error => {
+          console.log("EERRORORR");
+          console.log(error);
+        })
+
+
+      }, []);
+
+  const update = () =>{
+
+    fetch('https://api.adviceslip.com/advice')
+        .then(response => {
+          return response.json();
+        })
+        .then (jsonData =>{
+          setData(jsonData);
+          console.log(data);
+
+
+        })
+        .catch(error => {
+          console.log("EERRORORR");
+          console.log(error);
+        })
+  };
+
+
+
+
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+  <section className="adivce-slip">
+    <h3>Some Advice</h3>
+
+    {<p> {(data.slip.advice) ? data.slip.advice : "loading"}</p>}
+
+    <button 
+    onClick={update}
+    >Get More Advice</button>
+        <button 
+    onClick={data.slip.advice !== null ? setFav([...fav,data.slip.advice])  : console.log("not ok")  }
+    disabled={!data.slip || !data} 
+    >Set to favorites </button>
+
+  </section>
+  <section className="favourtite-slips-list">
+    <h3>Favourite Advice Slips</h3>
+    <ul>
+      {fav.map((item, index) => (
+              <>
+              <li key={index}>{item}</li>
+              </>
+          ))}
+      <li>Measure twice, cut once.</li>
+      <li>Don&apos;t let the bastards grind you down.</li>
+      <li>Always the burrito.</li>
+    </ul>
+  </section>
     </section>
   )
 }

src/sections/Art/index.jsx

@@ -1,10 +1,103 @@
+import { useEffect, useState } from "react"
+
 function ArtsSection() {
+
+
+  const [data, setData] = useState([]);
+  const [loading,setLoading] = useState(true);
+
+  useEffect(() =>{
+    fetch('https://boolean-uk-api-server.fly.dev/art')
+    .then(response => {
+      return response.json();
+    })
+    .then (jsonData =>{
+      setData(jsonData);
+      setLoading(false);
+/*       console.log(data);
+      console.log(loading); */
+
+
+    })
+    .catch(error => {
+      console.log("EERRORORR");
+      console.log(error);
+    })
+
+/*     data.map((item, index) => ({
+    url = 'https://boolean-uk-api-server.fly.dev/art' + {item.imageURL}
+    fetch(url)
+    .then(response => {
+
+      setdata( datas => ({
+        ...datas.map(item =>
+          ...item, imageURL: 
+        ), 
+
+
+      })
+
+
+
+      })
+
+    })
+
+
+
+ */
+  }, []);
+
+
+
+
+
   return (
+    <>
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+        <div className="scroll-container">
+    <ul className="art-list">
+      <li>
+          {data.map((item) => (
+              <>
+        <div className="frame">
+          <img
+            src={"https://boolean-uk-api-server.fly.dev/" + item.imageURL}
+          />
+        </div>
+
+              <h3>{item.title}</h3>
+        <p>Artist: {item.artist}</p>
+        <h4>Publication History:</h4>
+        <ul>
+
+          {item.publicationHistory.map((pub) =>(
+            <>
+            <li>{pub}</li>
+            </>
+          ))}
+        </ul>
+              </>
+          ))}
+
+
+      </li>
+    </ul>
+    </div>
     </section>
+  </>
   )
 }
 
 export default ArtsSection
+
+
+/*               <h3>Paris Street; Rainy Day</h3>
+        <p>Artist: Gustave Caillebotte</p>
+        <h4>Publication History:</h4>
+        <ul>
+          <li>Catalogue de la 3e exposition de peinture, exh. cat. (E. Capiomont et V. Renault, 1877), p. 3, cat. 1.</li>
+          <li>Léon Mancino, “La descente de la courtille,” L’art 9 (Apr. 1877), p. 70.</li>
+          <li>Anonymous [possibly Gaston Vassy], “La journée à Paris: L’exposition des impressionnalistes,” L’événement, Apr. 6, 1877, p. 2.</li>
+        </ul> */

src/sections/Users/index.jsx

@@ -1,8 +1,55 @@
+import { useEffect, useState } from "react"
+
 function UsersSection() {
+
+
+    const [data, setData] = useState([]);
+    const [loading,setLoading] = useState(true);
+
+    useEffect(() =>{
+      fetch('https://boolean-uk-api-server.fly.dev/emazau/contact')
+      .then(response => {
+        return response.json();
+      })
+      .then (jsonData =>{
+        setData(jsonData);
+        setLoading(false);
+
+
+      })
+      .catch(error => {
+        console.log("EERRORORR");
+        console.log(error);
+      })
+
+    }, []);
+
+
+
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+        <div className="scroll-container">
+    <ul className="users-list">
+
+
+          {data.map((item) => (
+              <>
+          <li style={{background: item.favouriteColour}}>
+        <img
+          src={item.profileImage}
+          alt={item.firstName + " " + item.lastName}
+        />
+
+        <h3>{item.firstName + " " + item.lastName}</h3>
+        <p>Email: {item.email}</p>
+      </li>
+              </>
+          ))}
+
+    </ul>
+  </div>
     </section>
   )
 }