add JourneyCard component

MohamedNasif · Dec 30, 2022 · aa97187 · aa97187
1 parent 8eae13a
commit aa97187
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 39 deletions.
diff --git a/client/src/components/JourneyCard.jsx b/client/src/components/JourneyCard.jsx
@@ -0,0 +1,24 @@
+function JourneyCard(props) {
+  const { journey } = props
+
+  return (
+    <div className='border rounded-lg p-3'>
+      <p>
+        <span className=''>Departure:</span> <span className='font-bold'>{journey.departureStationName}</span>
+      </p>
+
+      <p>
+        <span className=''>Return:</span> <span className='font-bold'>{journey.returnStationName}</span>
+      </p>
+
+      <p>
+        <span className=''>Distance:</span> <span className='font-bold'>{journey.distance}</span> meters
+      </p>
+
+      <p>
+        <span className=''>Duration:</span> <span className='font-bold'>{journey.duration}</span> minutes
+      </p>
+    </div>
+  )
+}
+export default JourneyCard
diff --git a/client/src/pages/JourneysPage.jsx b/client/src/pages/JourneysPage.jsx
@@ -1,27 +1,6 @@
 import React from 'react' // I import like that bc I prefer to "namespace" my hooks
 import Layout from '../components/Layout'
-
-// const journeys = [
-//   {
-//     departureStationName: 'Some station',
-//     returnStationName: 'some other station',
-//     distance: 1203,
-//     duration: 10
-//   },
-//   {
-//     departureStationName: 'Another station',
-//     returnStationName: 'home station',
-//     distance: 2203,
-//     duration: 22
-//   },
-//   {
-//     departureStationName: 'yet another station',
-//     returnStationName: 'and another one',
-//     distance: 3203,
-//     duration: 34
-//   }
-// ]
-
+import JourneyCard from '../components/JourneyCard'
 
 function JourneysPage() {
   const [journeys, setJourneys ] = React.useState([])
@@ -43,22 +22,8 @@ function JourneysPage() {
           <h1 className='text-4xl text-center py-4'>Journeys</h1>
           <ul className='space-y-4 px-4 my-4'>
             {journeys && journeys.length > 0 && journeys.map(j => (
-              <li className='border rounded-lg p-3' key={j._id}>
-                <p>
-                  <span className=''>Departure:</span> <span className='font-bold'>{j.departureStationName}</span>
-                </p>
-
-                <p>
-                  <span className=''>Return:</span> <span className='font-bold'>{j.returnStationName}</span>
-                </p>
-
-                <p>
-                  <span className=''>Distance:</span> <span className='font-bold'>{j.distance}</span> meters
-                </p>
-
-                <p>
-                  <span className=''>Duration:</span> <span className='font-bold'>{j.duration}</span> minutes
-                </p>
+              <li key={j._id}>
+                <JourneyCard journey={j} />
               </li>
             ))}
           </ul>

diff --git a/server/routes/journeys.js b/server/routes/journeys.js
@@ -6,6 +6,9 @@ const router = express.Router()
 router.get('/journeys', getJourneys)
 
 async function getJourneys(req, res) {
+  const page = parseInt(req.query.page)
+  const journeysPerPage = 20
+
   const result = await db
     .collection('journeys')
     .find(
@@ -19,7 +22,8 @@ async function getJourneys(req, res) {
         },
       },
     )
-    .limit(100)
+    .skip(page === 1 ? 0 : (page - 1) * journeysPerPage)
+    .limit(journeysPerPage)
     .toArray()
   // console.log(result)   // testing
   res.status(200).json(result)