From 64c4d24ddb8337370dc73d6641da6652115fd280 Mon Sep 17 00:00:00 2001
From: Jonas Honecker <honeckerjonas@gmail.com>
Date: Thu, 6 Jun 2024 11:52:18 +0200
Subject: [PATCH] Add Frontend for delete endpoint

Split "Button and Link" component into separate Button and ButtonLink
component

Made button configurable with a new buttonType property
---
 frontend/src/App.css                          |  1 +
 .../src/components/Button/Button.styled.ts    | 28 +++++++++++++++----
 frontend/src/components/Button/Button.tsx     | 24 +++++++++++++---
 .../src/components/ButtonLink/ButtonLink.tsx  | 11 ++++++++
 .../src/components/ButtonLink/Link.styled.ts  | 21 ++++++++++++++
 .../CreateDataInvitation.tsx                  |  4 +--
 .../RestaurantCard/RestaurantCard.tsx         |  4 +--
 frontend/src/pages/RestaurantDetailsPage.tsx  | 15 ++++++++--
 8 files changed, 92 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/ButtonLink/ButtonLink.tsx
 create mode 100644 frontend/src/components/ButtonLink/Link.styled.ts

diff --git a/frontend/src/App.css b/frontend/src/App.css
index e755dbc..c32738d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -5,6 +5,7 @@
   --header-height: 70px;
   --default-color: #333333;
   --primary-color: #6200ea;
+  --delete-color: #CD5D67;
   --error-color: red;
 }
 
diff --git a/frontend/src/components/Button/Button.styled.ts b/frontend/src/components/Button/Button.styled.ts
index 0908858..8ff9d8c 100644
--- a/frontend/src/components/Button/Button.styled.ts
+++ b/frontend/src/components/Button/Button.styled.ts
@@ -1,21 +1,39 @@
 import styled from "styled-components";
-import { Link } from "react-router-dom";
 
-export const StyledLink = styled(Link)`
+export const StyledButton = styled.button`
   display: inline-block;
   padding: 10px 20px;
   color: white;
