Merge pull request #16 from neuefische/14-add-createdatainvitation

Add CreateDataInvitation

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>
+    )
+}