feat(delete): delete bottles from the list

Paker30 · May 14, 2020 · 25c8974 · 25c8974
1 parent d5f1ed5
commit 25c8974
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
+    "@ant-design/icons": "^4.1.0",
     "antd": "^4.2.0",
     "aphrodite": "^2.4.0",
     "pouchdb-browser": "^7.2.1",

diff --git a/src/App.js b/src/App.js
@@ -80,6 +80,7 @@ export default class App extends Component {
         };
         this.addBottle = this.addBottle.bind(this);
         this.adjustMainAreaWide = this.adjustMainAreaWide.bind(this);
+        this.deleteBootle = this.deleteBootle.bind(this);
     }
 
     componentDidMount() {
@@ -99,10 +100,20 @@ export default class App extends Component {
         const bottleId = Uniqid('bottle-');
         const id = Uniqid();
         db.put({ _id: id, id: bottleId, ...bottle })
-            .then(() => this.setState({ bottles: [...bottles, { id: bottleId, _id: id, ...bottle }] }))
+            .then(({ rev }) => {
+                this.setState({ bottles: [...bottles, { id: bottleId, _id: id, ...bottle, _rev: rev }] });
+            })
             .catch((error) => console.log('Something went wrong adding the bottle', error));
     }
 
+    deleteBootle(bottle) {
+        const { bottles, db } = this.state;
+        const bottleRemove = bottles.find(({ id }) => id === bottle.id);
+        db.remove(bottleRemove)
+            .then(() => this.setState({ bottles: [...bottles.filter(({ id }) => id !== bottle.id)] }))
+            .catch((error) => console.log('Something went wrong removing the bottle', error));
+    }
+
     adjustMainAreaWide(columnEnd = '5') {
         this.setState({ mainAreaWide: columnEnd });
     }
@@ -127,8 +138,9 @@ export default class App extends Component {
                             <Route path="/cellar">
                                 <Cellar
                                     columns={columns}
-                                    bottles={bottles.map((bottle) => ({ ...bottle, title: <Link to={`/cellar/bottle?id=${bottle.id}`}>{bottle.name}</Link> }))}
+                                    bottles={bottles.map((bottle) => ({ bottle, title: <Link to={`/cellar/bottle?id=${bottle.id}`}>{bottle.name}</Link> }))}
                                     adjustMainAreaWide={this.adjustMainAreaWide}
+                                    deleteBootle={this.deleteBootle}
                                 />
                             </Route>
                         </Switch>

diff --git a/src/components/cellar/index.js b/src/components/cellar/index.js
@@ -1,17 +1,20 @@
 import React, { Component } from 'react';
-import { List } from 'antd';
+import { List, Button } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
 
 export default class Cellar extends Component {
     render() {
-        const { bottles, adjustMainAreaWide } = this.props;
+        const { bottles, adjustMainAreaWide, deleteBootle } = this.props;
         return (
             <List
                 itemLayout="horizontal"
                 dataSource={bottles}
-                renderItem={(bottle) => (
-                    <List.Item>
+                renderItem={({ bottle, title }) => (
+                    <List.Item
+                        actions={[<Button icon={<DeleteOutlined />} onClick={() => deleteBootle(bottle)} />]}
+                    >
                         <List.Item.Meta
-                            title={bottle.title}
+                            title={title}
                             description={bottle.year}
                             onClick={() => adjustMainAreaWide('4')}
                         />

diff --git a/test/cellar/cellar.test.js b/test/cellar/cellar.test.js
@@ -35,17 +35,17 @@ describe('All the bottles', () => {
         expect(cellar.find('List').prop('dataSource')).toHaveLength(0);
     });
     test('There are bottles', () => {
-        const bottles = [{
+        const bottleExample = {
             color: 'red',
             id: 'bottle-ka2pdxeb',
             name: 'prado marina',
             type: 'wine',
             year: '2018',
-            _doc_id_rev: 'ka2pdxec::1-55d50aa0131852bb2113838c6b55d269',
-            title: 'prado marina'
-        }];
+            _doc_id_rev: 'ka2pdxec::1-55d50aa0131852bb2113838c6b55d269'
+        };
         const MockAdjustArea = jest.fn();
-        const cellar = shallow(<Cellar columns={columns} bottles={bottles} adjustMainAreaWide={new MockAdjustArea()} />);
+        const MockDeleteBottle = jest.fn();
+        const cellar = shallow(<Cellar columns={columns} bottles={[{bottle: bottleExample, title: 'prado marina'}]} adjustMainAreaWide={new MockAdjustArea()} deleteBootle={new MockDeleteBottle()} />);
         expect(cellar.find('List').prop('dataSource')).toHaveLength(1);
         const bottle = cellar.find('List').render().find('.ant-list-item-meta-content');
         expect(bottle).toHaveLength(1);