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

@@ -5,6 +5,7 @@
     --header-height: 70px;
     --default-color: #333333;
     --primary-color: #6200ea;
+    --error-color: red;
 }
 
 body {

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";

frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const StyledParagraph = styled.p`
+    margin-bottom: 1rem;
+`;

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 (
+        <>
+            <StyledParagraph>Create your first restaurant! All your restaurants will be displayed here.</StyledParagraph>
+            <Button href="/restaurants/add">Add restaurant</Button>
+        </>
+    )
+}

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;
+`;

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<RestaurantType[]>([]);
+    const [error, setError] = useState<AxiosError>();
+
+    useEffect(() => {
+        axios.get("/api/restaurants")
+            .then((response) => setRestaurants(response.data))
+            .catch((error => {
+                setError(error)
+                console.error(error.message);
+            }))
+
+    }, []);
+
+    if (error) {
+        return (
+            <DefaultPageTemplate pageTitle="Restaurants">
+                <p>Sorry, we encountered an error loading the restaurants. Please try again later.</p>
+                <StyledErrorParagraph>{error.message}</StyledErrorParagraph>
+            </DefaultPageTemplate>
+        )
+    }
+
+    return (
+        <DefaultPageTemplate pageTitle="Restaurants">
+            {restaurants.length === 0 ?
+                <CreateDataInvitation/> :
+                <RestaurantCardList restaurants={restaurants}/>
+            }
+        </DefaultPageTemplate>
+    )
+}