request time ago and sorted

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "firebase": "^9.14.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",

src/components/Request.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Button, Card } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import moment from 'moment'
 
 const Donar = ({ request }) => {
   // console.log(request)
@@ -20,6 +21,7 @@ const Donar = ({ request }) => {
     location,
     district,
     numManaged,
+    timestamp,
     // response,
   } = request
   return (
@@ -42,7 +44,12 @@ const Donar = ({ request }) => {
           Location: {location}, {district}
         </Card.Text>
         <Card.Text>Bag managed: {numManaged}</Card.Text>
-        {/* <Card.Text>Total response: {response.length}</Card.Text> */}
+        <Card.Text>
+          <small>{new Date(timestamp?.toDate()).toLocaleString()}</small>
+        </Card.Text>
+        <Card.Text>
+          <small>{moment(timestamp?.toDate()).fromNow()}</small>
+        </Card.Text>
       </Card.Body>
       <Link to={`/feed/${id}`}>
         <Button>Details</Button>

src/screens/LoginScreen.js

@@ -84,7 +84,7 @@ const LoginScreen = () => {
           district: '',
           lastDonation: '',
           response: 0,
-          timeStamp: serverTimestamp(),
+          createdAt: serverTimestamp(),
         })
 
         // now userInfo is in the database

src/screens/RegisterScreen.js

@@ -127,7 +127,7 @@ const RegisterScreen = () => {
           district: '',
           lastDonation: '',
           response: 0,
-          timeStamp: serverTimestamp(),
+          createdAt: serverTimestamp(),
         })
 
         // now userInfo is in the database

src/screens/RequestFeedScreen.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { collection, onSnapshot } from 'firebase/firestore'
+import { collection, onSnapshot, orderBy, query } from 'firebase/firestore'
 import { db } from '../firebase'
 import { Col, Form, Row } from 'react-bootstrap'
 import Loader from '../components/Loader'
@@ -12,8 +12,12 @@ const RequestFeedScreen = () => {
   const [error, setError] = useState(null)
 
   useEffect(() => {
+    const colRef = collection(db, 'requests')
+    // const q = query(colRef, orderBy('createdAt', 'desc'))
+    const q = query(colRef, orderBy('timestamp', 'desc'))
+
     const unsub = onSnapshot(
-      collection(db, 'requests'),
+      q,
       (snapShot) => {
         let list = []
 
@@ -22,11 +26,9 @@ const RequestFeedScreen = () => {
         })
         setRequests(list)
         setLoading(false)
-        // console.log(list)
       },
       (error) => {
         setError(error)
-        // console.log(error)
       }
     )
 

src/screens/RequestScreen.js

@@ -45,7 +45,7 @@ const RequestPage = () => {
         date,
         numManaged: 0,
         isManaged: false,
-        timestamp: serverTimestamp(),
+        createdAt: serverTimestamp(),
       })
       setProblem('')
       setBloodGroup('A+')