add test graphs with device, date and test filters

src/components/Devices.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
+import * as _ from 'lodash';
+import Dropdown from 'react-dropdown';
+import 'react-dropdown/style.css';
+import moment from 'moment';
+
+import DeviceGraph from "./DeviceGraph";
+import db from '../firebase';
+import './Devices.css';
+
+const Devices = () => {
+    const [device, setDevice] = useState("Select a device");
+    const [testDate, setTestDate] = useState("Select a test date");
+    const [curTest, setCurTest] = useState("Select a test");
+    const [curTestData, setCurTestData] = useState(null);
+    const [devices, setDevices] = useState([]);
+    const [days, setDays] = useState([]);
+    const [tests, setTests] = useState([]);
+    const [allTests, setAllTests] = useState(null);
+
+    const changeDevice = ({ value }) => {
+        console.log(value);
+
+        setDevice(value);
+        setDays([...new Set(allTests
+            .filter((x) => {
+                if (x.deviceSerialNumber === device) return x;
+            })
+            .map(x => moment(x.testTime).format("YYYY-MM-DD")))]);
+        // setTests(allTests
+        //     .filter((x) => {
+        //         if (x.deviceSerialNumber === device && x.testTime === ) return x;
+        //     })
+        //     .map(x => x.testTime));
+    }
+
+    const changeTestDate = ({ value }) => {
+        setTestDate(value);
+        setCurTest(null);
+        setCurTestData(null);
+        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));
+    }
+
+    const changeTest = ({ value }) => {
+        setCurTest(null); setCurTestData(null);
+        if (curTest) alert('Click clear button first');
+        setCurTest(value);
+        setCurTestData(allTests.find(x => x._id === value));
+    }
+
+    useEffect(() => {
+        const q = query(collection(db, "testData"));
+
+        const unsub = onSnapshot(q, (querySnapshot) => {
+            const testDevices = new Set();
+            const hposTests = [];
+            querySnapshot.forEach((document) => {
+                const hposTestData = document.data();
+                hposTests.push(hposTestData);
+                const { deviceSerialNumber } = hposTestData;
+                testDevices.add(deviceSerialNumber);
+                // console.log(document.data());
+            });
+            const groups = [...testDevices];
+            // console.log(groups);
+            setDevices(groups);
+            setAllTests(hposTests);
+        });
+
+        return () => unsub;
+    }, [curTestData, curTest]);
+
+    return (
+        <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" />
+                <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 && <div className='person-details'>
+                    deviceid: {curTestData?.deviceId},
+                    kit serial: {curTestData?.kitSerial},
+                    test time: {curTestData?.testTime},
+                    result: {curTestData?.result}
+                    <img src={curTestData?.userImageURL} width={100} height={150} />
+                </div>}
+            </div>
+        </div>
+    )
+}
+
+export default Devices;