From e525d0ec1e8f3fc920d49fe78f29ab68ca409980 Mon Sep 17 00:00:00 2001 From: Caitlin Kunchur <67437371+ckunchur@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:48:28 -0700 Subject: [PATCH] Caitlin fixes (#93) --- package-lock.json | 54 +-------- package.json | 6 +- src/App.js | 4 + src/components/AllRecordsList/index.jsx | 142 ++++++++++++++++++++++++ src/components/ECGList/sortableList.js | 20 ++-- src/components/Header/index.js | 14 ++- src/components/PatientList/index.js | 12 +- 7 files changed, 184 insertions(+), 68 deletions(-) create mode 100644 src/components/AllRecordsList/index.jsx diff --git a/package-lock.json b/package-lock.json index 8b98c40..2824f02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "0.1.0", "dependencies": { "@emotion/react": "^11.10.6", - "@emotion/styled": "^11.11.0", - "@firebase/firestore": "^4.0.0", - "@mui/material": "^5.14.0", + "@emotion/styled": "^11.10.6", + "@firebase/firestore": "^3.8.4", + "@mui/material": "^5.13.6", "@mui/x-data-grid": "^6.10.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", @@ -2567,9 +2567,9 @@ } }, "node_modules/@firebase/firestore": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.0.0.tgz", - "integrity": "sha512-ds4sjGefmJaxkxTT39BoRgmrjfHWBgrnSku69lTwVEPtBF+KqY01iheAEXuLFLQeb1Wu3eKxgZnWIrUYjbh6NA==", + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.13.0.tgz", + "integrity": "sha512-NwcnU+madJXQ4fbLkGx1bWvL612IJN/qO6bZ6dlPmyf7QRyu5azUosijdAN675r+bOOJxMtP1Bv981bHBXAbUg==", "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", @@ -2602,27 +2602,6 @@ "@firebase/app-compat": "0.x" } }, - "node_modules/@firebase/firestore-compat/node_modules/@firebase/firestore": { - "version": "3.13.0", - "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.13.0.tgz", - "integrity": "sha512-NwcnU+madJXQ4fbLkGx1bWvL612IJN/qO6bZ6dlPmyf7QRyu5azUosijdAN675r+bOOJxMtP1Bv981bHBXAbUg==", - "dependencies": { - "@firebase/component": "0.6.4", - "@firebase/logger": "0.4.0", - "@firebase/util": "1.9.3", - "@firebase/webchannel-wrapper": "0.10.1", - "@grpc/grpc-js": "~1.7.0", - "@grpc/proto-loader": "^0.6.13", - "node-fetch": "2.6.7", - "tslib": "^2.1.0" - }, - "engines": { - "node": ">=10.10.0" - }, - "peerDependencies": { - "@firebase/app": "0.x" - } - }, "node_modules/@firebase/firestore-types": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.5.1.tgz", @@ -9563,27 +9542,6 @@ "@firebase/util": "1.9.3" } }, - "node_modules/firebase/node_modules/@firebase/firestore": { - "version": "3.13.0", - "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.13.0.tgz", - "integrity": "sha512-NwcnU+madJXQ4fbLkGx1bWvL612IJN/qO6bZ6dlPmyf7QRyu5azUosijdAN675r+bOOJxMtP1Bv981bHBXAbUg==", - "dependencies": { - "@firebase/component": "0.6.4", - "@firebase/logger": "0.4.0", - "@firebase/util": "1.9.3", - "@firebase/webchannel-wrapper": "0.10.1", - "@grpc/grpc-js": "~1.7.0", - "@grpc/proto-loader": "^0.6.13", - "node-fetch": "2.6.7", - "tslib": "^2.1.0" - }, - "engines": { - "node": ">=10.10.0" - }, - "peerDependencies": { - "@firebase/app": "0.x" - } - }, "node_modules/flat-cache": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", diff --git a/package.json b/package.json index 40fc5d2..dfe53ce 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "private": true, "dependencies": { "@emotion/react": "^11.10.6", - "@emotion/styled": "^11.11.0", - "@firebase/firestore": "^4.0.0", - "@mui/material": "^5.14.0", + "@emotion/styled": "^11.10.6", + "@firebase/firestore": "^3.8.4", + "@mui/material": "^5.13.6", "@mui/x-data-grid": "^6.10.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", diff --git a/src/App.js b/src/App.js index 240eebe..1a8f26a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import './App.css'; import Container from 'react-bootstrap/Container'; import PatientList from './components/PatientList'; import ECGList from './components/ECGList'; +import AllRecordsList from './components/AllRecordsList'; import Login from './components/Login'; import Header from './components/Header'; import ForgotPassword from './components/ForgotPassword' @@ -20,6 +21,9 @@ function App() { }> } /> + }> + } /> + }> } /> diff --git a/src/components/AllRecordsList/index.jsx b/src/components/AllRecordsList/index.jsx new file mode 100644 index 0000000..8ff498e --- /dev/null +++ b/src/components/AllRecordsList/index.jsx @@ -0,0 +1,142 @@ +// over all patients, get all observations +// row, button to link to patient's page with clicked ecg showing +// need to set up new route with url param containing record id +// table: first nane, last name, date, +import { useState, useEffect } from 'react'; +import { getDocs, collection } from 'firebase/firestore'; +import { Link } from 'react-router-dom'; +import { DataGrid } from '@mui/x-data-grid'; +import { db } from '../../firebase'; +import { Button } from '@mui/material'; + +export default function AllRecordsList() { + const [recordsList, setRecordsList] = useState([]); + const [loading, setLoading] = useState(false); + + const dateToHumanReadable = (date) => { + const humanReadableDate = new Date(date).toLocaleDateString( + 'en-us', + { + year: 'numeric', + month: 'long', + day: 'numeric', + timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, + hour: '2-digit', + minute: '2-digit' + } + ) + return humanReadableDate; + } + + + const columns = [ + { field: 'firstName', headerName: 'First Name', flex: 1}, + { field: 'lastName', headerName: 'Last Name', flex: 1}, + { field: 'date', headerName: 'Date', flex: 2 }, + { field: 'watchDiagnosis', headerName: 'Watch Diagnosis', flex: 2 }, + // { field: 'heartRate', headerName: 'Average Heart Rate (bpm)', flex: 1 }, + { + field: 'records', + headerName: '', + flex: 2, + renderCell: (params) => { + console.log("params", params.row); // Log the params object to the console + + return ( + + + + ); + } + }, + ]; + + const rows = + recordsList.map((record) => ( + { + id: record.id, + userID: record.userID, + firstName: record.firstName, + lastName: record.lastName, + date: dateToHumanReadable(record.effectivePeriod.start), + watchDiagnosis: record.component[2].valueString, + // heartRate: record.component[3].valueQuantity.value + + })); + + useEffect(() => { + const getRecords = async () => { + setLoading(true); + const patientsRef = collection(db, "users"); + const patientsSnapshot = await getDocs(patientsRef); + const promises = []; + + patientsSnapshot.forEach((doc) => { + const patientId = doc.id; + const observationsRef = collection(db, "users", patientId, "Observation"); + const promise = getDocs(observationsRef) + .then((observationsSnapshot) => { + const results = []; + observationsSnapshot.forEach((observationDoc) => { + const observationData = observationDoc.data(); + const userData = doc.data(); // User data containing first and last name + + // Add first and last name to the observation data + const observationWithUserData = { + ...observationData, + firstName: userData.firstName, + lastName: userData.lastName, + userID: userData.id, + }; + + results.push(observationWithUserData); + }); + return results; + }); + promises.push(promise); + }); + + const resultsArray = await Promise.all(promises); + const mergedResults = resultsArray.flat(); + console.log(mergedResults[0]); + + mergedResults.sort((a, b) => { + const dateA = new Date(a.effectivePeriod.start); + const dateB = new Date(b.effectivePeriod.start); + if (dateA < dateB) return 1; + if (dateB < dateA) return -1; + return 0; + }); + + setRecordsList(mergedResults); + setLoading(false); + }; + + getRecords(); + + + }, []); + + console.log("first record", recordsList[0]); + return ( + loading ? +

Loading ...

+ : +
+ +
+ ); +} + diff --git a/src/components/ECGList/sortableList.js b/src/components/ECGList/sortableList.js index f68ee0a..1e04247 100644 --- a/src/components/ECGList/sortableList.js +++ b/src/components/ECGList/sortableList.js @@ -5,7 +5,8 @@ import { useParams } from "react-router-dom"; import Dashboard from '../Dashboard'; import { Container } from 'react-bootstrap'; import { DataGrid } from '@mui/x-data-grid'; -import { Typography, Button } from '@mui/material'; +import { Button } from '@mui/material'; + export default function ECGList() { const [ecgList, setEcgList] = useState([]); @@ -177,15 +178,14 @@ export default function ECGList() { ) }, - { - field: 'savedDiagnosis', headerName: 'Saved Diagnosis)', flex: 2, renderCell: (params) => ( - - {ecgList[params.rowIndex].physician ? ( - ecgList[params.rowIndex].physician - ) : "" } - - ) - } + + // { + // field: 'savedDiagnosis', headerName: 'Saved Diagnosis)', flex: 2, renderCell: (params) => ( + // + // {ecgList[params.rowIndex].physician} : {ecgList[params.rowIndex].physicianAssignedDiagnosis} + // + // ) + // } ]; const rows = ecgList.map((ecg) => ( diff --git a/src/components/Header/index.js b/src/components/Header/index.js index c30858d..289727f 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -3,6 +3,7 @@ import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; import { useAuth } from '../../contexts/AuthContext'; import logo from '../paws-logo.svg'; +import { Stack } from '@mui/material'; export default function Header() { const { logout, currentUser } = useAuth(); @@ -24,15 +25,22 @@ export default function Header() { {currentUser && <> + + Patients + + + + +
{/* Use ml-auto to align the content to the right */} +
} diff --git a/src/components/PatientList/index.js b/src/components/PatientList/index.js index 14c218b..15aee1d 100644 --- a/src/components/PatientList/index.js +++ b/src/components/PatientList/index.js @@ -17,13 +17,17 @@ export default function PatientList() { field: 'records', headerName: '', flex: 0.5, - renderCell: (params) => ( - + renderCell: (params) => { + console.log("patient row params", params.row); // Log the params object to the console + + return ( + - - ), + + ); + }, }, ];