Moueed Ali

src/sections/Advice/index.jsx

@@ -1,11 +1,10 @@
 function AdviceSection() {
   return (
-    <section>
-      <h2>Advice Section</h2>
+    <>
       <section className="adivce-slip"></section>
       <section className="favourtite-slips-list"></section>
-    </section>
+    </>
   )
 }
 
-export default AdviceSection
+export default AdviceSection;

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,15 @@
+import ArtListItem from "./ArtListItem"
+
+function ArtList({artList}){
+
+    return <>
+    <ul>
+    {artList?.map((artListItem, i) => (
+        <ArtListItem artListItem={artListItem} key={i} />
+      ))}
+    </ul>
+ </>   
+
+}
+
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,24 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({artListItem : {imageURL, title, artist, publicationHistory}}){
+
+  const actualImage = "https://boolean-uk-api-server.fly.dev"
+    return (<>
+    <li>
+        <div className="frame">
+          <img src={actualImage.concat(imageURL)}
+          />
+        </div>
+        <h3>{title}</h3>
+        <p>{artist}</p>
+        <h4>Publication History</h4>
+        <ul>
+        <PublicationHistoryList publicationHistory={publicationHistory}/>
+
+        </ul>
+    </li>
+ </> ) 
+}
+
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,10 @@
+function PublicationHistoryList({publicationHistory}){
+    return(
+        <>
+        {publicationHistory.map((publication, i) => 
+        (<li key={i}> {publication}</li>))}
+        </>
+    )
+}
 
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,10 +1,31 @@
+import { useEffect, useState } from "react"
+import ArtList from "./components/ArtList"
+
 function ArtsSection() {
+  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();
+  },[])
+
+  console.log(data)
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList artList={data}/>
+      </div>
     </section>
   )
 }
 
-export default ArtsSection
+export default ArtsSection;

src/sections/Users/components/UsersList.jsx

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

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,17 @@
+function UsersListItem({user : {favouriteColour, profileImage, firstName, lastName, email}}){
+
+    return (
+    <>
+      <li style={{background: favouriteColour }}>
+        <img
+            src={profileImage}
+            alt={firstName}
+        />
+        <h3>{`"${firstName} ${lastName}"`}</h3>
+        <p>{` ${email}"`}</p>
+      </li>
+    </> 
+    ) 
+}
+
+export default UsersListItem;

src/sections/Users/index.jsx

@@ -1,10 +1,27 @@
+import { useEffect, useState } from "react"
+import UsersList from "./components/UsersList"
+
 function UsersSection() {
+  const url = "https://boolean-uk-api-server.fly.dev/richard-persson/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>
   )
 }
 
-export default UsersSection
+export default UsersSection;