Delete an item

grocery-list-api/api/controllers/lists.js

@@ -23,7 +23,28 @@ const retrieveList = (req, res) => {
 const addItemToList = (req, res) => {
   req.groceryLists.findAndUpdate(
     { id: req.swagger.params.id.value },
-    ({ id, items }) => ({ id, items: items.push(req.body) })
+    ({ id, items }) => ({
+      id,
+      items: items.push(Object.assign({ id: items.length + 1 }, req.body))
+    })
+  );
+  res.status(204);
+  res.end();
+};
+
+const deleteItemFromList = (req, res) => {
+  req.groceryLists.findAndUpdate(
+    { id: req.swagger.params.listId.value },
+    ({ id, items }) => {
+      const index = items.findIndex(
+        item => item.id !== req.swagger.params.itemId.value
+      );
+      items.splice(index, 1);
+      return {
+        id,
+        items
+      };
+    }
   );
   res.status(204);
   res.end();
@@ -35,5 +56,6 @@ module.exports = {
   retrieveLists,
   createList,
   retrieveList,
-  addItemToList
+  addItemToList,
+  deleteItemFromList
 };

grocery-list-api/api/swagger/swagger.yaml

@@ -83,6 +83,33 @@ paths:
           description: Error
           schema:
             $ref: '#/definitions/ErrorResponse'
+  /lists/{listId}/{itemId}:
+    x-swagger-router-controller: lists
+    delete:
+      description: Deletes an item from a grocery list
+      operationId: deleteItemFromList
+      produces:
+        - text/plain; charset=utf-8
+      consumes:
+        - application/json
+      parameters:
+        - name: listId
+          in: path
+          description: The Id of the grocery list to delete from
+          required: true
+          type: integer
+        - name: itemId
+          in: path
+          description: The Id of the grocery item to delete
+          required: true
+          type: integer
+      responses:
+        '204':
+          description: Success
+        default:
+          description: Error
+          schema:
+            $ref: '#/definitions/ErrorResponse'
   /swagger:
     x-swagger-pipe: swagger_raw
 definitions:

grocery-list-fe/src/App.js

@@ -6,7 +6,8 @@ import {
   getGroceryLists,
   getGroceryList,
   addGroceryList,
-  addItem
+  addItem,
+  deleteItem
 } from './apiCalls';
 import './App.css';
 
@@ -23,6 +24,7 @@ class App extends Component {
     this.updateGroceryLists = this.updateGroceryLists.bind(this);
     this.addGroceryListHandler = this.addGroceryListHandler.bind(this);
     this.addItemHandler = this.addItemHandler.bind(this);
+    this.deleteItemHandler = this.deleteItemHandler.bind(this);
   }
   async componentDidMount() {
     await this.updateGroceryLists();
@@ -42,6 +44,10 @@ class App extends Component {
     await this.updateGroceryList(listId);
   }
 
+  async deleteItemHandler(listId, itemId) {
+    await deleteItem(listId, itemId);
+  }
+
   async updateGroceryLists() {
     const groceryLists = await getGroceryLists();
     this.setState({ groceryLists });
@@ -70,6 +76,7 @@ class App extends Component {
             <GroceryList
               list={this.state.currentGroceryList}
               addItemHandler={this.addItemHandler}
+              deleteItemHandler={this.deleteItemHandler}
             />
           </div>
         </div>

grocery-list-fe/src/apiCalls.js

@@ -1,4 +1,4 @@
-import { get, post, put } from 'axios';
+import { get, post, put, delete as deleteMethod } from 'axios';
 
 const apiVersion = 'v1';
 const baseUrl = `http://localhost:10010/${apiVersion}`;
@@ -21,4 +21,8 @@ const getGroceryList = async id => {
   return response.data || [];
 };
 
-export { addGroceryList, addItem, getGroceryLists, getGroceryList };
+const deleteItem = async (listId, itemId) => {
+  await deleteMethod(`${baseUrl}/lists/${listId}/${itemId}`);
+};
+
+export { addGroceryList, addItem, getGroceryLists, getGroceryList, deleteItem };

grocery-list-fe/src/components/GroceryList/GroceryList.js

@@ -5,14 +5,21 @@ import AddItem from '../AddItem/AddItem';
 import './GroceryList.css';
 
 function GroceryList(props) {
-  const { list, addItemHandler } = props;
+  const { list, addItemHandler, deleteItemHandler } = props;
   return list && list.id ? (
     <div className="col">
       <div className="groceryList">
         <ul className="noPadding">
           {list.items &&
-            list.items.map(({ name, quantity }) => (
-              <Item key={name} name={name} quantity={quantity} />
+            list.items.map(({ id, name, quantity }) => (
+              <Item
+                key={id}
+                listId={list.id}
+                itemId={id}
+                name={name}
+                quantity={quantity}
+                deleteItemHandler={deleteItemHandler}
+              />
             ))}
         </ul>
       </div>
@@ -35,11 +42,13 @@ GroceryList.propTypes = {
       })
     )
   }),
-  addItemHandler: PropTypes.func
+  addItemHandler: PropTypes.func,
+  deleteItemHandler: PropTypes.func
 };
 
 GroceryList.defaultProps = {
-  addItemHandler: () => null
+  addItemHandler: () => null,
+  deleteItemHandler: () => null
 };
 
 export default GroceryList;

grocery-list-fe/src/components/Item/Item.css

@@ -9,3 +9,18 @@ li {
 .quantity {
   width: auto;
 }
+
+.deleteButton {
+  background: transparent;
+  border: 1px solid black;
+  border-radius: 2em;
+  color: black;
+  display: inline-block;
+  font-size: 12px;
+  height: 3em;
+  line-height: 1.5em;
+  margin: 0 0 8px;
+  padding: 0;
+  text-align: center;
+  width: 3em;
+}

grocery-list-fe/src/components/Item/Item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './Item.css';
 
 function Item(props) {
-  const { name, quantity } = props;
+  const { listId, itemId, name, quantity, deleteItemHandler } = props;
   return (
     <div className="container">
       <li className="row justify-content-between">
@@ -13,19 +13,29 @@ function Item(props) {
         <div className="quantity col-lg-2">
           <h2>{quantity}</h2>
         </div>
+        <button
+          className="deleteButton"
+          onClick={() => deleteItemHandler(listId, itemId)}
+        >
+          <h2>x</h2>
+        </button>
       </li>
     </div>
   );
 }
 
 Item.propTypes = {
+  listId: PropTypes.number.isRequired,
+  itemId: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
-  quantity: PropTypes.number.isRequired
+  quantity: PropTypes.number.isRequired,
+  deleteItemHandler: PropTypes.func
 };
 
 Item.defaultProps = {
   name: '',
-  quantity: ''
+  quantity: '',
+  deleteItemHandler: () => null
 };
 
 export default Item;

grocery-list-fe/src/components/Item/Item.test.js

@@ -8,4 +8,18 @@ describe('Item', () => {
     expect(wrapper.find('.name').text()).toEqual('Milk');
     expect(wrapper.find('.quantity').text()).toEqual('1');
   });
+
+  it('renders a delete button', () => {
+    const wrapper = shallow(<Item name={'Milk'} quantity={1} />);
+    expect(wrapper.find('.deleteButton').length).toEqual(1);
+  });
+
+  it('calls the handler function when the `delete` button is pressed', () => {
+    const deleteHandlerSpy = jest.fn();
+    const wrapper = shallow(
+      <Item name={'Milk'} quantity={1} onDeleteHandler={deleteHandlerSpy} />
+    );
+    wrapper.find('.deleteButton').simulate('click');
+    expect(deleteHandlerSpy).toHaveBeenCalledTimes(1);
+  });
 });