From 67b538c8b5eefce8c32327b713184fea552672e6 Mon Sep 17 00:00:00 2001
From: Yannick <musayann@octangrp.com>
Date: Thu, 30 Apr 2020 00:01:41 +0200
Subject: [PATCH] Cleanup

---
 app/javascript/contact_us_form.js   | 12 ++++++++++++
 app/javascript/packs/application.js |  1 +
 app/views/home/index.html.erb       | 25 ++++---------------------
 3 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 app/javascript/contact_us_form.js

diff --git a/app/javascript/contact_us_form.js b/app/javascript/contact_us_form.js
new file mode 100644
index 0000000..6dcd401
--- /dev/null
+++ b/app/javascript/contact_us_form.js
@@ -0,0 +1,12 @@
+document.addEventListener("turbolinks:load", function () {
+    var form = document.getElementById('contact-us-form');
+    form.addEventListener('submit', function (e) {
+        document.getElementById("contact-us-form-submit-button").classList.add('is-hidden');
+        document.getElementById("contact-us-form-loading-state").classList.remove('is-hidden');
+    });
+
+    form.addEventListener('tinyforms:submitted', function(e) {
+        form.classList.add('is-hidden');
+        document.getElementById("contact-us-form-success-message").classList.remove('is-hidden');
+    })
+});
\ No newline at end of file
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index c461d69..8e1a8a7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -14,6 +14,7 @@ require('demo');
 require('backend_typed');
 require('tabs');
 require('prism');
+require('contact_us_form');
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 110502d..6f4362a 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -188,7 +188,7 @@
       <p class="paragraph">
         We are building tinyforms to make your work easier! Let us know what we can do for you.
       </p>
-      <form data-tinyforms="true" data-tinyforms-submitted="myCallback" id="contact-us-form" method=" POST"
+      <form id="contact-us-form"  data-tinyforms="true" method=" POST"
         action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW" enctype="multipart/form-data">
         <div class="columns is-centered">
           <div class="column is-one-third">
@@ -206,35 +206,18 @@
             </div>
             <div class="control has-text-centered">
               <button id="contact-us-form-submit-button" class="button is-primary">Submit</button>
-              <span id="contact-us-form-loading-state" style="display: none">Loading...</span>
+              <span id="contact-us-form-loading-state" class="is-hidden">Loading...</span>
             </div>
           </div>
         </div>
       </form>
-      <div id="contact-us-form-success-message" style="display: none">
-        <div class="columns is-centered">
+        <div id="contact-us-form-success-message" class="columns is-centered is-hidden">
           <div class="column is-one-third">
             <h3 class="is-size-5">
               Thank you for reaching out!
             </h3>
           </div>
         </div>
-      </div>
     </div>
   </section>
-
-</div>
-<script>
-  var form = document.getElementById('contact-us-form');
-  form.addEventListener('submit', function (e) {
-    document.getElementById("contact-us-form-submit-button").style.display = 'none';
-    document.getElementById("contact-us-form-loading-state").style.display = 'inline-block';
-  });
-
-  function myCallback(submission) {
-    document.getElementById("contact-us-form").style.display =
-    'none'; // the event detail.submission holds the submission data
-    document.getElementById("contact-us-form-success-message").style.display =
-    'block'; // the event detail.submission holds the submission data
-  }
-</script>
\ No newline at end of file
+</div>
\ No newline at end of file