From f56f7cfeb95000bcc739afdae637c93128ff62a5 Mon Sep 17 00:00:00 2001
From: Andre Thomas <anthomas@mercycorps.org>
Date: Wed, 9 Feb 2022 17:47:31 -0500
Subject: [PATCH] Updated evidence gdrive file picker and modals text align
 left.

---
 .../results_form_PC/components/EvidenceFields.js  | 15 ++++++++++-----
 scss/_mc_tola_forms.scss                          |  4 ++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/js/pages/results_form_PC/components/EvidenceFields.js b/js/pages/results_form_PC/components/EvidenceFields.js
index c7d6319e2..c3498aa5c 100644
--- a/js/pages/results_form_PC/components/EvidenceFields.js
+++ b/js/pages/results_form_PC/components/EvidenceFields.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect } from 'react';
 import { HelpText } from '../components/HelpText.js'
 
 const EvidenceFields = ({ evidenceFieldsInput, setEvidenceFieldsInput, formErrors, setFormErrors, readOnly, setWasUpdated }) => {
@@ -27,11 +27,16 @@ const EvidenceFields = ({ evidenceFieldsInput, setEvidenceFieldsInput, formError
         setFormErrors(detectedErrors);
     }
 
+    // Trigger validation when a the file picker is used
+    const [filePicked, setFilePicked] = useState(false);
+    useEffect(() => {
+        handleValdation();
+    }, [filePicked])
+
+    // File picker callback function for after file was picked
     function pcFilePickerCallback(fileName, url) {
-        document.getElementById('id_evidence_url--pc').value = url;
-        document.getElementById('id_record_name--pc').value = fileName;
-        // validateEvidence()
-        // setViewButtonDisabledState();
+        setEvidenceFieldsInput({...evidenceFieldsInput, evidence_url: url, record_name: fileName})
+        setFilePicked(!filePicked);
     }
 
     let handleGDrive  = (e) => {
diff --git a/scss/_mc_tola_forms.scss b/scss/_mc_tola_forms.scss
index 2dabd232f..2fda75052 100644
--- a/scss/_mc_tola_forms.scss
+++ b/scss/_mc_tola_forms.scss
@@ -388,4 +388,8 @@ a.helptext:hover {
 .result-form__heading--pc {
     display: flex;
     justify-content: space-between;
+}
+
+#pc-result-modal-form {
+    text-align: left;
 }
\ No newline at end of file