hpos-web/src/components/Devices.js

import React, { useEffect, useState, useRef } from 'react';
import { query, collection, onSnapshot } from 'firebase/firestore';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import moment from 'moment';
import Select from 'react-select';

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 [showGraph, setShowGraph] = useState(false);
    const selectDateDropdownRef = useRef();
    const selectTestDropdownRef = useRef();

    const changeDevice = ({ value }) => {
        setDevice(value);
        setTestDate(null);
        setCurTest(null);
        selectDateDropdownRef.current?.setValue("");
        selectTestDropdownRef.current?.setValue("");
        setDays([...new Set(allTests
            .filter((x) => x.deviceSerialNumber === value)
            .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
            .sort()
            .reverse());
    }

    const changeTestDate = ({ value }) => {
        setTestDate(value);
        selectTestDropdownRef.current?.setValue("");
        setCurTest(null);
        setCurTestData(null);
        setShowGraph(false);
        setTests(allTests
            .filter((x) => x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day')))
            .map(x => x._id)
            .sort());
    }

    const changeTest = ({ value }) => {
        setCurTestData(null); setShowGraph(false);
        setCurTest(value);
    }

    const showTestGraph = () => {
        if (!curTest) alert('Select a test');
        setCurTestData(allTests.find(x => x._id === curTest));
        setShowGraph(true);
    }

    const toggleShowGraph = () => {
        if (!curTestData) {
            showTestGraph();
        } else {
            setCurTest(null); setCurTestData(null);
        }
    }

    useEffect(() => {
        if (!allTests) {
            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);
                });
                const groups = [...testDevices];
                setDevices(groups);
                setAllTests(hposTests);
            });

            return () => unsub;
        }
    }, [curTestData, curTest, device, testDate, allTests]);

    return (
        <div className="devices-page">
            <div className='insights-title'>Insights</div>
            <div className='dropdown-group'>
                {/* <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" /> */}

                <Select
                    className='device-dropdown'
                    defaultValue={{ label: "Select a device", value: "Select a device" }}
                    options={devices.map(x => { return { value: x, label: x }; })}
                    menuPlacement='auto'
                    maxMenuHeight={250}
                    menuShouldScrollIntoView={true}
                    onChange={changeDevice} />
                <Select
                    ref={selectDateDropdownRef}
                    className='day-dropdown'
                    defaultValue={{ label: "Select a test date", value: "Select a test date" }}
                    options={days.map(x => { return { value: x, label: x }; })}
                    menuPlacement='auto'
                    maxMenuHeight={250}
                    menuShouldScrollIntoView={true}
                    onChange={changeTestDate} />
                <Select
                    ref={selectTestDropdownRef}
                    className='test-dropdown'
                    defaultValue={{ label: "Select a test", value: "Select a test" }}
                    options={tests.map(x => { return { value: x, label: x }; })}
                    menuPlacement='auto'
                    maxMenuHeight={220}
                    menuShouldScrollIntoView={true}
                    onChange={changeTest} />

                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{curTestData ? 'Clear' : 'Show'}</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, click show button to render graph.</div>}
                {curTestData?.csvPath && curTestData?.testType !== 'HEMOCUBE' && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}

                {curTestData && <div className='test-details'>
                    <table>
                        <tr>
                            <th>key</th>
                            <th>value</th>
                        </tr>
                        <tr>
                            <td>device</td> <td>{curTestData?.deviceId}</td>
                        </tr>
                        <tr>
                            <td>kit</td> <td>{curTestData?.kitSerial}</td>
                        </tr>
                        <tr>
                            <td>test time</td> <td>{curTestData?.testTime}</td>
                        </tr>
                        <tr>
                            <td>ratio</td> <td>{curTestData?.resultRatio}</td>
                        </tr>
                        <tr>
                            <td>result</td> <td>{curTestData?.result}</td>
                        </tr>
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>calculatedRatio</td>
                            <td>{curTestData?.calculatedRatio}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>deviceRatio</td>
                            <td>{curTestData?.deviceRatio}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>green led Average</td>
                            <td>{curTestData?.led1Average}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>blue led Average</td>
                            <td>{curTestData?.led2Average}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>blue led Average</td>
                            <td>{curTestData?.led2Average}</td>
                        </tr>}
                    </table>
                    {/* <img src={curTestData?.userImageURL} width={100} height={150} /> */}
                </div>}
            </div>
        </div>
    )
}

export default Devices;