Merge pull request #32 from neuefische/23-cache-restaurant-data-and-r…

…evalidate

23 cache restaurant data and revalidate

frontend/package.json

@@ -18,7 +18,8 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.6",

frontend/src/App.tsx

@@ -1,17 +1,17 @@
-import RestaurantsPage from "./pages/RestaurantsPage/RestaurantsPage.tsx";
-import RestaurantDetailsPage from "./pages/RestaurantDetailsPage.tsx";
+import ViewRestaurantPage from "./pages/ViewRestaurantPage.tsx";
 import { Route, Routes } from "react-router-dom";
-import AddRestaurantsPage from "./pages/AddRestaurantsPage.tsx";
-import RestaurantEditPage from "./pages/RestaurantEditPage.tsx";
+import CreateRestaurantPage from "./pages/CreateRestaurantPage.tsx";
+import UpdateRestaurantPage from "./pages/UpdateRestaurantPage.tsx";
 import "./App.css";
+import RestaurantsPage from "./pages/RestaurantsPage.tsx";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<RestaurantsPage />} />
-      <Route path="/restaurants/add" element={<AddRestaurantsPage />} />
-      <Route path="/restaurants/edit/:id" element={<RestaurantEditPage />} />
-      <Route path="/restaurants/:id" element={<RestaurantDetailsPage />} />
+      <Route path="/restaurants/add" element={<CreateRestaurantPage />} />
+      <Route path="/restaurants/edit/:id" element={<UpdateRestaurantPage />} />
+      <Route path="/restaurants/:id" element={<ViewRestaurantPage />} />
     </Routes>
   );
 }

frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts → frontend/src/components/AlertBox/AlertBox.styled.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const StyledErrorParagraph = styled.p`
+export const StyledErrorContainer = styled.div`
   font-size: 0.8rem;
   color: var(--error-color);
   margin-top: 1rem;

frontend/src/components/AlertBox/AlertBox.tsx

@@ -0,0 +1,10 @@
+import { StyledErrorContainer } from "./AlertBox.styled.ts";
+import { ReactNode } from "react";
+
+type AlertBoxProps = {
+  children: ReactNode;
+};
+
+export default function AlertBox({ children }: Readonly<AlertBoxProps>) {
+  return <StyledErrorContainer>{children}</StyledErrorContainer>;
+}

frontend/src/components/Button/Button.component.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Button from "./Button.tsx";
+
+test("Button component renders a button", () => {
+  render(
+    <Button buttonType="delete" handleOnClick={() => {}}>
+      Delete
+    </Button>
+  );
+  const button = screen.getByRole("button");
+  expect(button).toBeInTheDocument();
+});
+
+test("Button component renders children as text", () => {
+  render(
+    <Button buttonType="delete" handleOnClick={() => {}}>
+      Delete
+    </Button>
+  );
+  const text = screen.getByText(/delete/i);
+  expect(text).toBeInTheDocument();
+});

frontend/src/components/Button/Button.tsx

