Add calendar in tooltip to show available dates, rather than an unord…

…ered list
mileswwatkins · Nov 27, 2024 · ed66596 · ed66596
1 parent 8f1ccb0
commit ed66596
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 24 deletions.
diff --git a/public/link.svg b/public/link.svg
diff --git a/src/components/Attribution.js b/src/components/Attribution.js
@@ -17,11 +17,25 @@ const Attribution = () => {
         </a>
       </span>
       <span className="Attribution">
-        Logo based on{" "}
-        <a href="https://thenounproject.com/icon/watchtower-1247287/">
+        Logo and favicon based on{" "}
+        <a
+          href="https://thenounproject.com/icon/watchtower-1247287/"
+          rel="noreferrer"
+          target="_blank"
+        >
           work by Creative Mania
         </a>
       </span>
+      <span className="Attribution">
+        <a
+          href="https://thenounproject.com/icon/external-3776998/"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Link icon
+        </a>{" "}
+        by Adrien Coquet
+      </span>
     </div>
   );
 };

diff --git a/src/components/MapPopup.css b/src/components/MapPopup.css
@@ -1,15 +1,6 @@
-.mapboxgl-popup-content {
-  background-color: #faf3ce;
-}
-
-.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
-  border-top-color: #faf3ce;
-}
-
 .Map-Popup {
-  max-height: 150px;
-  overflow: auto;
   margin-top: 0;
+  width: 242px;
 }
 
 .Map-Popup-header {
@@ -21,6 +12,12 @@
 
 .Map-Popup-header > a {
   color: #000;
+  width: 200px;
+}
+
+.Map-Popup-link-icon {
+  height: 14px;
+  margin-left: 5px;
 }
 
 .Map-Popup-body {
@@ -39,7 +36,24 @@
   font-style: italic;
 }
 
-.Map-Popup-list {
-  margin-top: 2px;
-  margin-bottom: 0;
+.Map-Popup-body__available {
+  font-style: italic;
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* Override values from third-party libraries */
+
+/* Use the theme color for the popup background */
+.mapboxgl-popup-content {
+  background-color: #faf3ce;
+}
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+  border-top-color: #faf3ce;
+}
+
+/* Apply uniform spacing to the tooltip container */
+.mapboxgl-popup-content {
+  padding: 12px;
+  padding-bottom: 9px;
 }
diff --git a/src/components/MapPopup.js b/src/components/MapPopup.js
@@ -1,7 +1,10 @@
 import { Fragment } from "react";
 import { Popup } from "react-map-gl";
-import { formatFacilityName, reformatDate, isLikelyClosed } from "../utils";
+import { formatFacilityName, isLikelyClosed } from "../utils";
+import DatePicker from "react-datepicker";
 import "./MapPopup.css";
+import "react-datepicker/dist/react-datepicker.css";
+import { add } from "date-fns";
 
 const MapPopup = ({ location, info }) => {
   let availableDates = [];
@@ -15,6 +18,9 @@ const MapPopup = ({ location, info }) => {
     new Date().getMonth(),
   );
 
+  const minDate = new Date();
+  const maxDate = add(new Date(), { months: 6, days: 1 });
+
   return (
     <Popup
       {...location}
@@ -42,6 +48,11 @@ const MapPopup = ({ location, info }) => {
             rel="noopener noreferrer"
           >
             {formatFacilityName(info.metadata.facility_name)}
+            <img
+              src="link.svg"
+              alt="link icon"
+              className="Map-Popup-link-icon"
+            ></img>
           </a>
         </span>
         <div className="Map-Popup-body">
@@ -60,15 +71,22 @@ const MapPopup = ({ location, info }) => {
             </span>
           ) : (
             <Fragment>
-              <span>
-                Available for {availableDates.length} nights over the next 6
-                months:
+              <span className="Map-Popup-body__available">
+                Available for {availableDates.length} night
+                {availableDates.length > 1 && "s"} over the next 6 months. Click
+                on the link above to book.
               </span>
-              <ul className="Map-Popup-list">
-                {availableDates.map((date) => (
-                  <li key={date}>{reformatDate(date)}</li>
-                ))}
-              </ul>
+              <DatePicker
+                inline
+                // Helps with styling enough to be okay with the loss of
+                // accessibility
+                disabledKeyboardNavigation
+                minDate={minDate}
+                maxDate={maxDate}
+                highlightDates={availableDates.map((date) => new Date(date))}
+                // Don't suggest to the user that they can select anything
+                selectedDates={[]}
+              />
             </Fragment>
           )}
         </div>