add sorting in date and test dropdowns

src/components/AbsorbanceGraph.js

@@ -8,7 +8,7 @@ import './DeviceGraph.css';
 class AbsorbanceGraph extends Component {
     constructor(props) {
         super(props);
-        this.state = { url: this.props.url };
+        this.state = { url: this.props.url, show: this.props.show };
     }
     componentDidMount() {
         this.drawChart(this.props.url);

src/components/DeviceGraph.js

@@ -7,7 +7,7 @@ import './DeviceGraph.css';
 import AbsorbanceGraph from './AbsorbanceGraph';
 import db from '../firebase';
 
-function DeviceGraph({url}) {
+function DeviceGraph({url, show}) {
     const [devices, setDevices] = useState([]);
     const [hposTests, setHposTests] = useState(null);
 
@@ -63,7 +63,7 @@ function DeviceGraph({url}) {
 
     return (
         <div>
-            <AbsorbanceGraph url={url} />
+            <AbsorbanceGraph url={url} show={show} />
         </div>
     );
 }

src/components/Devices.css

@@ -36,8 +36,8 @@
     /* display: flex; */
     padding: 15px;
     margin: 15px 0 10px 0;
-    font-weight: 600;
-    font-size: larger;
+    /* font-weight: 600; */
+    font-size: small;
     background-color: white;
 }
 
@@ -55,7 +55,7 @@
 
 .clear-button {
     background-color: aquamarine;
-    width: 5vw;
+    width: 3vw;
     height: 5vh;
     margin: 5px;
     border-radius: 50%;

src/components/Devices.js

@@ -18,6 +18,7 @@ const Devices = () => {
     const [days, setDays] = useState([]);
     const [tests, setTests] = useState([]);
     const [allTests, setAllTests] = useState(null);
+    const [showGraph, setShowGraph] = useState(false);
 
     const changeDevice = ({ value }) => {
         console.log(value);
@@ -27,7 +28,9 @@ const Devices = () => {
             .filter((x) => {
                 if (x.deviceSerialNumber === device) return x;
             })
-            .map(x => moment(x.testTime).format("YYYY-MM-DD")))]);
+            .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
+            .sort()
+            .reverse());
         // setTests(allTests
         //     .filter((x) => {
         //         if (x.deviceSerialNumber === device && x.testTime === ) return x;
@@ -39,18 +42,21 @@ const Devices = () => {
         setTestDate(value);
         setCurTest(null);
         setCurTestData(null);
+        setShowGraph(false);
         setTests(allTests
             .filter((x) => {
                 if (x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(testDate).startOf('day'), moment(testDate).endOf('day'))) return x;
             })
-            .map(x => x._id));
+            .map(x => x._id)
+            .sort());
     }
 
     const changeTest = ({ value }) => {
-        setCurTest(null); setCurTestData(null);
+        setCurTest(null); setCurTestData(null); setShowGraph(false);
         if (curTest) alert('Click clear button first');
         setCurTest(value);
         setCurTestData(allTests.find(x => x._id === value));
+        setShowGraph(true);
     }
 
     useEffect(() => {
@@ -79,15 +85,15 @@ const Devices = () => {
         <div>
             <div className='title'>Insights</div>
             <div className='dropdown-group'>
-                <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an option" />
-                <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an option" />
-                <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an option" />
+                <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
+                <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
+                <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
                 <button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
             </div>
 
             <div className='graph-person-conatiner'>
                 {!curTestData && <div className='refresh-graph-message'>Select test device, date and person to get the detailed graph. Then, refresh or click clear button to render another entry.</div>}
-                {curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} />}
+                {curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
 
                 {curTestData && <div className='person-details'>
                     <table>
@@ -96,10 +102,10 @@ const Devices = () => {
                             <th>value</th>
                         </tr>
                         <tr>
-                            <td>deviceid</td> <td>{curTestData?.deviceId}</td>
+                            <td>device</td> <td>{curTestData?.deviceId}</td>
                         </tr>
                         <tr>
-                            <td>kit serial</td> <td>{curTestData?.kitSerial}</td>
+                            <td>kit</td> <td>{curTestData?.kitSerial}</td>
                         </tr>
                         <tr>
                             <td>test time</td> <td>{curTestData?.testTime}</td>

src/index.js

@@ -19,7 +19,7 @@ const router = createBrowserRouter([
     element: <Devices />,
   },
   {
-    path: "/inshights",
+    path: "/insights",
     element: <Devices />,
   }
 ]);