Invoice items fixes

Author: ivanlhz

src/components/FormContent/form-content.jsx src/components/FormContent/form-content.js

@@ -1,3 +1,3 @@
-import formContent from './form-content.jsx';
+import formContent from './form-content';
 
 export default formContent;

src/components/FormContent/index.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 
 class InvoiceItem extends Component {
   state = {
+    id: this.props.id,
     amount: 1,
     name: '',
     price: 0.0,
@@ -63,6 +64,7 @@ class InvoiceItem extends Component {
 }
 
 InvoiceItem.propTypes = {
+  id: PropTypes.number.isRequired,
   onUpdate: PropTypes.func.isRequired,
 };
 

src/components/InvoiceItem/invoice-item.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { List, ListItem, ListItemText } from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
 
 import { InvoiceMaker, LVMH_TYPE } from '../../libs/invoicemaker';
 import { TYPE_PVP, TYPE_RESELLER } from '../../constats/form-types';
@@ -34,16 +33,23 @@ class MainApp extends Component {
   onUpdateItem = (value) => {
     const { items } = this.state;
     const itemList = Object.assign([], [...items]);
+
     itemList[value.id] = value;
     if (JSON.stringify(items) !== JSON.stringify(itemList)) this.setState({ items: itemList });
   };
 
   writeItems = () => {
     const { items } = this.state;
     let list = [];
+
     if (items.length > 0) {
       list = [
-        ...items.map(item => <InvoiceItem key={item.id} onUpdate={this.onUpdateItem} />),
+        ...items.map(item => (
+          <InvoiceItem
+            key={item.id}
+            id={item.id}
+            onUpdate={this.onUpdateItem}
+          />)),
       ];
     }
     return list;
@@ -64,7 +70,7 @@ class MainApp extends Component {
   handleAddItem = () => {
     const { items } = this.state;
     const newItem = {
-      id: items.length + 1, amount: 0, name: '', price: 0,
+      id: items.length, amount: 0, name: '', price: 0,
     };
     this.setState({
       items: [...items, newItem],
@@ -110,7 +116,7 @@ class MainApp extends Component {
         </div>
         <div className="add">
           <button type="button" onClick={this.handleAddItem}>
-            <AddIcon />
+            +
           </button>
         </div>
       </div>

src/components/Main/main.js

@@ -2,22 +2,20 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import blobStream from 'blob-stream';
 import { saveAs } from 'file-saver';
+import PDFDocument from 'pdfkit';
 import './styles.scss';
 
 
 class TopBar extends Component {
   handleCreatePdf = (e) => {
     e.preventDefault();
     const { getDocument } = this.props;
-    import('pdfkit'/* webpackChunkName: pdfkit */).then((pdfkit) => {
-      const PDFDocument = pdfkit.default;
-      let doc = new PDFDocument({ margin: 10 });
-      doc = getDocument(doc);
-      const stream = doc.pipe(blobStream());
-      stream.on('finish', () => {
-        const blob = stream.toBlob('application/pdf');
-        saveAs(blob, 'invoice');
-      });
+    let doc = new PDFDocument({ margin: 10 });
+    doc = getDocument(doc);
+    const stream = doc.pipe(blobStream());
+    stream.on('finish', () => {
+      const blob = stream.toBlob('application/pdf');
+      saveAs(blob, 'invoice');
     });
   };
 
@@ -31,9 +29,9 @@ class TopBar extends Component {
         <div className="header-bar-right">
           <ul>
             <li>
-              <buton onClick={this.handleCreatePdf}>
+              <button type="button" onClick={this.handleCreatePdf}>
                 Generar
-              </buton>
+              </button>
             </li>
           </ul>
         </div>

src/components/TopBar/top-bar.js

@@ -1,4 +1,4 @@
-import { TYPE_RESELLER, TYPE_PVP } from "../../../constats/form-types";
+import { TYPE_RESELLER, TYPE_PVP } from '../../../constats/form-types';
 
 const LVMH_TYPE = 'lvmh';
 const MGI_TYPE = 'mgi';
@@ -72,6 +72,7 @@ class InvoiceMaker {
   };
 
   pdfSetItems = (items, shipping, formModel) => {
+    console.log(items);
     this.calculatePositions(formModel);
     let footerContentX = this.footerContentX;
     let line = 0;