From d2aa8bbbc97775d81126678e21e389ef023baed4 Mon Sep 17 00:00:00 2001 From: Isabell Date: Mon, 1 Sep 2025 13:53:16 +0200 Subject: [PATCH 1/4] Isabell Tran --- src/App.jsx | 3 +- src/sections/Advice/components/AdviceSlip.jsx | 14 +++++ src/sections/Art/components/ArtList.jsx | 13 +++++ src/sections/Art/components/ArtListItem.jsx | 51 +++++++++++++++++++ .../Art/components/PublicationHistoryList.jsx | 14 +++++ src/sections/Art/index.jsx | 4 +- src/sections/Users/index.jsx | 32 +++++++++++- 7 files changed, 127 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 5ef8293f..874ef9ca 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,3 @@ -import AdviceSection from './sections/Advice' import ArtsSection from './sections/Art' import UsersSection from './sections/Users' import './App.css' @@ -8,7 +7,7 @@ function App() {
- + {/* */}
) } diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx index e69de29b..2821fa31 100644 --- a/src/sections/Advice/components/AdviceSlip.jsx +++ b/src/sections/Advice/components/AdviceSlip.jsx @@ -0,0 +1,14 @@ +function AdviceSlip(){ + return ( + <> +

Some Advice

+

Always the burrito.

+ + + + + ) +} + + +export default AdviceSlip; \ No newline at end of file diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx index e69de29b..1f53dfef 100644 --- a/src/sections/Art/components/ArtList.jsx +++ b/src/sections/Art/components/ArtList.jsx @@ -0,0 +1,13 @@ +import ArtListItem from "./ArtListItem" + +function ArtList() { + + return ( +
+ +
+ + ) +} + +export default ArtList; \ No newline at end of file diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx index e69de29b..2c6ac9b1 100644 --- a/src/sections/Art/components/ArtListItem.jsx +++ b/src/sections/Art/components/ArtListItem.jsx @@ -0,0 +1,51 @@ +import {useEffect, useState} from "react" + +function ArtListItem() { + + const url = "https://boolean-uk-api-server.fly.dev"; + + const [data, setData] = useState([]); + const [filteredData, setFilteredData] = useState([]); + + useEffect(() => { + const fetchData = async () => { + const reponse = await fetch(url+"/art"); + const jsonData = await reponse.json(); + setData(jsonData); + setFilteredData(jsonData); + }; + fetchData(); + }, []); + + + + return ( + <> + + + + ) +} + +export default ArtListItem; \ No newline at end of file diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx index d3f5a12f..60ff08c5 100644 --- a/src/sections/Art/components/PublicationHistoryList.jsx +++ b/src/sections/Art/components/PublicationHistoryList.jsx @@ -1 +1,15 @@ +// function PublicationHistoryList(art) { +// return ( +// <> +//

Publication History:

+// +// +// ) +// } + +// export default PublicationHistoryList; \ No newline at end of file diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx index 0c74ffc2..d6dff893 100644 --- a/src/sections/Art/index.jsx +++ b/src/sections/Art/index.jsx @@ -1,8 +1,10 @@ +import ArtList from "./components/ArtList" + function ArtsSection() { return (

Arts Section

