From 9613201bdb32992af6a39c9e03fc8e5ba4d7efa8 Mon Sep 17 00:00:00 2001
From: Vincent Guzman <100250184+vguzman812@users.noreply.github.com>
Date: Sun, 10 Sep 2023 19:48:23 -0400
Subject: [PATCH] Add fix for issue #443. Solution entails adding a conditional
 to check if the date on the calendar is >= today's date. If true then plus
 button is shown. Otherwise plus button is not rendered. (#446)

---
 client/src/features/calendar/DayCard.js | 53 ++++++++++++++-----------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/client/src/features/calendar/DayCard.js b/client/src/features/calendar/DayCard.js
index 8af1999f..a2e7b480 100644
--- a/client/src/features/calendar/DayCard.js
+++ b/client/src/features/calendar/DayCard.js
@@ -1,4 +1,4 @@
-import { isSameDay, format } from "date-fns";
+import { isSameDay, format, compareAsc } from "date-fns";
 import React from "react";
 import Event from "./Event";
 import { useFormModalContext } from "contexts/FormModalContext";
@@ -18,6 +18,10 @@ const DayCard = ({ date, events }) => {
   //Checks if current day matches date
   const sameDayCheck = isSameDay(startOfDay(date), new Date());
 
+  // Compare if the date is greater than or equal to today
+  const isFutureOrToday =
+    compareAsc(startOfDay(date), startOfDay(new Date())) >= 0;
+
   // Sort events by startAt property
   let sortedEvents = [...events].sort(
     (a, b) => new Date(a.startAt) - new Date(b.startAt)
@@ -42,29 +46,30 @@ const DayCard = ({ date, events }) => {
           <Event event={event} key={i} />
         ))}
       </div>
-
-      <button
-        className="absolute bottom-0 right-0 items-center justify-center hidden w-6 h-6 mb-2 mr-2 text-white bg-gray-400 rounded group-hover:flex hover:bg-gray-500"
-        onClick={() => {
-          let chosenDate = `${date.getFullYear()}-${(date.getMonth() + 1)
-            .toString()
-            .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
-          setFormData(prevFormData => ({
-            ...prevFormData,
-            initialDate: chosenDate,
-            finalDate: chosenDate,
-          }));
-          formModal.handleOpen();
-        }}
-      >
-        <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-          <path
-            fillRule="evenodd"
-            d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </button>
+      {isFutureOrToday && ( // Only render the button if the date is >= current day
+        <button
+          className="absolute bottom-0 right-0 items-center justify-center hidden w-6 h-6 mb-2 mr-2 text-white bg-gray-400 rounded group-hover:flex hover:bg-gray-500"
+          onClick={() => {
+            let chosenDate = `${date.getFullYear()}-${(date.getMonth() + 1)
+              .toString()
+              .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+            setFormData(prevFormData => ({
+              ...prevFormData,
+              initialDate: chosenDate,
+              finalDate: chosenDate,
+            }));
+            formModal.handleOpen();
+          }}
+        >
+          <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fillRule="evenodd"
+              d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        </button>
+      )}
     </div>
   );
 };