Add Frontend for delete endpoint

Split "Button and Link" component into separate Button and ButtonLink component Made button configurable with a new buttonType property
neuefische · Jun 6, 2024 · 02947d9 · 02947d9
1 parent a87b2a3
commit 02947d9
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,12 +1,14 @@
 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";
 
 export default function RestaurantDetailsPage() {
+  const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
   const [restaurant, setRestaurant] = useState<RestaurantType>();
   const [error, setError] = useState<string | null>(null);
@@ -31,11 +33,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>
   );
 }