refactor code and check coverage

package.json

@@ -27,7 +27,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy": "npm run build && firebase deploy"
+    "deploy": "npm run build && firebase deploy",
+    "coverage": "react-scripts test --coverage"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -1,19 +1,17 @@
-import logo from './logo.png';
 import './App.css';
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 
-import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
+import { collection, onSnapshot, query } from "firebase/firestore";
 import Card from './components/Card';
 import db from './firebase';
 
 function App() {
-  const [mtests, setMtests] = useState([]);
   const [totalScreened, setTotalScreened] = useState(0);
   const [males, setMales] = useState(0);
   const [females, setFemales] = useState(0);
   const [normal, setNormal] = useState(0);
-  const [positives, setPositives] = useState(0);
+  // const [positives, setPositives] = useState(0);
   const [traits, setTraits] = useState(0);
   const [diseases, setDiseases] = useState(0);
   const [lastUpdate, setLastUpdate] = useState(moment());
@@ -43,6 +41,8 @@ function App() {
       setFemales(femaleCount);
       setLastUpdate(moment());
     });
+
+    return () => unsub;
   }, []);
 
   useEffect(() => {
@@ -68,34 +68,23 @@ function App() {
         }
       });
       setNormal(normalCount);
-      setPositives(traitCount + diseaseCount);
+      // setPositives(traitCount + diseaseCount);
       setTraits(traitCount);
       setDiseases(diseaseCount);
       setLastUpdate(moment());
     });
-  }, []);
 
-  async function getTests() {
+    return () => unsub;
-    try {
+  }, []);
-      const testDataCol = collection(db, 'testData');
-      const testDataSnapshot = await getDocs(testDataCol);
-      const testDataList = testDataSnapshot.docs.map(doc => doc.data());
-      console.log(testDataList);
-      setMtests(testDataList);
-      return testDataList;
-    } catch (err) {
-      // log error
-    }
-  }
 
   return (
     <div>
       <div class='dashboard-title'>
-        <img className="nscm-logo" src={require('./logo_nobg.png')} />
+        <img className="nscm-logo" src={require('./logo_nobg.png')} alt='img' />
         <div className='title-text'>HPOS Sickel Cell Test Dashboard</div>
-        <img className="gov-logo-1" src={require('./gov_logo2.png')} />
+        <img className="gov-logo-1" src={require('./gov_logo2.png')} alt='img' />
-        <img className="gov-logo" src={require('./gov_logo3.png')} />
+        <img className="gov-logo" src={require('./gov_logo3.png')} alt='img' />
-        <img className="gov-logo-3" src={require('./gov_logo4.png')} />
+        <img className="gov-logo-3" src={require('./gov_logo4.png')} alt='img' />
       </div>
 
       <div className='cards-container'>
@@ -113,17 +102,17 @@ function App() {
       </div>
 
       <div className='footer'>
-          <div className='last-update'>
+        <div className='last-update'>
-            Updated at: {moment(lastUpdate).format("DD-MM-YYYY hh:mm:ss a")}
+          Updated at: {moment(lastUpdate).format("DD-MM-YYYY hh:mm:ss a")}
-          </div>
-
-          <div className='developer' onClick={() => setDevMode(!devMode)}>
-            Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
-          </div>
-
-          {/* {devMode && 
-          <div>dev mode is on</div>} */}
         </div>
+
+        <div className='developer' onClick={() => setDevMode(!devMode)}>
+          Developed by <img className="dev-logo" alt='img' src={require('./smi-logo-120x120.webp')} /> ShanMukha
+        </div>
+
+        {/* {devMode && 
+          <div>dev mode is on</div>} */}
+      </div>
     </div>
   );
 }

src/App.test.js

@@ -3,6 +3,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/dashboard/i);
   expect(linkElement).toBeInTheDocument();
 });

src/components/DeviceGraph.js

@@ -1,28 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import * as d3 from 'd3';
-import axios from 'axios';
-import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
 
 import './DeviceGraph.css';
 import AbsorbanceGraph from './AbsorbanceGraph';
-import db from '../firebase';
 
-function DeviceGraph({url, show}) {
+function DeviceGraph({ url, show }) {
-    const [devices, setDevices] = useState([]);
-    const [hposTests, setHposTests] = useState(null);
-
-    async function getTests() {
-        try {
-            const testDataCol = collection(db, 'testData');
-            const testDataSnapshot = await getDocs(testDataCol);
-            const testDataList = testDataSnapshot.docs.map(doc => doc.data());
-            console.log(testDataList);
-            //   setHposTests(testDataList);
-            return testDataList;
-        } catch (err) {
-            // log error
-        }
-    }
 
     return (
         <div>

src/components/Devices.js

@@ -1,35 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
+import { query, collection, onSnapshot } from 'firebase/firestore';
-import * as _ from 'lodash';
 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 styles = {
-    menuList: (base) => ({
-        ...base,
-
-        "::-webkit-scrollbar": {
-            width: "4px",
-            height: "0px",
-        },
-        "::-webkit-scrollbar-track": {
-            background: "#f1f1f1"
-        },
-        "::-webkit-scrollbar-thumb": {
-            background: "#888"
-        },
-        "::-webkit-scrollbar-thumb:hover": {
-            background: "#555"
-        }
-    })
-};
-
 const Devices = () => {
     const [device, setDevice] = useState("Select a device");
     const [testDate, setTestDate] = useState("Select a test date");
@@ -42,14 +20,9 @@ const Devices = () => {
     const [showGraph, setShowGraph] = useState(false);
 
     const changeDevice = ({ value }) => {
-        console.log(value);
-        // console.log(event);
-
         setDevice(value);
         setDays([...new Set(allTests
-            .filter((x) => {
+            .filter((x) => x.deviceSerialNumber === value)
-                if (x.deviceSerialNumber === value) return x;
-            })
             .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
             .sort()
             .reverse());
@@ -61,9 +34,7 @@ const Devices = () => {
         setCurTestData(null);
         setShowGraph(false);
         setTests(allTests
-            .filter((x) => {
+            .filter((x) => x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day')))
-                if (x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day'))) return x;
-            })
             .map(x => x._id)
             .sort());
     }
@@ -99,17 +70,15 @@ const Devices = () => {
                     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, device, testDate]);
+    }, [curTestData, curTest, device, testDate, allTests]);
 
     return (
         <div className="devices-page">
@@ -123,7 +92,7 @@ const Devices = () => {
                 <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
                 <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
 
-                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')}></img>{curTestData ? 'Clear' : 'Show'}</button>
+                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')} alt='icon'></img>{curTestData ? 'Clear' : 'Show'}</button>
             </div>
 
             <div className='graph-person-conatiner'>

src/components/TestAnalytics.js

@@ -45,7 +45,6 @@ const TestAnalytics = () => {
     const [dailyResults, setDailyResults] = useState(null);
 
     const changeDevice = ({ value }) => {
-        console.log(value);
         // console.log(event);
 
         setDevice(value);

src/components/TestAnalyticsGraph.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
-import { sgg } from 'ml-savitzky-golay-generalized';
-import axios from 'axios';
 import moment from 'moment';
 
 import './DeviceGraph.css';
@@ -35,7 +33,7 @@ class TestAnalyticsGraph extends Component {
             .attr("height", height + margin.top + margin.bottom)
             .append("g").attr("transform",
                 "translate(" + margin.left + "," + margin.top + ")");
-        var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+        // var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
         // const options = {
         //     windowSize: 5,