7/Save Results (#42)

Co-authored-by: Ryan Graue <rgraue@Ryans-MacBook-Pro.local>

package.json

@@ -12,7 +12,9 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "babel-plugin-react-css-modules": "^5.2.6",
+    "html2canvas": "^1.4.1",
     "ionicons": "^7.3.0",
+    "jspdf": "^2.5.1",
     "mui": "^0.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Results/SaveComponent/save.jsx

@@ -3,10 +3,10 @@ import { Box, Card, CardActionArea, CardContent, Typography } from '@mui/materia
 import { IonIcon } from '@ionic/react';
 import { chevronForwardOutline, mailOpen } from 'ionicons/icons';
 
-const SaveResultsBox = () => {
+const SaveResultsBox = ({handleSave}) => {
   return (
     <Card>
-      <CardActionArea>
+      <CardActionArea onClick={handleSave}>
         <CardContent>
           <Box display="flex" justifyContent="space-between" alignItems="center">
             <Box display="flex" alignItems="center">

src/pages/Results.jsx

@@ -1,14 +1,17 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 import { Grid } from '@mui/material';
 import { EnergyScore, Save, IndividualScore } from '../components/Results';
 import { FormDataContext } from '../context/FormDataContext';
 import handleCalculation from '../helpers/calculation.js';
 import '../styles/page.css';
 import Header from '../components/Results/Header';
+import { jsPDF } from 'jspdf'
+import html2canvas from 'html2canvas';
 
 const Results = () => {
   const { formData } = useContext(FormDataContext);
   const [ data, setData ] = useState(null);
+  const inputRef = useRef(null)
 
   useEffect(() => {
     const calculate = async () => {
@@ -19,11 +22,23 @@ const Results = () => {
     calculate();
   }, [formData]);
 
+  const saveToPdf = () => {
+    console.log("saving");
+    html2canvas(inputRef.current).then((canvas) => {
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF("landscape", "mm", "a4")
+      const width = pdf.internal.pageSize.getWidth();
+      const height = pdf.internal.pageSize.getHeight();
+      pdf.addImage(imgData, "JPEG", 0, 0, width, height);
+      pdf.save("download.pdf");
+    })
+  }
+
   if (data === null) {
     return <div>Loading...</div>;
   }
   return (
-    <div className="results">
+    <div className="results" ref={inputRef}>
       <Header />
       <Grid container spacing={4} style={{ padding: '20px' }}>
         <Grid item xs={12} md={4.5}>
@@ -50,7 +65,7 @@ const Results = () => {
               </Grid>
             ))}
             <Grid item xs={12} sm={6}>
-              <Save />
+              <Save handleSave={saveToPdf}/>
             </Grid>
           </Grid>
         </Grid>