Bp delete card feature

src/App.js

@@ -15,8 +15,7 @@ function App() {
   });
 
   useEffect(() => {
-    axios.get(`${process.env.REACT_APP_BACKEND_URL}/boards`, {
-    }).then((response) => {
+    axios.get(`${process.env.REACT_APP_BACKEND_URL}/boards`).then((response) => {
       setBoardsData(response.data);
     })
   }, []);
@@ -43,6 +42,7 @@ function App() {
       console.log('Error:', error);
       alert('Couldn\'t create a new board.');
     })}
+
   const upvoteCard = (selectedCardId) => {
     axios
     .put(`${process.env.REACT_APP_BACKEND_URL}/cards/${selectedCardId}/upvote`)
@@ -55,6 +55,25 @@ function App() {
     })
   };
 
+
+  const deleteCard = (selectedCardId) => {
+    axios
+    .delete(`${process.env.REACT_APP_BACKEND_URL}/cards/${selectedCardId}`)
+    .then((response) => {
+      axios
+      .get(`${process.env.REACT_APP_BACKEND_URL}/boards/${selectedBoard.id}/cards`)
+      .then((response) => {
+        setCardsData(response.data)
+      })
+      .catch((error) => {
+        console.log(error.data.details)
+      })
+    })
+    .catch((error) => {
+      console.log(error.data.details)
+    })
+  };
+
   const updateCardsList = (selectedCard) => {
     const cards = cardsData.map(card => {
       if (selectedCard.id === card.id) {
@@ -64,7 +83,7 @@ function App() {
       }
     });
     setCardsData(cards)
-  }
+  };
 
   return (
     <div>
@@ -83,18 +102,20 @@ function App() {
         <h2>Choose A Board</h2> 
         < BoardList 
         boardsData= { boardsData }
-        selectedBoard={setSelectedBoard}
+        selectedBoard={ setSelectedBoard }
         />
       </section>
       <section> 
         < CardList 
         cardsData= { cardsData }
-        upvoteCard = {upvoteCard}
+        upvoteCard = { upvoteCard }
+        deleteCard = { deleteCard }
         />
       </section>
       </main>
     </div>
 
   );
-}
+};
+
 export default App;

src/components/Card.js

@@ -1,18 +1,19 @@
 import React from 'react';
 
 const Card = (props) => {
-    console.log(props)
-
 
 
     const upvoteClick = () => {
         const selectedCardId = props.id
         console.log(selectedCardId)
-    props.upvoteCard(selectedCardId);
+        props.upvoteCard(selectedCardId);
 
     };
 
-
+    const deleteCardClick = () => {
+        const selectedCardId = props.id
+        props.deleteCard(selectedCardId)
+    };
 
     return (
     <section>
@@ -21,6 +22,7 @@ const Card = (props) => {
             <li>Board ID: { props.boardId }</li>
             <li>Message: { props.message }</li>
             <button type='button' onClick={upvoteClick}> Upvote: {props.likesCount}</button>
+            <button type='button' onClick={deleteCardClick}>Delete</button>
         </ul>
     </section>
     )

src/components/CardList.js

@@ -12,7 +12,8 @@ const CardList = (props) => {
                 message={ card.message }
                 likesCount= { card.likes_count}
                 boardId= {card.board_id }
-                upvoteCard={props.upvoteCard}/>
+                upvoteCard={props.upvoteCard}
+                deleteCard={props.deleteCard}/>
             </li>
         );
     });