From 0ca9a2e7c8e60c550b55b2dbc429287c3f79a4d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aljoscha=20Z=C3=B6ller?= Date: Wed, 5 Jun 2024 16:40:24 +0200 Subject: [PATCH] Refactor RestaurantsPage and add error handling The RestaurantsPage component has been restructured to improve code organization and readability. A new component, CreateDataInvitation, was added to handle the scenario where there are no restaurants available. Error handling related to fetching restaurants data from API has been improved. In the event of an error, the error message is displayed in the UI to ease debugging. An `error-color` CSS variable was added for use in error messages. --- frontend/src/App.css | 1 + frontend/src/App.tsx | 2 +- .../CreateDataInvitation.styled.ts | 5 +++ .../CreateDataInvitation.tsx | 11 +++++ frontend/src/pages/RestaurantsPage.tsx | 25 ----------- .../RestaurantsPage/RestaurantsPage.styled.ts | 7 ++++ .../pages/RestaurantsPage/RestaurantsPage.tsx | 41 +++++++++++++++++++ 7 files changed, 66 insertions(+), 26 deletions(-) create mode 100644 frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts create mode 100644 frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx delete mode 100644 frontend/src/pages/RestaurantsPage.tsx create mode 100644 frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts create mode 100644 frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css index dd9cce1..61c1448 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -5,6 +5,7 @@ --header-height: 70px; --default-color: #333333; --primary-color: #6200ea; + --error-color: red; } body { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 789e5c3..f9304b9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,4 @@ -import RestaurantsPage from "./pages/RestaurantsPage.tsx"; +import RestaurantsPage from "./pages/RestaurantsPage/RestaurantsPage.tsx"; import RestaurantDetailsPage from "./pages/RestaurantDetailsPage.tsx"; import {Route, Routes} from "react-router-dom"; import AddRestaurantsPage from "./pages/AddRestaurantsPage.tsx"; diff --git a/frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts new file mode 100644 index 0000000..188a045 --- /dev/null +++ b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +export const StyledParagraph = styled.p` + margin-bottom: 1rem; +`; \ No newline at end of file diff --git a/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx new file mode 100644 index 0000000..123f209 --- /dev/null +++ b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx @@ -0,0 +1,11 @@ +import Button from "../Button/Button.tsx"; +import {StyledParagraph} from "./CreateDataInvitation.styled.ts"; + +export default function CreateDataInvitation() { + return ( + <> + Create your first restaurant! All your restaurants will be displayed here. + + + ) +} \ No newline at end of file diff --git a/frontend/src/pages/RestaurantsPage.tsx b/frontend/src/pages/RestaurantsPage.tsx deleted file mode 100644 index e952cfd..0000000 --- a/frontend/src/pages/RestaurantsPage.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import RestaurantCardList from "../components/RestaurantCardList/RestaurantCardList.tsx"; -import DefaultPageTemplate from "./templates/DefaultPageTemplate/DefaultPageTemplate.tsx"; -import axios from "axios"; -import {useEffect, useState} from "react"; -import {RestaurantType} from "../model/Restaurant.ts"; - - -export default function RestaurantsPage() { - const [restaurants, setRestaurants] = useState([]); - - useEffect(() => { - axios.get("/api/restaurants") - .then((response) => setRestaurants(response.data)) - .catch((error => { - console.error(error.message); - })) - - }, []); - - return ( - - - - ) -} \ No newline at end of file diff --git a/frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts b/frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts new file mode 100644 index 0000000..c46fe73 --- /dev/null +++ b/frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts @@ -0,0 +1,7 @@ +import styled from "styled-components"; + +export const StyledErrorParagraph = styled.p` + font-size: .8rem; + color: var(--error-color); + margin-top: 1rem; +`; \ No newline at end of file diff --git a/frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx b/frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx new file mode 100644 index 0000000..ec73c8c --- /dev/null +++ b/frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx @@ -0,0 +1,41 @@ +import RestaurantCardList from "../../components/RestaurantCardList/RestaurantCardList.tsx"; +import DefaultPageTemplate from "../templates/DefaultPageTemplate/DefaultPageTemplate.tsx"; +import axios, {AxiosError} from "axios"; +import {useEffect, useState} from "react"; +import {RestaurantType} from "../../model/Restaurant.ts"; +import CreateDataInvitation from "../../components/CreateDataInvitation/CreateDataInvitation.tsx"; +import {StyledErrorParagraph} from "./RestaurantsPage.styled.ts"; + + +export default function RestaurantsPage() { + const [restaurants, setRestaurants] = useState([]); + const [error, setError] = useState(); + + useEffect(() => { + axios.get("/api/restaurants") + .then((response) => setRestaurants(response.data)) + .catch((error => { + setError(error) + console.error(error.message); + })) + + }, []); + + if (error) { + return ( + +

Sorry, we encountered an error loading the restaurants. Please try again later.

+ {error.message} + + ) + } + + return ( + + {restaurants.length === 0 ? + : + + } + + ) +} \ No newline at end of file