Vote-2725: Load PDF on App Load (#302)

* Update app.jsx with new loaded pdf

* Create new file to load PDF

* Generate PDF files updates with new loaded pdf function

src/App.jsx

@@ -4,6 +4,8 @@ import PathSelection from 'Views/PathSelection.jsx';
 import MultiStepForm from 'Views/MultiStepForm.jsx';
 import {fetchData, fetchStaticData, sanitizeDOM} from 'Utils/JsonHelper.jsx';
 import { HelmetProvider } from "react-helmet-async";
+import loadPdf from './Utils/pdfLoader';
+
 
 const currentStateId = document.getElementById('root').getAttribute('data-stateId');
 const returnPath = document.getElementById('root').getAttribute('data-returnPath');
@@ -16,6 +18,16 @@ function App() {
   const [fieldContent, setFieldContent] = useState('')
   const [stringContent, setStringContent] = useState('')
 
+  const [pdfDoc, setPdfDoc] = useState(null);
+  const [form, setForm] = useState(null);
+
+  useEffect(() => {
+    loadPdf().then(({ pdfDoc, form }) => {
+      setPdfDoc(pdfDoc);
+      setForm(form);
+    });
+  }, []);
+
   useEffect(() => {
     fetchData("states.json", setStates);
     fetchData("pages.json", setContent);
@@ -146,6 +158,8 @@ function App() {
                     registrationPath={registrationPath}
                     getFormStep={getFormStep}
                     stringContent={stringContent}
+                    pdfDoc={pdfDoc}
+                    form={form}
                 />}
 
               {step >= 1 &&

src/Utils/GenerateFilledPDF_en.jsx

@@ -1,17 +1,9 @@
-import { PDFDocument} from 'pdf-lib';
 import download from "downloadjs";
+import loadPdf from './pdfLoader';
 
 const GenerateFilledPDF = async function (btnType,formData,pagesKept) {
-    // Fetch the PDF with form fields
-    const lang = document.documentElement.lang;
-    const locale = lang !== "en" ? `/${lang}` : "";
-    const formUrl = `/data${locale}/Federal_Voter_Registration_${lang}.pdf`;
-    const formPdfBytes = await fetch(formUrl).then(res => res.arrayBuffer())
-    // Load a PDF with form fields
-    const pdfDoc = await PDFDocument.load(formPdfBytes)
-
-    // Get the form containing all the fields
-    const form = pdfDoc.getForm()
+    // Fetch the PDF with form field
+    const { pdfDoc, form } = await loadPdf();
 
     //-------- Get PDF Fields by machine name ------------------
     const citizen = form.getRadioGroup('citizen');

src/Utils/GenerateFilledPDF_es.jsx

@@ -1,18 +1,9 @@
-import { PDFDocument} from 'pdf-lib';
 import download from "downloadjs";
+import loadPdf from './pdfLoader';
 
 const GenerateFilledPDF = async function (btnType,formData,pagesKept) {
-    // Fetch the PDF with form fields
-    const lang = document.documentElement.lang;
-    //TEST SPANISH const lang = "es";
-    const locale = lang !== "en" ? `/${lang}` : "";
-    const formUrl = `/data${locale}/Federal_Voter_Registration_${lang}.pdf`;
-    const formPdfBytes = await fetch(formUrl).then(res => res.arrayBuffer())
-    // Load a PDF with form fields
-    const pdfDoc = await PDFDocument.load(formPdfBytes)
-
-    // Get the form containing all the fields
-    const form = pdfDoc.getForm()
+   // Fetch the PDF with form field
+   const { pdfDoc, form } = await loadPdf();
 
     //-------- Get PDF Fields by machine name ------------------
     const citizen = form.getDropdown('citizen'); //TEMP spanish condition field type

src/Utils/pdfLoader.jsx

@@ -0,0 +1,13 @@
+import { PDFDocument } from 'pdf-lib';
+
+const loadPdf = async () => {
+  const lang = document.documentElement.lang;
+  const locale = lang!== "en"? `/${lang}` : "";
+  const formUrl = `/data${locale}/Federal_Voter_Registration_${lang}.pdf`;
+  const formPdfBytes = await fetch(formUrl).then(res => res.arrayBuffer())
+  const pdfDoc = await PDFDocument.load(formPdfBytes)
+  const form = pdfDoc.getForm()
+  return { pdfDoc, form };
+};
+
+export default loadPdf;