working pdf without image

.eslintignore

@@ -6,4 +6,5 @@
 /build
 /sonar-runner
 /src/semantic
+/src/components/rangeUsePlan/pdf
 /src/serviceWorker.js

package.json

@@ -17,7 +17,8 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "jest-localstorage-mock": "^2.3.0",
-    "jspdf": "^1.4.1",
+    "jspdf": "^1.5.3",
+    "jspdf-autotable": "^3.0.10",
     "jwt-decode": "^2.2.0",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.22.2",

src/components/rangeUsePlan/PDFView.js

@@ -1,91 +1,70 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from 'semantic-ui-react';
-// import { Document, Page } from 'react-pdf';
 import { connect } from 'react-redux';
-import { downloadPDFBlob } from '../../utils';
-import { fetchRupPDF } from '../../actionCreators';
+import { fetchRupPDF, fetchRUP } from '../../actionCreators';
 import { Loading, ErrorPage, PrimaryButton } from '../common';
-import { getPlanPDF, getIsFetchingPlanPDF, getPlanPDFErrorOccured } from '../../reducers/rootReducer';
+import { getIsFetchingPlan, getPlanErrorOccured, getPlansMap } from '../../reducers/rootReducer';
+import { generatePDF } from './pdf';
 
 class PDFView extends Component {
   static propTypes = {
     match: PropTypes.shape({ params: PropTypes.object }).isRequired,
-    fetchRupPDF: PropTypes.func.isRequired,
-    isFetchingPDF: PropTypes.bool.isRequired,
-    errorFetchingPDF: PropTypes.bool.isRequired,
-    planPDFBlob: PropTypes.shape({}),
+    fetchRUP: PropTypes.func.isRequired,
+    isFetchingPlan: PropTypes.bool.isRequired,
+    errorFetchingPlan: PropTypes.bool.isRequired,
+    planMaps: PropTypes.shape({}),
   };
 
   static defaultProps = {
-    planPDFBlob: null,
+    planMaps: null,
   }
 
   state = {
-    // numPages: 1,
+    doc: null,
   }
 
   componentWillMount() {
-    const { fetchRupPDF, match } = this.props;
+    const { match, fetchRUP } = this.props;
     const { planId, agreementId } = match.params;
 
     if (planId && agreementId) {
-      fetchRupPDF(planId).then(() => {
-        this.onDownloadClicked();
+      fetchRUP(planId).then((plan) => {
+        const doc = generatePDF(plan);
+        this.setState({
+          doc,
+        });
       });
     }
   }
 
   onDownloadClicked = () => {
-    const { match, planPDFBlob } = this.props;
-    const { agreementId } = match.params;
-    downloadPDFBlob(planPDFBlob, this.donwloadPDFLink, `${agreementId}.pdf`);
-  }
-
-  // onLoadSuccess = ({ numPages }) => {
-  //   this.setState({
-  //     numPages,
-  //   });
-  // }
+    const { doc } = this.state;
+    const { planMaps, match } = this.props;
+    const { planId } = match.params;
+    const plan = planMaps[planId];
 
-  setDownlaodPDFRef = (ref) => { this.donwloadPDFLink = ref; }
+    doc.output('save', `${plan.agreementId}.pdf`); // Try to save PDF as a file (not works on ie before 10, and some mobile devices)
+  }
 
   render() {
-    const { planPDFBlob, isFetchingPDF, errorFetchingPDF } = this.props;
-    // const { numPages } = this.state;
-    // const pages = Array.from(
-    //   new Array(numPages),
-    //   (el, index) => (
-    //     <Page
-    //       key={`page_${index + 1}`}
-    //       pageIndex={index + 1}
-    //       pageNumber={index + 1}
-    //       scale={1.2}
-    //     />
-    //   ),
-    // );
+    const { planMaps, match, isFetchingPlan, errorFetchingPlan } = this.props;
+    const { planId } = match.params;
+    const plan = planMaps[planId];
 
     return (
       <section className="rup-pdf">
-        <a
-          className="rup-pdf__link"
-          href="download"
-          ref={this.setDownlaodPDFRef}
-        >
-          link
-        </a>
-
-        { isFetchingPDF &&
+        { isFetchingPlan &&
           <Loading />
         }
 
-        { errorFetchingPDF &&
+        { errorFetchingPlan &&
           <ErrorPage
             message="Error occured while fetching pdf."
           />
         }
 
-        { planPDFBlob &&
+        { plan &&
           <div>
             If your download does not begin, please click the button to try again.
             <PrimaryButton
@@ -106,43 +85,17 @@ class PDFView extends Component {
             </div>
           </div>
         }
-
-        {/* Compatibility issue with the most recent React version I think...
-        { planPDFBlob &&
-          <div className="rup-pdf__content">
-            <div className="rup-pdf__preview__header">
-              <div>
-                <div style={{ fontWeight: 'bold' }}>Previewing PDF</div>
-                To print this PDF download it to your computer prior to printing.
-              </div>
-              <Button
-                onClick={this.onDownloadClicked}
-              >
-                <Icon name="print" />
-                Download PDF
-              </Button>
-            </div>
-            <div className="rup-pdf__preview">
-              <Document
-                file={planPDFBlob}
-                // loading={<Loading />}
-                onLoadSuccess={this.onLoadSuccess}
-              >
-                {pages}
-              </Document>
-            </div>
-          </div> */}
       </section>
     );
   }
 }
 
 const mapStateToProps = state => (
   {
-    planPDFBlob: getPlanPDF(state),
-    isFetchingPDF: getIsFetchingPlanPDF(state),
-    errorFetchingPDF: getPlanPDFErrorOccured(state),
+    planMaps: getPlansMap(state),
+    isFetchingPlan: getIsFetchingPlan(state),
+    errorFetchingPlan: getPlanErrorOccured(state),
   }
 );
 
-export default connect(mapStateToProps, { fetchRupPDF })(PDFView);
+export default connect(mapStateToProps, { fetchRupPDF, fetchRUP })(PDFView);