From a307aa9ff71d0323ecae31b442ffadca665fd19e Mon Sep 17 00:00:00 2001
From: Joey Harrison <joeyh021@icloud.com>
Date: Wed, 5 Jul 2023 20:10:06 +0100
Subject: [PATCH] split app and panel templates into separate file, add message
 on form submissions

---
 src/routes/app.rs    |  47 +++++++++++--------
 static/output.css    |  81 ++++-----------------------------
 templates/app.html   | 105 +------------------------------------------
 templates/panel.html | 105 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 145 insertions(+), 193 deletions(-)
 create mode 100644 templates/panel.html

diff --git a/src/routes/app.rs b/src/routes/app.rs
index a94f2bd..1bbdaa2 100644
--- a/src/routes/app.rs
+++ b/src/routes/app.rs
@@ -20,17 +20,27 @@ pub async fn home() -> impl IntoResponse {
 
 #[derive(Template)]
 #[template(path = "app.html")]
-struct PanelTemplate {
+struct AppTemplate {
     username: String,
+    message: Option<String>,
 }
 
-async fn panel(session: ReadableSession, _: State<AppState>) -> Result<impl IntoResponse> {
+async fn app(session: ReadableSession, _: State<AppState>) -> Result<impl IntoResponse> {
     if session.get::<String>("username").is_none() {
         return Err(Redirect::to("/auth/login").into());
     }
 
     let username = session.get::<String>("username").unwrap();
-    Ok(PanelTemplate { username })
+    Ok(AppTemplate {
+        username,
+        message: None,
+    })
+}
+
+#[derive(Template)]
+#[template(path = "panel.html")]
+struct PanelTemplate {
+    message: Option<String>,
 }
 
 #[derive(Template)]
@@ -68,25 +78,26 @@ async fn handle_form(
     )
         .into())
     };
+    //return entire panel, including message and cleared form for htmx to swap in
 
-    db::add_new(&f.source, &f.sink, &username, &s.pool)
-        .await
-        .context("Could not add new redirect to database")
-        .map_err(handle_error)
-        .map_err(|_| {
-            (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                "An error occursed while adding your go link to the database.",
-            )
-        })?;
-
-    //return updated table for htmx to swap in
-    //TODO: only return new row, more
-    Ok(Redirect::to("/app/panel/table"))
+    Ok(PanelTemplate {
+        message: Some(
+            match db::add_new(&f.source, &f.sink, &username, &s.pool).await {
+                Ok(_) => format!("✅ Added go link \"{}\" link to database", f.source),
+                Err(sqlx::Error::Database(e)) if e.code() == Some("23505".into()) => {
+                    format!("❌ Go link with source \"{}\" already exists", f.source)
+                }
+                Err(e) => {
+                    tracing::error!("Failed to handle form submission: {e:?}");
+                    format!("❌ Failed to add go link to database: {e:?}")
+                }
+            },
+        ),
+    })
 }
 
 pub fn app_routes() -> Router<AppState> {
     Router::new()
-        .route("/panel", get(panel).post(handle_form))
+        .route("/panel", get(app).post(handle_form))
         .route("/panel/table", get(table))
 }
