Fixed bugs. Looking pretty good.

1 files changed, 14 insertions, 10 deletions

diff --git a/maps-frontend/src/components/TimeSelector.js b/maps-frontend/src/components/TimeSelector.js
index 2a26fd9..b396d81 100644
--- a/maps-frontend/src/components/TimeSelector.js
+++ b/maps-frontend/src/components/TimeSelector.js
@@ -1,5 +1,5 @@
 // React/Component imports
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import DateSelector from './DateSelector.js';
 
 // CSS imports
@@ -13,29 +13,33 @@ import '../css/Route.css';
 function TimeSelector(props) {
   const [current, setCurrent] = useState("");
 
+  const toValue = date => new Date(date).toISOString().slice(0, 10);
+
   const [startDate, setStartDate] = useState(props.dates.start);
   const [endDate, setEndDate] = useState(props.dates.end);
 
   const changeTimeframe = () => {
     props.setDates({
-      start: startDate,
-      end: endDate
-    })
+      start: Date.parse(startDate),
+      end: Date.parse(endDate)
+    });
   }
 
+  useEffect(() => setCurrent(""), [startDate, endDate]);
+  
   // The div with the html elements for routing.
   return (
     <div className="Route">
       <div className="Coord-selectors-flex">
-        <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={props.setCurrent("start")}
-          changedFunc={setStartDate}  disabled={props.currentSelector==='start' || props.isChanging}></DateSelector>
+        <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={setCurrent}
+          changedFunc={setStartDate}  disabled={current==='start' || props.isChanging} value={toValue(startDate)}></DateSelector>
         <div>
           <h2>Adjust Timeframe :)</h2>
-          <button className="Btn Route-btn" onClick={() => changeTimeframe()} 
-          disabled={props.currentSelector !== '' || props.isChanging}>Change Timeframe</button>
+          <button className="Btn Route-btn" onClick={() => changeTimeframe()}
+          disabled={current!=="" || props.isChanging}>Change Timeframe</button>
         </div>
-        <DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={props.setCurrent("end")}
-          changedFunc={setEndDate} disabled={props.currentSelector==='end' || props.isChanging}></DateSelector>
+        <DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={setCurrent}
+          changedFunc={setEndDate} disabled={current==='end' || props.isChanging} value={toValue(endDate)}></DateSelector>
       </div>
     </div>
   );