Add date validation logic and description max length, fixes #238

fixes #238

src/App.css

@@ -325,4 +325,16 @@ a, .link {
   height: 100%;
   z-index: 9999;
   background: var(--color-background);
-}
+}
+
+
+.description-text {
+  white-space: pre-wrap; /* Allows text to wrap and preserves whitespace */
+  word-wrap: break-word; /* Breaks long words if necessary to fit within the container */
+  overflow-wrap: break-word; /* Similar to word-wrap, ensures the text breaks to prevent overflow */
+  max-width: 100%; /* Ensures the text does not exceed the width of its container */
+  margin-bottom: 1em; /* Adjust as needed for your design */
+  line-height: 1.5; /* Adjust as needed for your design */
+}
+
+

src/components/Dashboard.js

@@ -159,7 +159,7 @@ return (
                     <div className="flex justify-between items-start">
                       <div className="flex-grow text-left">
                         <h3 className="text-lg leading-6 font-medium text-gray-900" onClick={() => navigate(`/pumpkin/${pumpkin.id}`)}>{pumpkin.name}</h3>
-                        <p className="max-w-2xl text-sm text-gray-500">{pumpkin.description}</p>
+                        <p className="max-w-2xl text-sm text-gray-500 description-text">{pumpkin.description}</p>
                         {pumpkin.latestMeasurement && <p className="max-w-2xl text-sm text-gray-500">Latest Weight: {pumpkin.latestMeasurement.estimatedWeight} lbs</p>}
                         {pumpkin.pollinated && pumpkin.weighOff && <p className="max-w-2xl text-sm text-gray-500">Days After Pollination: {daysSincePollination(pumpkin.pollinated, pumpkin.weighOff)} days</p>}
                       </div>
@@ -207,3 +207,4 @@ return (
 }
 
 export default Dashboard;
+

src/components/EditPumpkin.js

@@ -39,6 +39,27 @@ function EditPumpkin() {
     e.preventDefault();
     if (auth.currentUser) {
       try {
+        // Validate dates
+        const seedStartedDate = new Date(pumpkin.seedStarted);
+        const transplantOutDate = new Date(pumpkin.transplantOut);
+        const pollinatedDate = pumpkin.pollinated ? new Date(pumpkin.pollinated) : null;
+        const weighOffDate = pumpkin.weighOff ? new Date(pumpkin.weighOff) : null;
+
+        if (transplantOutDate < seedStartedDate) {
+          toast.error("Transplant out date cannot be earlier than seed started date.");
+          return; // Stop the form submission
+        }
+
+        if (pollinatedDate && transplantOutDate > pollinatedDate) {
+          toast.error("Pollinated date cannot be earlier than transplant out date.");
+          return; // Stop the form submission
+        }
+
+        if (weighOffDate && pollinatedDate && weighOffDate < pollinatedDate) {
+          toast.error("Weigh off date cannot be earlier than pollinated date.");
+          return; // Stop the form submission
+        }
+
         // Extract year from the earliest date available
         const dates = [pumpkin.seedStarted, pumpkin.transplantOut, pumpkin.pollinated, pumpkin.weighOff].filter(Boolean);
         const earliestDate = dates.sort()[0];
@@ -73,7 +94,7 @@ function EditPumpkin() {
 
           <div className="field space-y-1">
             <label className="block text-left">Description:</label>
-            <textarea name="description" value={pumpkin.description} onChange={handleChange} className="w-full p-2 border-2 border-gray-300 rounded" />
+            <textarea name="description" value={pumpkin.description} onChange={handleChange} maxLength="90" className="w-full p-2 border-2 border-gray-300 rounded" />
           </div>
 
           <div className="field space-y-1">

src/components/PumpkinDetail.js

@@ -104,7 +104,7 @@ return (
         <div className="mb-auto">
           <h3 className="text-xl font-bold mb-2">Basic Info</h3>
           <p><b>Name:</b> {pumpkin?.name}</p>
-          <p><b>Description:</b> {pumpkin?.description}</p>
+          <p className="description-text"><b>Description:</b> {pumpkin?.description}</p>
           <p><b>Seed:</b> {pumpkin?.maternalLineage || 'Not Set'}</p>
           <p><b>Cross:</b> {pumpkin?.paternalLineage || 'Not Set'}</p>
         </div>