feat(update): update a bottle from the cellar

BREAKING CHANGE: bottles from cellar can be update

src/App.js

@@ -96,6 +96,7 @@ export default class App extends Component {
         };
         this.addBottle = this.addBottle.bind(this);
         this.deleteBootle = this.deleteBootle.bind(this);
+        this.updateBottle = this.updateBottle.bind(this);
     }
 
     componentDidMount() {
@@ -114,13 +115,22 @@ export default class App extends Component {
         const { bottles, db } = this.state;
         const bottleId = Uniqid('bottle-');
         const id = Uniqid();
-        db.put({ _id: id, id: bottleId, ...bottle })
+        db.put({ ...bottle, _id: id, id: bottleId })
             .then(({ rev }) => {
                 this.setState({ bottles: [...bottles, { id: bottleId, _id: id, ...bottle, _rev: rev }] });
             })
             .catch((error) => console.log('Something went wrong adding the bottle', error));
     }
 
+    updateBottle(bottle) {
+        const { bottles, db } = this.state;
+        db.put(bottle)
+            .then(({ rev }) => {
+                this.setState({ bottles: [...bottles.filter(({ id }) => id !== bottle.id), { ...bottle, _rev: rev }] });
+            })
+            .catch((error) => console.log('Something went wrong updating the bottle', error));
+    }
+
     deleteBootle(bottle) {
         const { bottles, db } = this.state;
         const bottleRemove = bottles.find(({ id }) => id === bottle.id);
@@ -159,7 +169,12 @@ export default class App extends Component {
                                 </Route>
                                 <Route path="/add">
                                     <Suspense fallback={<Loading />}>
-                                        <OtherBottle add={this.addBottle} />
+                                        <OtherBottle add={this.addBottle} find={pickBottle(bottles)} />
+                                    </Suspense>
+                                </Route>
+                                <Route path="/edit">
+                                    <Suspense fallback={<Loading />}>
+                                        <OtherBottle add={this.updateBottle} find={pickBottle(bottles)} />
                                     </Suspense>
                                 </Route>
                             </Switch>

src/components/bottle/index.js

@@ -3,7 +3,7 @@ import { useLocation, withRouter } from 'react-router-dom';
 import Styled from 'styled-components';
 import Media from 'styled-media-query';
 import { Rate, Button } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Trans, withTranslation } from 'react-i18next';
 import selectCup from '../../miscellanea';
 
@@ -67,9 +67,10 @@ const Notes = Styled.div`
         "value"
 `;
 
-const Delete = Styled.div`
+const Buttons = Styled.div`
     margin-top: auto;
     align-self: center;
+    display: flex;
 `;
 
 const Section = ({ title, description, value, border = true }) => (
@@ -116,21 +117,36 @@ function Bottle({ find, deleteBootle, history, t }) {
                     {notes}
                 </ValueArea>
             </Notes>
-            <Delete>
+            <Buttons>
+                <Button
+                    onClick={() => {
+                        history.push(`/edit?id=${bottle.id}`);
+                    }}
+                    shape="round"
+                    style={{
+                        background: '#FFFFFF',
+                        color: '#E1BBCA',
+                        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+                        marginRight: '13px'
+                    }}
+                    icon={<EditOutlined />}
+                />
+
                 <Button
                     icon={<DeleteOutlined />}
                     shape="round"
                     style={{
                         background: '#E1BBCA',
                         color: '#FFFFFF',
-                        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+                        marginLeft: '13px'
                     }}
                     onClick={() => {
                         deleteBootle(bottle);
                         history.push('/');
                     }}
                 />
-            </Delete>
+            </Buttons>
         </Detail>
     );
 }

src/components/new/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, useLocation } from 'react-router-dom';
 import { Form, Input, Button, Select, Rate, DatePicker, InputNumber } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { Trans } from 'react-i18next';
@@ -30,13 +30,17 @@ const B = (f) => (g) => (x) => f(g(x));
 const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 const toCapitalized = (str) => str.split(' ').map(capitalized).join(' ');
 
-function OtherBottle({ add, history }) {
+function OtherBottle({ add, history, find }) {
+    const query = new URLSearchParams(useLocation().search);
+    const bottle = find(query.get('id')) || {};
+
     const onFinishFailed = (errorInfo) => {
         console.error('Failed:', errorInfo);
     };
 
     const onFinish = (form) => {
-        B(add)(cleanObject)({ ...form, year: form.year.year() });
+        // eslint-disable-next-line no-underscore-dangle
+        B(add)(cleanObject)({ ...form, year: form.year.year(), _id: bottle._id, _rev: bottle._rev, id: bottle.id });
         history.push('/');
     };
 
@@ -47,9 +51,15 @@ function OtherBottle({ add, history }) {
                 layout="vertical"
                 initialValues={{
                     remember: true,
-                    rate: 2.5,
-                    price: 1,
-                    year: Moment('2019')
+                    rate: bottle.rate || 2.5,
+                    price: bottle.price || 1,
+                    year: bottle.year ? Moment(bottle.year.toString()) : Moment('2019'),
+                    name: bottle.name || undefined,
+                    color: bottle.color || undefined,
+                    type: bottle.type || undefined,
+                    notes: bottle.notes || undefined,
+                    region: bottle.region || undefined,
+                    appellationOfOrigin: bottle.appellationOfOrigin || undefined
                 }}
                 onFinish={onFinish}
                 onFinishFailed={onFinishFailed}