From f31e6159c4754d3452289bb7c4c98122294fe149 Mon Sep 17 00:00:00 2001
From: "Justin Craig-Kuhn (JCK)" <jcraigk@gmail.com>
Date: Sun, 3 Nov 2024 21:37:54 -0800
Subject: [PATCH] Add date sorting to era shows

---
 app/api/api_v2/shows.rb                     |  1 +
 app/javascript/components/EraShows.jsx      | 50 ++++++++++++++++++---
 app/javascript/stylesheets/content.css.scss | 32 +++++++++----
 3 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/app/api/api_v2/shows.rb b/app/api/api_v2/shows.rb
index 6fa93406..b68922c3 100644
--- a/app/api/api_v2/shows.rb
+++ b/app/api/api_v2/shows.rb
@@ -148,6 +148,7 @@ def page_of_shows
         shows = Show.published
                     .includes(
                       :venue,
+                      :tour,
                       :album_cover_attachment,
                       :album_zip_attachment,
                       :cover_art_attachment,
diff --git a/app/javascript/components/EraShows.jsx b/app/javascript/components/EraShows.jsx
index a2b5aaf9..474eb075 100644
--- a/app/javascript/components/EraShows.jsx
+++ b/app/javascript/components/EraShows.jsx
@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet-async";
 import LayoutWrapper from "./layout/LayoutWrapper";
 import Shows from "./Shows";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faList, faTh, faCircleChevronLeft, faCircleChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faList, faTh, faCircleChevronLeft, faCircleChevronRight, faSortAmountDown, faSortAmountUp } from "@fortawesome/free-solid-svg-icons";
 
 export const eraShowsLoader = async ({ params }) => {
   const { year } = params;
@@ -24,10 +24,19 @@ export const eraShowsLoader = async ({ params }) => {
 };
 
 const EraShows = () => {
-  const { shows, year } = useLoaderData();
+  const { shows: initialShows, year } = useLoaderData();
   const [viewMode, setViewMode] = useState("grid");
+  const [sortOption, setSortOption] = useState("desc");
   const [yearsData, setYearsData] = useState(null);
 
+  const sortedShows = [...initialShows].sort((a, b) => {
+    if (sortOption === "asc") {
+      return new Date(a.date) - new Date(b.date);
+    } else {
+      return new Date(b.date) - new Date(a.date);
+    }
+  });
+
   useEffect(() => {
     const fetchYearsData = async () => {
       try {
@@ -46,6 +55,10 @@ const EraShows = () => {
     setViewMode(mode);
   };
 
+  const handleSortOptionChange = (option) => {
+    setSortOption(option);
+  };
+
   const renderViewToggleButtons = () => (
     <div className="view-toggle buttons has-addons">
       <button
@@ -69,6 +82,29 @@ const EraShows = () => {
     </div>
   );
 
+  const renderSortButtons = () => (
+    <div className="view-toggle buttons has-addons">
+      <button
+        className={`button ${sortOption === "desc" ? "is-selected" : ""}`}
+        onClick={() => handleSortOptionChange("desc")}
+        disabled={sortOption === "desc"}
+      >
+        <span className="icon">
+          <FontAwesomeIcon icon={faSortAmountDown} />
+        </span>
+      </button>
+      <button
+        className={`button ${sortOption === "asc" ? "is-selected" : ""}`}
+        onClick={() => handleSortOptionChange("asc")}
+        disabled={sortOption === "asc"}
+      >
+        <span className="icon">
+          <FontAwesomeIcon icon={faSortAmountUp} />
+        </span>
+      </button>
+    </div>
+  );
+
   const yearLinks = () => {
     if (!yearsData) return null;
     const yearIndex = yearsData.findIndex((y) => y.period === year);
@@ -96,8 +132,9 @@ const EraShows = () => {
   const sidebarContent = (
     <div className="sidebar-content">
       <p className="sidebar-title">{year}</p>
-      <p className="sidebar-subtitle">{shows.length} shows</p>
+      <p className="sidebar-subtitle">{sortedShows.length} shows</p>
       {renderViewToggleButtons()}
+      {renderSortButtons()}
       <div className="hidden-mobile">{yearLinks()}</div>
     </div>
   );
@@ -108,8 +145,11 @@ const EraShows = () => {
         <title>{year} - Phish.in</title>
       </Helmet>
       <LayoutWrapper sidebarContent={sidebarContent}>
-        <div className="display-phone-only">{renderViewToggleButtons()}</div>
-        <Shows shows={shows} tourHeaders={true} viewMode={viewMode} />
+        <div className="display-phone-only">
+          {renderViewToggleButtons()}
+          {renderSortButtons()}
+        </div>
+        <Shows shows={sortedShows} tourHeaders={true} viewMode={viewMode} />
         {yearLinks()}
       </LayoutWrapper>
     </>
diff --git a/app/javascript/stylesheets/content.css.scss b/app/javascript/stylesheets/content.css.scss
index bf8ae369..317c161d 100644
--- a/app/javascript/stylesheets/content.css.scss
+++ b/app/javascript/stylesheets/content.css.scss
@@ -412,6 +412,10 @@ main {
 .view-toggle {
   margin-bottom: 0px !important;
 
+  &:not(:first-child) {
+    margin-top: 1rem;
+  }
+
   button {
     padding: 8px 16px;
     font-size: 1rem;
@@ -558,6 +562,14 @@ main {
     width: 100%;
   }
 
+  .view-toggle {
+    justify-content: center;
+
+    &:not(:first-child) {
+      margin-top: 0px !important;
+    }
+  }
+
   .sidebar-control-container {
     position: relative;
     top: 3px;
@@ -631,6 +643,18 @@ main {
 }
 
 @media (max-width: 420px) {
+  .display-phone-only {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .view-toggle {
+    display: flex;
+    gap: 0.5rem; /* Space between buttons within each group */
+  }
+
   .grid-view {
     grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
     gap: 0.7rem;
@@ -644,19 +668,11 @@ main {
     display: none;
   }
 
-  .view-toggle {
-    justify-content: center;
-  }
-
   .list-item {
     min-height: 2rem;
     padding: 0.25rem 0.6rem;
   }
 
-  .display-phone-only {
-    display: block !important;
-  }
-
   .hidden-phone {
     display: none !important;
   }