@@ -13,7 +13,7 @@ export default function Button({
   children,
   handleOnClick,
   buttonType,
-}: ButtonProps) {
+}: Readonly<ButtonProps>) {
   return (
     <StyledButton $buttonType={buttonType} onClick={handleOnClick}>
       {children}

frontend/src/components/ButtonLink/ButtonLink.component.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ButtonLink from "./ButtonLink.tsx";
+import { MemoryRouter } from "react-router-dom";
+
+test("ButtonLink component renders a link", () => {
+  render(
+    <MemoryRouter>
+      <ButtonLink href="/my-url">Click here</ButtonLink>
+    </MemoryRouter>
+  );
+  const button = screen.getByRole("link");
+  expect(button).toBeInTheDocument();
+});
+
+test("ButtonLink component links to the correct target", () => {
+  render(
+    <MemoryRouter>
+      <ButtonLink href="/my-url">Click here</ButtonLink>
+    </MemoryRouter>
+  );
+  const button = screen.getByRole("link");
+  expect(button).toHaveAttribute("href", "/my-url");
+});
+
+test("ButtonLink component renders children as text", () => {
+  render(
+    <MemoryRouter>
+      <ButtonLink href="/my-url">Click here</ButtonLink>
+    </MemoryRouter>
+  );
+  const text = screen.getByText(/click here/i);
+  expect(text).toBeInTheDocument();
+});

frontend/src/components/ButtonLink/ButtonLink.tsx

@@ -6,6 +6,9 @@ type ButtonLinkProps = {
   href: string;
 };
 
-export default function ButtonLink({ children, href }: ButtonLinkProps) {
+export default function ButtonLink({
+  children,
+  href,
+}: Readonly<ButtonLinkProps>) {
   return <StyledLink to={href}>{children}</StyledLink>;
 }

frontend/src/components/Logo/Logo.component.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Logo from "./Logo.tsx";
+
+test("Button component renders a button", () => {
+  render(<Logo />);
+  const button = screen.getByText(/restaurantapp/i);
+  expect(button).toBeInTheDocument();
+});

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -14,7 +14,9 @@ type RestaurantCardProps = {
   restaurant: RestaurantType;
 };
 
-export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
+export default function RestaurantCard({
+  restaurant,
+}: Readonly<RestaurantCardProps>) {
   return (
     <StyledArticle>
       <StyledImageContainer>

frontend/src/components/RestaurantCardDetail/RestaurantCardDetail.tsx

@@ -9,7 +9,7 @@ type RestaurantCardDetailProps = {
 export default function RestaurantCardDetail({
   icon,
   value,
-}: RestaurantCardDetailProps) {
+}: Readonly<RestaurantCardDetailProps>) {
   return (
     <StyledDetailContainer>
       <div>{icon}</div>

frontend/src/components/RestaurantCardList/RestaurantCardList.tsx

@@ -8,7 +8,7 @@ type RestaurantCardListProps = {
 
 export default function RestaurantCardList({
   restaurants,
-}: RestaurantCardListProps) {
+}: Readonly<RestaurantCardListProps>) {
   return (
     <StyledUnorderedList>
       {restaurants.map((restaurant) => {

frontend/src/components/RestaurantForm/RestaurantForm.tsx

@@ -19,7 +19,7 @@ type RestaurantFormProps = {
 export default function RestaurantForm({
   restaurantData,
   onSubmit,
-}: RestaurantFormProps) {
+}: Readonly<RestaurantFormProps>) {
   const initialFieldValidation = {
     title: "",
     city: "",
@@ -62,6 +62,7 @@ export default function RestaurantForm({
             onChange={handleUserInput}
             value={formData.title}
             required
+            autoFocus
           />
           <StyledFieldError>{fieldValidation.title}</StyledFieldError>
         </StyledFormRow>

frontend/src/data/restaurantData.ts

@@ -0,0 +1,64 @@
+import useSWR from "swr";
+import { RestaurantType } from "../model/Restaurant.ts";
+import axios from "axios";
+import { logtail } from "../logger.ts";
+
+export function useRestaurants() {
+  const { data, error, isLoading } = useSWR<RestaurantType[]>(
+    "/api/restaurants",
+    (url: string) => {
+      logtail.info(`Trying to receive all restaurants from ${url}`);
+
+      return axios
+        .get(url)
+        .then((response) => {
+          logtail.info("Received " + response.data.length + " restaurants");
+          return response.data;
+        })
+        .catch((error) => {
+          logtail.error(error.message, {
+            error: error,
+          });
+          throw error;
+        });
+    }
+  );
+
+  return {
+    restaurants: data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export function useRestaurant(id: string) {
+  if (!id) {
+    throw new Error("Restaurant ID is required!");
+  }
+
+  const { data, error, isLoading } = useSWR<RestaurantType>(
+    `/api/restaurants/${id}`,
+    (url: string) => {
+      logtail.info(`Trying to receive restaurant from ${url}`);
+
+      return axios
+        .get(url)
+        .then((response) => {
+          logtail.info(`Received restaurant with ID ${response.data.id}`);
+          return response.data;
+        })
+        .catch((error) => {
+          logtail.error(error.message, {
+            error: error,
+          });
+          throw error;
+        });
+    }
+  );
+
+  return {
+    restaurant: data,
+    isLoading,
+    isError: error,
+  };
+}

frontend/src/pages/AddRestaurantsPage.tsx → frontend/src/pages/CreateRestaurantPage.tsx

@@ -4,8 +4,9 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import { NewRestaurantDTOType, RestaurantType } from "../model/Restaurant.ts";
 import { logtail } from "../logger.ts";
+import { mutate } from "swr";
 
-export default function AddRestaurantsPage() {
+export default function CreateRestaurantPage() {
   const navigate = useNavigate();
 
   function handleAddRestaurant(formData: NewRestaurantDTOType) {
@@ -16,6 +17,7 @@ export default function AddRestaurantsPage() {
       .then((response) => {
         const savedRestaurant: RestaurantType = response.data;
         logtail.info("Created new restaurant with ID " + savedRestaurant.id);
+        mutate("/api/restaurants");
         navigate("/restaurants/" + savedRestaurant.id);
       })
       .catch((error) => {