diff --git a/static/output.css b/static/output.css
index 3410d40..b8d72e1 100644
--- a/static/output.css
+++ b/static/output.css
@@ -712,10 +712,6 @@ select {
   margin: 0.25rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -747,18 +743,14 @@ select {
   margin-top: 1rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mt-5 {
   margin-top: 1.25rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .block {
   display: block;
 }
@@ -779,34 +771,14 @@ select {
   display: table;
 }
 
-.h-16 {
-  height: 4rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
 .max-h-\[40px\] {
   max-height: 40px;
 }
 
-.max-h-\[60vh\] {
-  max-height: 60vh;
-}
-
 .max-h-\[65vh\] {
   max-height: 65vh;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
-.w-64 {
-  width: 16rem;
-}
-
 .w-7 {
   width: 1.75rem;
 }
@@ -831,20 +803,10 @@ select {
   align-items: center;
 }
 
-.items-baseline {
-  align-items: baseline;
-}
-
 .justify-between {
   justify-content: space-between;
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -911,11 +873,6 @@ select {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1026,6 +983,11 @@ select {
   line-height: 1;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1036,11 +998,6 @@ select {
   line-height: 1.75rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1110,11 +1067,6 @@ select {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-indigo-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
-}
-
 .hover\:opacity-80:hover {
   opacity: 0.8;
 }
@@ -1124,26 +1076,11 @@ select {
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus\:ring-indigo-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
 .group:hover .group-hover\:opacity-60 {
   opacity: 0.6;
 }
diff --git a/templates/app.html b/templates/app.html
index 5984c22..da7d225 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -1,105 +1,4 @@
-{% extends "base.html" %} {% block content %}
-<div class="text-gray-700">
-  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-    <form
-      hx-post=""
-      hx-target="#link-table"
-      hx-swap="outerHTML"
-      class="form flex space-x-2 flex-wrap mt-2 items-center"
-    >
-      <h2 class="block font-bold py-2 px-4 mt-5 text-lg">Add new go link</h2>
-      <div class="form-sink">
-        <label class="inline-flex text-sm text-gray-700" for="source"
-          >Source:</label
-        >
-        <input
-          class="block rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-          type="text"
-          name="source"
-          id="source"
-          required
-        />
-      </div>
-      <div class="form-source">
-        <label class="inline-flex text-sm text-gray-700" for="sink"
-          >Sink:</label
-        >
-        <input
-          class="block rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-          type="url"
-          name="sink"
-          id="sink"
-          required
-        />
-      </div>
-      <div class="form-submit">
-        <label class="inline-flex text-sm" for="submit"></label>
-        <button
-          class="block border border-transparent text-white bg-blue-500 hover:bg-blue-700 font-bold py-2 px-4 rounded"
-          type="submit"
-          value="Submit"
-        >
-          Submit
-        </button>
-      </div>
-    </form>
-  </div>
-
-  <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-8 mt-4 flex flex-col">
-    <div class="-my-2 -mx-4 overflow-auto max-h-[65vh] sm:-mx-6 lg:-mx-8">
-      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-        <div
-          class="overflow-full shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"
-        >
-          <table class="min-w-full divide-y divide-gray-300" id="redirects">
-            <thead class="bg-gray-100 sticky top-0">
-              <tr>
-                <th
-                  scope="col"
-                  class="py-3.5 pl-4 pr-3 text-left text-sm text-gray-900 sm:pl-6"
-                  >Source</th
-                >
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm text-gray-900"
-                  >Usages</th
-                >
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm text-gray-900"
-                  >Created</th
-                >
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm text-gray-900"
-                  >Author</th
-                >
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm text-gray-900"
-                  >Last Used</th
-                >
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm text-gray-900"
-                  >Sink</th
-                >
-              </tr>
-            </thead>
-            <tbody
-              class="divide-y divide-gray-200 bg-white"
-              hx-get="panel/table"
-              hx-trigger="load"
-              hx-swap="outerHTML"
-            >
-              <tr> <td> Links loading...</td> </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %} {% block top_right %}
+{% extends "base.html" %} {% block content %}{% include "panel.html" %} {%
+endblock %} {% block top_right %}
 <p class="text-gray-200"> Welcome, {{ username }}</p>
 {% endblock %}
diff --git a/templates/panel.html b/templates/panel.html
new file mode 100644
index 0000000..86c64fe
--- /dev/null
+++ b/templates/panel.html
@@ -0,0 +1,105 @@
+<div class="text-gray-700" id="panel">
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <form
+      hx-post=""
+      hx-target="#panel"
+      hx-swap="outerHTML"
+      class="form flex space-x-2 flex-wrap mt-2 items-center"
+    >
+      <h2 class="block font-bold py-2 px-4 mt-5 text-lg">Add new go link</h2>
+      <div class="form-sink">
+        <label class="inline-flex text-sm text-gray-700" for="source"
+          >Source:</label
+        >
+        <input
+          class="block rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          type="text"
+          name="source"
+          id="source"
+          required
+        />
+      </div>
+      <div class="form-source">
+        <label class="inline-flex text-sm text-gray-700" for="sink"
+          >Sink:</label
+        >
+        <input
+          class="block rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          type="url"
+          name="sink"
+          id="sink"
+          required
+        />
+      </div>
+      <div class="form-submit">
+        <label class="inline-flex text-sm" for="submit"></label>
+        <button
+          class="block border border-transparent text-white bg-blue-500 hover:bg-blue-700 font-bold py-2 px-4 rounded"
+          type="submit"
+          value="Submit"
+        >
+          Submit
+        </button>
+      </div>
+      <p class="block py-2 px-4 mt-5 text-m"
+        >{% match message %} {% when Some with (val) %} {{ val }} {% when None
+        %} {% endmatch %}</p
+      >
+    </form>
+  </div>
+
+  <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-8 mt-4 flex flex-col">
+    <div class="-my-2 -mx-4 overflow-auto max-h-[65vh] sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+        <div
+          class="overflow-full shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"
+        >
+          <table class="min-w-full divide-y divide-gray-300" id="redirects">
+            <thead class="bg-gray-100 sticky top-0">
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3.5 pl-4 pr-3 text-left text-sm text-gray-900 sm:pl-6"
+                  >Source</th
+                >
+                <th
+                  scope="col"
+                  class="px-3 py-3.5 text-left text-sm text-gray-900"
+                  >Usages</th
+                >
+                <th
+                  scope="col"
+                  class="px-3 py-3.5 text-left text-sm text-gray-900"
+                  >Created</th
+                >
+                <th
+                  scope="col"
+                  class="px-3 py-3.5 text-left text-sm text-gray-900"
+                  >Author</th
+                >
+                <th
+                  scope="col"
+                  class="px-3 py-3.5 text-left text-sm text-gray-900"
+                  >Last Used</th
+                >
+                <th
+                  scope="col"
+                  class="px-3 py-3.5 text-left text-sm text-gray-900"
+                  >Sink</th
+                >
+              </tr>
+            </thead>
+            <tbody
+              class="divide-y divide-gray-200 bg-white"
+              hx-get="panel/table"
+              hx-trigger="load"
+              hx-swap="outerHTML"
+            >
+              <tr> <td> Links loading...</td> </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>