From e5a4858774c03d2513f00d45aa7da30b8b374e86 Mon Sep 17 00:00:00 2001
From: Ryan Kulp <ryanckulp@gmail.com>
Date: Thu, 28 Dec 2023 14:56:42 -0500
Subject: [PATCH] DRY flash to 1 element and load svg/classes dynamically

---
 app/helpers/application_helper.rb | 12 ++++++
 app/views/shared/_flash.html.erb  | 64 ++++++++++---------------------
 2 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 6bb5d777..11430b7c 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -28,4 +28,16 @@ def nav_link_classes(path = nil)
     defaults.gsub!('gray', 'black').gsub!('-medium', '-bold') if request.path == "/#{path}"
     defaults
   end
+
+  def flash_classes
+    defaults = 'text-green-500 bg-green-100'
+    defaults.gsub!('green', 'red') if flash[:alert].present?
+    defaults
+  end
+
+  def flash_icon
+    gpath = 'M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
+    gpath = 'M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' if flash[:alert].present?
+    "<svg aria-hidden='true' class='w-5 h-5' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='#{gpath}' clip-rule='evenodd'></path></svg>"
+  end
 end
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb
index 0655a7d0..9b9beae0 100644
--- a/app/views/shared/_flash.html.erb
+++ b/app/views/shared/_flash.html.erb
@@ -1,51 +1,27 @@
-<% visibility = 'hidden' unless (flash[:alert].present? || flash[:notice].present?) %>
+<% if notice || alert %>
+  <div class="md:grid md:grid-cols-3 md:gap-6 mt-12">
+    <div class="md:col-span-1"></div>
+    <div class="flex justify-center">
 
-<div class="<%= visibility %> md:grid md:grid-cols-3 md:gap-6 mt-12">
-  <div class="md:col-span-1"></div>
-  <div class="flex justify-center">
-    <% if flash[:alert].present? %>
-      <div id="toast-warning" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
-        <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg">
-            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
-            <span class="sr-only">Warning icon</span>
+      <div id="flash-toast" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
+        <div class="<%= flash_classes %> inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg">
+          <%== flash_icon %>
         </div>
-        <div class="ml-3 text-sm font-normal"><%= alert %></div>
-        <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss-target="#toast-warning" aria-label="Close" id="flash_alert_close">
-            <span class="sr-only">Close</span>
-            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        <div class="ml-3 text-sm font-normal"><%= notice || alert %></div>
+        <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss-target="#flash-toast" aria-label="Close" onclick="this.parentElement.remove()">
+          <span class="sr-only">Close</span>
+          <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </button>
       </div>
-    <% end %>
-
-    <% if flash[:notice].present? %>
-      <div id="toast-success" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
-        <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
-            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
-            <span class="sr-only">Check icon</span>
-        </div>
-        <div class="ml-3 text-sm font-normal"><%= notice %></div>
-        <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss-target="#toast-success" aria-label="Close" id="flash_alert_close">
-            <span class="sr-only">Close</span>
-            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </button>
-      </div>
-    <% end %>
+    </div>
   </div>
-</div>
 
-<!-- Flash management -->
-<script type="text/javascript">
-  var flashAlert = document.getElementById('flash_alert_close');
-  if (flashAlert !== null) {
-    document.getElementById('flash_alert_close').addEventListener('click', function() {
-      this.parentElement.remove();
+  <script type="text/javascript">
+    // Remove flash messages after the animation ends
+    document.addEventListener('animationend', function(event) {
+      if (event.animationName === 'flashfade') {
+        event.target.remove();
+      }
     });
-  }
-
-  // Remove flash messages after the animation ends
-  document.addEventListener('animationend', function(event) {
-    if (event.animationName === 'flashfade') {
-      event.target.remove();
-    }
-  });
-</script>
+  </script>
+<% end %>
\ No newline at end of file