Skip to content

Commit

Permalink
Caitlin fixes (#93)
Browse files Browse the repository at this point in the history
  • Loading branch information
ckunchur authored Aug 23, 2023
1 parent dbb41ec commit e525d0e
Show file tree
Hide file tree
Showing 7 changed files with 184 additions and 68 deletions.
54 changes: 6 additions & 48 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -20,6 +21,9 @@ function App() {
<Route exact path="/" element={<PrivateRoute />}>
<Route exact path="/" element={<PatientList />} />
</Route>
<Route exact path="/records" element={<PrivateRoute />}>
<Route exact path="/records" element={<AllRecordsList />} />
</Route>
<Route exact path="/ecglist/:patient" element={<PrivateRoute />}>
<Route exact path="/ecglist/:patient" element={<ECGList />} />
</Route>
Expand Down
142 changes: 142 additions & 0 deletions src/components/AllRecordsList/index.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<Link to={`/ecglist/${params.row.userID}`} state={{firstName: params.row.firstName, lastName: params.row.lastName}}>
<Button size="small" variant="contained" sx={{ width: 200, margin: 2 }} style={{ backgroundColor: '#FF6758' }}>
View Record
</Button>
</Link>
);
}
},
];

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 ?
<h1>Loading ...</h1>
:
<div style={{ height: '100%', width: '90%', display: 'flex', flexDirection: 'column', marginTop: 12 }}>
<DataGrid
rows={rows}
columns={columns}
disableRowSelectionOnClick
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10 },
},
}}
pageSizeOptions={[5, 10]}
/>
</div>
);
}

20 changes: 10 additions & 10 deletions src/components/ECGList/sortableList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);
Expand Down Expand Up @@ -177,15 +178,14 @@ export default function ECGList() {
</Button>
)
},
{
field: 'savedDiagnosis', headerName: 'Saved Diagnosis)', flex: 2, renderCell: (params) => (
<Typography>
{ecgList[params.rowIndex].physician ? (
ecgList[params.rowIndex].physician
) : "" }
</Typography>
)
}

// {
// field: 'savedDiagnosis', headerName: 'Saved Diagnosis)', flex: 2, renderCell: (params) => (
// <Typography>
// {ecgList[params.rowIndex].physician} : {ecgList[params.rowIndex].physicianAssignedDiagnosis}
// </Typography>
// )
// }
];

const rows = ecgList.map((ecg) => (
Expand Down
14 changes: 11 additions & 3 deletions src/components/Header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -24,15 +25,22 @@ export default function Header() {
<Navbar.Collapse id="basic-navbar-nav">
{currentUser &&
<>
<Stack direction="row" spacing={2}>
<Nav className="me-auto">
<Nav.Link href="/">Patient List</Nav.Link>
</Nav>
<Nav.Link href="/">Patients</Nav.Link>
</Nav>
<Nav className="me-auto">
<Nav.Link href="/records">All Records</Nav.Link>
</Nav>
</Stack>

<div className="ml-auto"> {/* Use ml-auto to align the content to the right */}
<Nav>
<Nav.Link onClick={() => logout()}>

Log out
</Nav.Link>
</Nav>
</div>
</>
}
</Navbar.Collapse>
Expand Down
12 changes: 8 additions & 4 deletions src/components/PatientList/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,17 @@ export default function PatientList() {
field: 'records',
headerName: '',
flex: 0.5,
renderCell: (params) => (
<Link to={`/ecglist/${params.id}`} state={{ firstName: params.firstName, lastName: params.lastName }}>
renderCell: (params) => {
console.log("patient row params", params.row); // Log the params object to the console

return (
<Link to={`/ecglist/${params.id}`} state={{ firstName: params.firstName, lastName: params.lastName }}>
<Button size="small" variant="contained" sx={{ width: 200, margin: 2 }} style={{ backgroundColor: '#FF6758' }}>
View Records
</Button>
</Link>
),
</Link>
);
},
},
];

Expand Down

0 comments on commit e525d0e

Please sign in to comment.