48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
|
import { query, collection, onSnapshot, where, orderBy } from 'firebase/firestore';
|
|
|
|
import './Samples.css';
|
|
import db from '../firebase';
|
|
import moment from 'moment';
|
|
|
|
const Samples = () => {
|
|
const [samples, setSamples] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (!samples.length) {
|
|
const q = query(collection(db, "testData"), where("testTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("testTime", "desc"));
|
|
|
|
const unsub = onSnapshot(q, (querySnapshot) => {
|
|
const samples = [];
|
|
querySnapshot.forEach((document) => {
|
|
console.log(document.data());
|
|
const alert = document.data();
|
|
samples.push(alert);
|
|
});
|
|
setSamples(samples);
|
|
});
|
|
|
|
return () => unsub;
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className='samples-heading'><h3>Samples page for denovix useage</h3></div>
|
|
{samples.length ? (
|
|
samples.map((alert, index) => (
|
|
<div key={index} className='samples-card'>
|
|
<div tabIndex={index}><strong>{alert._id}</strong></div>
|
|
<p className='sample-time'>{alert.testTime}</p>
|
|
<p className='sample-time-ago'>{moment(alert.testTime).fromNow()}</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className='no-samples-message'>Samples will appear as in when a test is recorded</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Samples;
|