-  background-color: var(--primary-color);
+  background-color: var(--default-color);
   text-decoration: none;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 
   &:hover {
-    background-color: color-mix(in srgb, var(--primary-color) 80%, white);
+    background-color: color-mix(in srgb, var(--default-color) 80%, white);
   }
 
   &:active {
-    background-color: color-mix(in srgb, var(--primary-color) 70%, black);
+    background-color: color-mix(in srgb, var(--default-color) 70%, black);
+  }
+`;
+
+export const StyledDeleteButton = styled.button`
+  display: inline-block;
+  padding: 10px 20px;
+  color: white;
+  background-color: var(--delete-color);
+  text-decoration: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--delete-color) 80%, white);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, var(--delete-color) 70%, black);
   }
 `;
diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx
index ae0c227..47e0c76 100644
--- a/frontend/src/components/Button/Button.tsx
+++ b/frontend/src/components/Button/Button.tsx
@@ -1,11 +1,27 @@
 import { ReactNode } from "react";
-import { StyledLink } from "./Button.styled.ts";
+import { StyledButton, StyledDeleteButton } from "./Button.styled.ts";
 
 type ButtonProps = {
   children: ReactNode;
-  href: string;
+  handleOnClick: () => void;
+  buttonType: "default" | "delete";
 };
 
-export default function Button({ children, href }: ButtonProps) {
-  return <StyledLink to={href}>{children}</StyledLink>;
+export default function Button({
+  children,
+  handleOnClick,
+  buttonType,
+}: ButtonProps) {
+  return (
+    <>
+      {buttonType === "default" && (
+        <StyledButton onClick={handleOnClick}>{children}</StyledButton>
+      )}
+      {buttonType === "delete" && (
+        <StyledDeleteButton onClick={handleOnClick}>
+          {children}
+        </StyledDeleteButton>
+      )}
+    </>
+  );
 }
diff --git a/frontend/src/components/ButtonLink/ButtonLink.tsx b/frontend/src/components/ButtonLink/ButtonLink.tsx
new file mode 100644
index 0000000..e485418
--- /dev/null
+++ b/frontend/src/components/ButtonLink/ButtonLink.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { StyledLink } from "./Link.styled.ts";
+
+type ButtonLinkProps = {
+  children: ReactNode;
+  href: string;
+};
+
+export default function ButtonLink({ children, href }: ButtonLinkProps) {
+  return <StyledLink to={href}>{children}</StyledLink>;
+}
diff --git a/frontend/src/components/ButtonLink/Link.styled.ts b/frontend/src/components/ButtonLink/Link.styled.ts
new file mode 100644
index 0000000..0908858
--- /dev/null
+++ b/frontend/src/components/ButtonLink/Link.styled.ts
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+export const StyledLink = styled(Link)`
+  display: inline-block;
+  padding: 10px 20px;
+  color: white;
+  background-color: var(--primary-color);
+  text-decoration: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 80%, white);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, var(--primary-color) 70%, black);
+  }
+`;
diff --git a/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx
index ad57308..0c4cf5c 100644
--- a/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx
+++ b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx
@@ -1,5 +1,5 @@
-import Button from "../Button/Button.tsx";
 import { StyledParagraph } from "./CreateDataInvitation.styled.ts";
+import ButtonLink from "../ButtonLink/ButtonLink.tsx";
 
 export default function CreateDataInvitation() {
   return (
@@ -8,7 +8,7 @@ export default function CreateDataInvitation() {
         Create your first restaurant! All your restaurants will be displayed
         here.
       </StyledParagraph>
-      <Button href="/restaurants/add">Add restaurant</Button>
+      <ButtonLink href="/restaurants/add">Add restaurant</ButtonLink>
     </>
   );
 }
diff --git a/frontend/src/components/RestaurantCard/RestaurantCard.tsx b/frontend/src/components/RestaurantCard/RestaurantCard.tsx
index d249b7b..2ccbbdf 100644
--- a/frontend/src/components/RestaurantCard/RestaurantCard.tsx
+++ b/frontend/src/components/RestaurantCard/RestaurantCard.tsx
@@ -8,7 +8,7 @@ import {
   StyledFallbackImage,
   StyledImageContainer,
 } from "./RestaurantCard.styled.ts";
-import Button from "../Button/Button.tsx";
+import ButtonLink from "../ButtonLink/ButtonLink.tsx";
 
 type RestaurantCardProps = {
   restaurant: RestaurantType;
@@ -29,7 +29,7 @@ export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
           icon={<FaLocationDot />}
           value={restaurant.city}
         />
-        <Button href={`/restaurants/${restaurant.id}`}>Details</Button>
+        <ButtonLink href={`/restaurants/${restaurant.id}`}>Details</ButtonLink>
       </StyledDetailsContainer>
     </StyledArticle>
   );
diff --git a/frontend/src/pages/RestaurantDetailsPage.tsx b/frontend/src/pages/RestaurantDetailsPage.tsx
index 37ed2cc..98c581f 100644
--- a/frontend/src/pages/RestaurantDetailsPage.tsx
+++ b/frontend/src/pages/RestaurantDetailsPage.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import DefaultPageTemplate from "./templates/DefaultPageTemplate/DefaultPageTemplate.tsx";
 import axios from "axios";
 import { RestaurantType } from "../model/Restaurant.ts";
 
 import Button from "../components/Button/Button.tsx";
+import ButtonLink from "../components/ButtonLink/ButtonLink.tsx";
 import { logtail } from "../logger.ts";
 
 export default function RestaurantDetailsPage() {
+  const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
   const [restaurant, setRestaurant] = useState<RestaurantType>();
   const [error, setError] = useState<string | null>(null);
@@ -38,11 +40,18 @@ export default function RestaurantDetailsPage() {
     return <DefaultPageTemplate>Loading...</DefaultPageTemplate>;
   }
 
+  function deleteRestaurantById() {
+    axios.delete(`/api/restaurants/${id}`).then(() => navigate("/"));
+  }
+
   return (
     <DefaultPageTemplate pageTitle={restaurant.title}>
       <p>{restaurant.city}</p>
-      <Button href={`/restaurants/edit/${id}`}>Edit</Button>
-      <Button href="/">Back</Button>
+      <ButtonLink href={`/restaurants/edit/${id}`}>Edit</ButtonLink>
+      <ButtonLink href="/">Back</ButtonLink>
+      <Button buttonType={"delete"} handleOnClick={deleteRestaurantById}>
+        Delete
+      </Button>
     </DefaultPageTemplate>
   );
 }