feat: 400 status handling

Author: contreau

api/shorten.php

@@ -15,8 +15,7 @@ function POST_shortcode($db)
 
     // check for existing record
     if (recordExists($db, "url", $url)) {
-        sendErrorCode(400);
-        return [null, null];
+        return ["shortcode" => null];
     } else {
         // create record in database
         $db->query(
@@ -87,6 +86,10 @@ function GET_longurl($db)
             http_response_code(201);
             header("Content-Type: application/json; charset=utf-8");
             echo json_encode($data);
+        } else {
+            http_response_code(400);
+            header("Content-Type: application/json; charset=utf-8");
+            echo json_encode("A shortcode for this URL already exists.");
         }
         break;
 }

public/css/styles.css

@@ -122,6 +122,15 @@ span.response-item {
     color: var(--green);
 }
 
+code.response-status {
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &.visible {
+        opacity: 1;
+    }
+}
+
 span.status-code {
     padding: 0.2em 0.4em;
     color: #000000;

public/js/actions/post.js

@@ -2,17 +2,28 @@
 
 // ** POST ACTION
 /** @param {string} endpoint @param {string} url
- * @returns {Promise<[PostResponse, number]>}
+ * @returns {Promise<[PostResponse | null, number, string]>}
  */
 export async function postURL(endpoint, url) {
   const response = await fetch(endpoint, {
     method: "POST",
     headers: { "Content-Type": "application/x-www-form-urlencoded" },
     body: `url=${encodeURIComponent(url)}`,
   });
+
+  const statusMessages = new Map([
+    [200, "Retrieved shortcode."],
+    [201, "Created shortcode."],
+    [204, "Deleted shortcode."],
+    [400, "A shortcode for this URL already exists."],
+    [404, "Shortcode not found."],
+    [500, "error"],
+  ]);
+
   const status = response.status;
   const data = await response.json();
-  return [data, status];
+  const message = /** @type {string} */ (statusMessages.get(status));
+  return [data, status, message];
 }
 
 // ** ELEMENT VARIABLES
@@ -31,6 +42,14 @@ export const shortcodeSubmitButton = /** @type {HTMLButtonElement} */ (
   document.querySelector('form[method="post"] input[type="submit"]')
 );
 
-export const statusCodeSpan = /** @type {HTMLSpanElement } */ (
+export const statusResponse = /** @type {Element} */ (
+  document.querySelector("code.response-status")
+);
+
+export const statusLabel = /** @type {HTMLSpanElement } */ (
   document.querySelector("span.status-code")
 );
+
+export const statusMessage = /** @type {HTMLParagraphElement} */ (
+  document.querySelector("p.status-message")
+);

public/js/app.js

@@ -38,7 +38,7 @@ const invalidUrlMessage = document.querySelector("p.invalid-url-message");
 
 // ** CSS CLASS MAP FOR STATUS CODES
 /** @type {Map<number, string>}  */
-const statusCssClass = new Map([
+const statusMap = new Map([
   [200, "success"],
   [201, "success"],
   [204, "success"],
@@ -53,20 +53,35 @@ POST.shortcodeForm?.addEventListener("submit", async (event) => {
   const input = /** @type {HTMLInputElement} */ (
     POST.shortcodeForm?.elements[0]
   );
-  const [data, status] = await POST.postURL("/shorten", input.value);
+  let [data, status, message] = await POST.postURL("/shorten", input.value);
   console.log(data);
-  for (let i = 0; i < Object.keys(data).length; i++) {
-    POST.responseItemSpans[i].textContent = /** @type {string} */ (
-      data[`${POST.responseItemSpans[i].id}`]
+  POST.statusLabel.classList.remove("success", "error");
+  POST.responseContainer.classList.remove("visible");
+
+  if (statusMap.get(status) === "error") {
+    POST.statusLabel.classList.add(
+      /** @type {string} */ (statusMap.get(status)),
+    );
+    POST.statusLabel.textContent = `${status}`;
+    POST.statusMessage.textContent = /** @type {string} */ (message);
+    POST.statusMessage.classList.remove("hide");
+    POST.statusResponse.classList.add("visible");
+  } else {
+    data = /** @type {PostResponse} */ (data);
+    for (let i = 0; i < Object.keys(data).length; i++) {
+      POST.responseItemSpans[i].textContent = /** @type {string} */ (
+        data[`${POST.responseItemSpans[i].id}`]
+      );
+    }
+    POST.statusLabel.classList.add(
+      /** @type {string} */ (statusMap.get(status)),
     );
+    POST.statusLabel.textContent = `${status}`;
+    POST.statusMessage.textContent = /** @type {string} */ (message);
+    POST.statusResponse.classList.add("visible");
+    POST.responseContainer.classList.add("visible");
   }
-  // add status code color and add response code as text
-  POST.statusCodeSpan?.classList.add(
-    /** @type {string} */ (statusCssClass.get(status)),
-  );
-  POST.statusCodeSpan.textContent = `${status}`;
-  // make response visible
-  POST.responseContainer.classList.add("visible");
+
   input.value = "";
   input.focus();
 });

views/index.html

@@ -48,9 +48,12 @@ <h2>Create a Shortcode</h2>
             </form>
             <p class="invalid-url-message">Invalid URL.</p>
 
+            <code class="response-status">
+                <p>Status: <span class="status-code"></span></p>
+                <p class="status-message hide"></p>
+            </code>
             <div class="response-contents">
                 <code>
-                    <p>Status: <span class="status-code"></span></p>
                     { <br />
                     &nbsp;&nbsp;id: <span class="response-item" id="id"></span>
                     <br />