Merge pull request #29 from concord-consortium/186862140-weather-stat…

…ion-info

Show weather station info in Date Range picker (PT-186862140)

src/components/date-range/calendars.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "./calendars.scss";
 import { Calendar } from "./calendar";
 import { useStateContext } from "../../hooks/use-state";
@@ -10,8 +10,22 @@ interface ICalendarsProps {
 }
 
 export const Calendars = ({selectedCalendar, handleSelectCalendar, closeCalendars}: ICalendarsProps) => {
-  const {state} = useStateContext();
-  const {weatherStation} = state;
+  const { state } = useStateContext();
+  const { weatherStation } = state;
+  const [activeDates, setActiveDates] = useState<{from: string, to: string}>({from: "", to: ""});
+
+  useEffect(() => {
+    if (weatherStation) {
+      const {mindate, maxdate} = weatherStation; //"1973-01-01"
+      const formatDate = (date: string) => {
+        const [year, month, day] = date.split("-");
+        return `${month}/${day}/${year}`;
+      };
+      const from = formatDate(mindate);
+      const to = maxdate === "present" ? "present" : formatDate(maxdate);
+      setActiveDates({from, to});
+    }
+  }, [weatherStation]);
 
   return (
     <div className="modal">
@@ -24,12 +38,16 @@ export const Calendars = ({selectedCalendar, handleSelectCalendar, closeCalendar
         </div>
       </div>
       <div className="calendar-footer">
-        <div className="station-information">
-          <div className="station-name">{weatherStation?.name || "WEATHER STATION"}</div>
-          <div className="station-dates">
-            <span>MM/DD/YYYY</span> - <span>MM/DD/YYYY</span>
+          <div className="station-information">
+            { weatherStation &&
+              <>
+                <div className="station-name">{weatherStation?.name || "WEATHER STATION"}</div>
+                <div className="station-dates">
+                  <span>{activeDates.from}</span> - <span>{activeDates.to}</span>
+                </div>
+              </>
+            }
           </div>
-        </div>
         <button className="close-calendar" onClick={closeCalendars}>Done</button>
       </div>
     </div>