Merge pull request #157 from pipelines-lol/discover-pages

Page Navigation!
pipelines-lol · Apr 11, 2024 · 71fe637 · 71fe637
2 parents 9bddd15 + 13e0539
commit 71fe637
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/client/src/pages/Discover.js b/client/src/pages/Discover.js
@@ -4,35 +4,69 @@ import { PipelineCard } from '../components/PipelineCard'
 import { HOST } from '../util/apiRoutes'
 import { fetchWithAuth } from '../util/fetchUtils'
 
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
 // components
 import Loading from './Loading'
 
 function Discover() {
     const [profiles, setProfiles] = useState([])
+    const [currentProfiles, setCurrentProfiles] = useState([])
     const [loading, setLoading] = useState(false)
 
+    const [currentPage, setCurrentPage] = useState(1)
+    const PROFILES_PER_PAGE = 12
+
     const generateProfiles = async () => {
-        const size = 24
         setLoading(true)
 
         try {
             const data = await fetchWithAuth({
-                url: `${HOST}/api/pipeline/random/${size}`,
+                url: `${HOST}/api/pipeline/random`,
                 method: 'GET',
             })
 
             setProfiles([...data])
+            getPageProfiles(1, data) // get the profiles for the first page
         } catch (error) {
             console.error('Error:', error.message)
         } finally {
             setLoading(false)
         }
     }
 
+    const getPageProfiles = (page, profiles) => {
+        const startIndex = (page - 1) * PROFILES_PER_PAGE
+        let endIndex = startIndex + PROFILES_PER_PAGE
+
+        // Ensure endIndex does not exceed the length of profiles
+        endIndex = Math.min(endIndex, profiles.length)
+
+        const slicedProfiles = profiles.slice(startIndex, endIndex)
+        setCurrentProfiles(slicedProfiles)
+    }
+
     useEffect(() => {
         generateProfiles()
     }, [])
 
+    // page navigation
+    const nextPage = () => {
+        if (profiles && currentPage < profiles.length / PROFILES_PER_PAGE) {
+            const newPage = currentPage + 1
+            getPageProfiles(newPage, profiles)
+            setCurrentPage(newPage)
+        }
+    }
+
+    const previousPage = () => {
+        if (currentPage > 1) {
+            const newPage = currentPage - 1
+            getPageProfiles(newPage, profiles)
+            setCurrentPage(newPage)
+        }
+    }
+
     if (loading) {
         return <Loading />
     }
@@ -52,13 +86,15 @@ function Discover() {
                         borderTop: '1px solid rgba(2, 101, 172, 0.3)',
                     }}
                 >
+                    {/* Header */}
                     <h1 className="mx-16 mt-16 text-4xl font-light text-pipelines-gray-100 md:mx-20 md:w-4/6 md:text-5xl">
                         Discover The Pipelines of Engineers
                         <div className="mt-4 whitespace-nowrap font-semibold text-pipeline-blue-200 underline underline-offset-8">
                             Around the World
                         </div>
                     </h1>
 
+                    {/* Bouncing Arrow */}
                     <div className="translate-y-4 transform">
                         <svg
                             className="mt-8 h-12 animate-bounce text-pipeline-blue-200"
@@ -73,8 +109,10 @@ function Discover() {
                         </svg>
                     </div>
                 </div>
-                <div className="grid min-h-96 w-full grid-cols-1 overflow-y-scroll border-b-[0.5px] border-pipeline-blue-200 bg-pipelines-gray-100/10 bg-opacity-95 pb-12  pt-10 sm:grid-cols-2 sm:gap-2 md:grid-cols-3 md:gap-4 lg:grid-cols-4">
-                    {profiles.map((profile) => (
+
+                {/* Profile Display */}
+                <div className="overflow-y-scrollpt-10 grid min-h-96 w-full grid-cols-1 bg-pipelines-gray-100/10 px-10 pt-10 sm:grid-cols-2 sm:gap-2 sm:px-2 md:grid-cols-3 md:gap-4 md:px-4 lg:grid-cols-4">
+                    {currentProfiles.map((profile) => (
                         <div
                             key={`profile_${profile._id}`}
                             className="mb-5 bg-zinc-800 p-7 sm:mb-0 sm:rounded-md"
@@ -92,6 +130,19 @@ function Discover() {
                         </div>
                     ))}
                 </div>
+
+                {/* Page Navigation */}
+                <div className="flex w-full flex-row items-center justify-center gap-8 border-b-[0.5px] border-pipeline-blue-200 bg-pipelines-gray-100/10 bg-opacity-95 pb-12  pt-10">
+                    <button onClick={previousPage}>
+                        <ArrowLeft />
+                    </button>
+
+                    <h1>{currentPage}</h1>
+
+                    <button onClick={nextPage}>
+                        <ArrowRight />
+                    </button>
+                </div>
             </div>
         </div>
     )

diff --git a/server/controllers/pipelineController.js b/server/controllers/pipelineController.js
@@ -183,10 +183,14 @@ const getMultiplePipelinesByCompany = async (req, res) => {
 const getRandomPipelines = async (req, res) => {
   const { size } = req.params;
 
-  const randomProfiles = await Profile.aggregate([
-    { $match: { created: true, "pipeline.0": { $exists: true } } },
-    { $sample: { size: Number(size) } },
-  ]);
+  let query = [{ $match: { created: true, "pipeline.0": { $exists: true } } }];
+
+  // If size is provided, include $sample stage
+  if (size) {
+    query.push({ $sample: { size: Number(size) } });
+  }
+
+  const randomProfiles = await Profile.aggregate(query);
 
   res.status(200).json(randomProfiles);
 };

diff --git a/server/routes/pipelines.js b/server/routes/pipelines.js
@@ -29,6 +29,7 @@ read.get("/search/university/:university", getPipelinesByUniversity);
 read.get("/search/multi", getMultiplePipelinesByCompany);
 
 // GET random pipelines
+read.get("/random", getRandomPipelines);
 read.get("/random/:size", getRandomPipelines);
 
 // UPDATE (remove) experience from pipeline