-
+
) } diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx index 77332830..cec71561 100644 --- a/src/sections/Users/index.jsx +++ b/src/sections/Users/index.jsx @@ -1,8 +1,38 @@ +import { useEffect, useState } from 'react' + function UsersSection() { + + const url = "https://boolean-uk-api-server.fly.dev/isabelltran/contact"; + + const [data, setData] = useState([]); + const [filteredData, setFilteredData] = useState([]); + + useEffect(() => { + const fetchData = async () => { + const response = await fetch(url); + const jsonData = await response.json(); + setData(jsonData); + setFilteredData(jsonData); + }; + fetchData(); + }, []); + return (

Users Section

-
+
+
    + {filteredData.map((user, index) => ( +
  • + +

    {user.firstName} {user.lastName}

    +

    {user.email}

    +
    • + ))} +
+
) } From 56105aa945110b8ba1aa69718dae6b9d9e6b072a Mon Sep 17 00:00:00 2001 From: Isabell Date: Mon, 1 Sep 2025 14:46:54 +0200 Subject: [PATCH 2/4] Isabell Tran --- src/App.jsx | 3 +- src/sections/Art/components/ArtList.jsx | 4 +- src/sections/Art/components/ArtListItem.jsx | 47 ++++--------------- .../Art/components/PublicationHistoryList.jsx | 26 +++++----- src/sections/Art/index.jsx | 40 ++++++++++++---- src/sections/Users/components/UsersList.jsx | 13 +++++ .../Users/components/UsersListItem.jsx | 16 +++++++ src/sections/Users/index.jsx | 15 ++---- 8 files changed, 89 insertions(+), 75 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 874ef9ca..efaff843 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import ArtsSection from './sections/Art' import UsersSection from './sections/Users' +import AdviceSection from './sections/Advice' import './App.css' function App() { @@ -7,7 +8,7 @@ function App() {
- {/* */} +
) } diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx index 1f53dfef..4a01ee26 100644 --- a/src/sections/Art/components/ArtList.jsx +++ b/src/sections/Art/components/ArtList.jsx @@ -1,10 +1,10 @@ import ArtListItem from "./ArtListItem" -function ArtList() { +function ArtList({art, url}) { return (
- +
) diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx index 2c6ac9b1..c104685c 100644 --- a/src/sections/Art/components/ArtListItem.jsx +++ b/src/sections/Art/components/ArtListItem.jsx @@ -1,46 +1,19 @@ -import {useEffect, useState} from "react" - -function ArtListItem() { - - const url = "https://boolean-uk-api-server.fly.dev"; - - const [data, setData] = useState([]); - const [filteredData, setFilteredData] = useState([]); - - useEffect(() => { - const fetchData = async () => { - const reponse = await fetch(url+"/art"); - const jsonData = await reponse.json(); - setData(jsonData); - setFilteredData(jsonData); - }; - fetchData(); - }, []); - +import PublicationHistoryList from "./PublicationHistoryList"; +function ArtListItem({art, url}) { return ( <> diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx index 60ff08c5..8ea01fbf 100644 --- a/src/sections/Art/components/PublicationHistoryList.jsx +++ b/src/sections/Art/components/PublicationHistoryList.jsx @@ -1,15 +1,15 @@ -// function PublicationHistoryList(art) { -// return ( -// <> -//

Publication History:

-// -// -// ) -// } +function PublicationHistoryList({art}) { + return ( + <> +

Publication History:

+ + + ) +} -// export default PublicationHistoryList; \ No newline at end of file +export default PublicationHistoryList; \ No newline at end of file diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx index d6dff893..9a58607b 100644 --- a/src/sections/Art/index.jsx +++ b/src/sections/Art/index.jsx @@ -1,12 +1,32 @@ -import ArtList from "./components/ArtList" - -function ArtsSection() { - return ( -
-

Arts Section

- -
- ) +import {useEffect, useState} from "react" +import ArtList from "./components/ArtList"; + +function ArtListItem() { + + const url = "https://boolean-uk-api-server.fly.dev"; + + const [data, setData] = useState([]); + const [filteredData, setFilteredData] = useState([]); + + useEffect(() => { + const fetchData = async () => { + const reponse = await fetch(url+"/art"); + const jsonData = await reponse.json(); + setData(jsonData); + setFilteredData(jsonData); + }; + fetchData(); + }, []); + + return ( +
+

Arts Section

+ {filteredData.map((art, index) => ( + + ))} +
+ + ) } -export default ArtsSection +export default ArtListItem; \ No newline at end of file diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx index e69de29b..ad349493 100644 --- a/src/sections/Users/components/UsersList.jsx +++ b/src/sections/Users/components/UsersList.jsx @@ -0,0 +1,13 @@ +import UsersListItem from "./UsersListItem" + +function UsersList({props}) { + const { user } = props + return ( +
+ + +
+ ) +} + +export default UsersList \ No newline at end of file diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx index e69de29b..56aa30d5 100644 --- a/src/sections/Users/components/UsersListItem.jsx +++ b/src/sections/Users/components/UsersListItem.jsx @@ -0,0 +1,16 @@ +function UsersListItem(props) { + const { user } = props; + return ( + + ) +} + +export default UsersListItem \ No newline at end of file diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx index cec71561..22b0a7fc 100644 --- a/src/sections/Users/index.jsx +++ b/src/sections/Users/index.jsx @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react' +import UsersListItem from './components/UsersListItem'; function UsersSection() { @@ -20,19 +21,9 @@ function UsersSection() { return (

Users Section

-
-
    - {filteredData.map((user, index) => ( -
  • - -

    {user.firstName} {user.lastName}

    -

    {user.email}

    -
    • + {filteredData.map((user, index) => ( + ))} -
-
) } From 40187a66be9b12a8dcfb25702e40963522b25c2d Mon Sep 17 00:00:00 2001 From: Isabell Date: Mon, 1 Sep 2025 15:10:37 +0200 Subject: [PATCH 3/4] Isabell Tran --- src/sections/Advice/index.jsx | 39 +++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx index 0405f11f..c4298a62 100644 --- a/src/sections/Advice/index.jsx +++ b/src/sections/Advice/index.jsx @@ -1,9 +1,44 @@ +import { useEffect, useState } from "react" + function AdviceSection() { + const url = "https://api.adviceslip.com/advice"; + const [random, setRandom] = useState(""); + const [favourites, setFavourites] = useState([]); + + + const fetchData = async () => { + const reponse = await fetch(url); + const jsonData = await reponse.json(); + setRandom(jsonData); + }; + useEffect(() => { + fetchData(); + }, []); + + const handleAddFavourites = () => { + if (random && random.slip ){ + if (!favourites.some(fav => fav.id === random.slip.id)) { + setFavourites([...favourites, random.slip]); + } + } + } return (

Advice Section

-
-
+
+

Some Advice

+

{random && random.slip ? random.slip.advice : "Loading..."}

+ + +
+
+

Favourite Advice Slips

+
    + {favourites.map(slip => ( +
  • {slip.advice}
    • + ))} +
+
) } From 0b4c083044398b8f3f5c0a5122222a78ff95e55f Mon Sep 17 00:00:00 2001 From: Isabell Date: Tue, 2 Sep 2025 08:51:42 +0200 Subject: [PATCH 4/4] Extention done --- src/sections/Advice/components/AdviceSlip.jsx | 12 +++++----- .../Advice/components/FavouriteSlipsList.jsx | 15 +++++++++++++ src/sections/Advice/index.jsx | 22 +++++-------------- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx index 2821fa31..cb70f6cf 100644 --- a/src/sections/Advice/components/AdviceSlip.jsx +++ b/src/sections/Advice/components/AdviceSlip.jsx @@ -1,11 +1,11 @@ -function AdviceSlip(){ +function AdviceSlip({random, fetchData, handleAddFavourites}) { return ( - <> +

Some Advice

-

Always the burrito.

- - - +

{random && random.slip ? random.slip.advice : "Loading..."}

+ + +
) } diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx index e69de29b..638350a5 100644 --- a/src/sections/Advice/components/FavouriteSlipsList.jsx +++ b/src/sections/Advice/components/FavouriteSlipsList.jsx @@ -0,0 +1,15 @@ + +function FavouriteSlipsList({favourites}) { + return ( +
+

Favourite Advice Slips

+
    + {favourites.map(slip => ( +
  • {slip.advice}
    • + ))} +
+
+ ) +} + +export default FavouriteSlipsList \ No newline at end of file diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx index c4298a62..ac38ba8b 100644 --- a/src/sections/Advice/index.jsx +++ b/src/sections/Advice/index.jsx @@ -1,4 +1,6 @@ import { useEffect, useState } from "react" +import FavouriteSlipsList from "./components/FavouriteSlipsList"; +import AdviceSlip from "./components/AdviceSlip"; function AdviceSection() { const url = "https://api.adviceslip.com/advice"; @@ -7,8 +9,8 @@ function AdviceSection() { const fetchData = async () => { - const reponse = await fetch(url); - const jsonData = await reponse.json(); + const response = await fetch(url); + const jsonData = await response.json(); setRandom(jsonData); }; useEffect(() => { @@ -25,20 +27,8 @@ function AdviceSection() { return (

Advice Section

-
-

Some Advice

-

{random && random.slip ? random.slip.advice : "Loading..."}

- - -
-
-

Favourite Advice Slips

-
    - {favourites.map(slip => ( -
  • {slip.advice}
    • - ))} -
-
+ +
) }