delete functionality working with db and click events

components/Product/ProductAttributes.js

@@ -1,15 +1,49 @@
-import {Fragment} from 'react';
-import {Header, Button} from 'semantic-ui-react';
+import React, {Fragment, useState} from 'react';
+import {Header, Button, Modal} from 'semantic-ui-react';
+import axios from 'axios';
+import baseUrl from '../../utils/baseUrl';
+import {useRouter} from "next/router";
+
+function ProductAttributes({description, _id}) {
+  //set modal updates states
+  const [modal, setModal] = useState(false);
+  const router = useRouter();
+  async function handleDelete() {
+    const url = `${baseUrl}/api/product`;
+    const payload = {params: {_id}};
+    await axios.delete(url, payload);
+    //redirects back to home route
+    router.push('/');
+  }
 
-function ProductAttributes({description}) {
   return (
     <Fragment>
       <Header as="h3">About this product</Header>
       <p>{description}</p>
       <Button
         icon="trash alternate outline"
         color="red"
-        content="Delete Product"/>
+        content="Delete Product"
+        onClick={() => setModal(true)}
+      />
+      <Modal open={modal} dimmer="blurring">
+        <Modal.Header>
+          Confirm Delete
+        </Modal.Header>
+        <Modal.Content>
+          <p>Are you sure you want to delete this product?</p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button content="Cancel" onClick={() => setModal(false)}/>
+          <Button
+            negative
+            icon="trash"
+            labelPosition="right"
+            content="Delete"
+            onClick={handleDelete}
+          />
+        </Modal.Actions>
+      </Modal>
     </Fragment>
   );
 }

pages/api/product.js

@@ -1,9 +1,30 @@
 import Product from '../../models/Product';
 
-
 export default async (req, res) => {
+  switch (req.method) {
+    case "GET":
+      await handleGetRequest(req, res);
+      break;
+    case "DELETE":
+      await handleDeleteRequest(req, res);
+      break;
+    default:
+      //405 no method provided
+      res.status(405).send(`Method ${req.method} not allowed`);
+      break;
+  }
+}
+
+async function handleGetRequest(req, res) {
   const {_id} = req.query;
   const product = await Product.findOne({_id});
   res.status(200).json(product);
+}
+
 
+async function handleDeleteRequest(req, res) {
+  const {_id} = req.query;
+  const product = await Product.findOneAndDelete({_id});
+  //204 no content
+  res.status(204).json({});
 }

pages/index.js

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import axios from 'axios';
 import ProductList from '../components/Index/ProductList';
-
+import baseUrl from '../utils/baseUrl';
 function Home({products}) {
   //interact with api and outside functionality
   // console.log(products);
@@ -25,7 +25,7 @@ function Home({products}) {
 Home.getInitialProps = async () => {
 //  fetch data on server
 //  return res data as an object
-  const url = 'http://localhost:3000/api/products';
+  const url = `${baseUrl}/api/products`;
   const response = await axios.get(url);
   return {products: response.data}
 //  object will merge with previous / existing props

pages/product.js

@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import ProductSummary from '../components/Product/ProductSummary';
 import ProductAttributes from '../components/Product/ProductAttributes';
 import AddProductToCart from '../components/Product/AddProductToCart';
-
+import baseUrl from "../utils/baseUrl";
 function Product({product}) {
   return (
     <Fragment>
@@ -15,7 +15,7 @@ function Product({product}) {
 
 //destructured from ctx and query to get the _id property
 Product.getInitialProps = async ({query: {_id}}) => {
-  const url =  "http://localhost:3000/api/product";
+  const url =  `${baseUrl}/api/product`;
   //payload is the same as grabbing it from the query or putting it within the url variable
   const payload = {params: {_id}};
   const response = await axios.get(url, payload);

utils/baseUrl.js

@@ -0,0 +1,5 @@
+const baseUrl =
+  process.env.NODE_ENV === 'production' ? "https://deployment-url.now.sh" : "http://localhost:3000";
+
+
+export default baseUrl;