Status Updates

- inform user as to what is happenining with auto fill form fetching

Author: FeXd

quick-weblog.js

@@ -1,5 +1,12 @@
 function getArticle(url, api_key) {
 
+  if (url === "") {
+    updateStatus("You  must fill out <strong>Post URL</strong> to use Auto Fill.");
+    return;
+  } else {
+    updateStatus("Attempting to fetch information and Auto Fill...");
+  }
+
   disableForm();
 
   const base_url = 'https://article-extractor2.p.rapidapi.com/article/parse?url=';
@@ -15,21 +22,27 @@ function getArticle(url, api_key) {
   fetch(base_url + url, options)
 	.then(response => {
     if (response.status !== 200) {
-      throw new Error(`Request failed with status ${response.status}`);
+      throw new Error(`Request failed with status: ${response.status}`);
     }
     return response.json();
   })
 	.then(response => {
+    if (response.error >= 0) {
+      throw new Error(`Request received error: ${response.message}`);
+    }
+
     console.log(response);
 
     document.getElementById("quick-weblog-title").value = response.data?.title;
     document.getElementById("quick-weblog-image_url").value = "Image via " + response.data?.souce;
     document.getElementById("quick-weblog-image_description").value = response.data?.title;
     document.getElementById("quick-weblog-quote").value = response.data?.description;
 
+    updateStatus("Successfully used Auto Fill to populate form!");
     enableForm();
   })
 	.catch(err => {
+    updateStatus(err);
     console.error(err);
     enableForm();
   });
@@ -51,3 +64,7 @@ function enableForm() {
 function disableForm() {
   toggleFormElements(false);
 }
+
+function updateStatus(status) {
+  document.getElementById("quick-weblog-status").innerHTML = status;
+}

quick-weblog.php

@@ -52,21 +52,25 @@ function quick_weblog_form() {
 
   <script>
     window.addEventListener("DOMContentLoaded", (event) => {
-      document.getElementById("quick-test").addEventListener("click", (click_event) => {
-        getArticle(document.getElementById("quick-test-input").value, "<?php echo esc_js( wp_kses( $api_key, array() ) ); ?>" );
+      document.getElementById("quick-weblog-auto").addEventListener("click", (click_event) => {
+        click_event.preventDefault();
+        getArticle(document.getElementById("quick-weblog-url").value, "<?php echo esc_js( wp_kses( $api_key, array() ) ); ?>" );
       });
     });
   </script>
 
   <p id="quick-weblog-description">Quickly create a simple Post that highlights an existing news article. Posts include a captioned image and quote with URL citation of original article. All fields are required.</p>
 
-  <button id="quick-test">Quick Test</button>
-
   <div class="card">
     <form id="quick-weblog" method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>">
       <div>
         <label for="url"><?php _e( 'Post URL', 'quick-weblog' ); ?></label>
-        <input id="quick-test-input" type="text" name="url" id="quick-weblog-url" required>
+        <input type="text" name="url" id="quick-weblog-url" required>
+      </div>
+
+      <div>
+        <button id="quick-weblog-auto">Auto Fill</button>
+        <span id="quick-weblog-status">Attempt to auto fill form based on <strong>Post URL</strong>.</span>
       </div>
 
       <div>