Get last jobs in landing page

Juanies · Jun 19, 2024 · 92a8423 · 92a8423
1 parent 8d1a6d2
commit 92a8423
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 37 deletions.
diff --git a/src/app/api/jobs/route.tsx b/src/app/api/jobs/route.tsx
@@ -6,19 +6,30 @@ export async function GET(req: NextRequest) {
     const { searchParams } = new URL(req.url);
     const page = parseInt(searchParams.get('page') || '1');
     const limit = parseInt(searchParams.get('limit') || '6');
+    const latest = searchParams.get('latest') === 'true';
 
-    const offset = (page - 1) * limit;
+    let jobs;
 
-    const jobs = await sql`
-      SELECT * 
-      FROM oferta 
-      ORDER BY id DESC
-      LIMIT ${limit} 
-      OFFSET ${offset}
-    `;
+    if (latest) {
+      jobs = await sql`
+        SELECT * 
+        FROM oferta 
+        ORDER BY id DESC
+        LIMIT ${limit}
+      `;
+    } else {
+      const offset = (page - 1) * limit;
+      jobs = await sql`
+        SELECT * 
+        FROM oferta 
+        ORDER BY id DESC
+        LIMIT ${limit} 
+        OFFSET ${offset}
+      `;
+    }
 
     return NextResponse.json(jobs);
   } catch (error) {
-    return NextResponse.json({ error: error }, { status: 400 });
+    return NextResponse.json({ error }, { status: 400 });
   }
 }
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -0,0 +1,7 @@
+export default function Footer(){
+  return(
+    <footer>
+
+    </footer>
+  )
+}
diff --git a/src/app/components/SectionCardsJob.tsx b/src/app/components/SectionCardsJob.tsx
@@ -3,28 +3,29 @@ import React, { useState, useEffect } from 'react';
 import JobCard from './JobCard';
 
 interface Job {
-id: number;
-imagen: string;
-usuario: string;
-pago: string;
-descripcion: string;
+  id: number;
+  imagen: string;
+  usuario: string;
+  pago: string;
+  descripcion: string;
 }
 
 interface Props {
   limits?: number;
   pages?: boolean;
 }
 
-export default function SectionCardsJob({ limits, pages } : Props)  {
-  const [jobs, setJobs] = useState([]);
+export default function SectionCardsJob({ limits, pages }: Props) {
+  const [jobs, setJobs] = useState<Job[]>([]);
   const [page, setPage] = useState(1);
-  const [error, setError] = useState("");
-   const limit = limits ?? 6;
-   const pageornot = pages ?? true;
+  const [error, setError] = useState<string>("");
+  const limit = limits ?? 6;
+  const pageOrNot = pages ?? true;
+
   useEffect(() => {
     const fetchJobs = async () => {
       try {
-        const res = await fetch(`/api/jobs?page=${page}&limit=${limit}`);
+        const res = await fetch(`/api/jobs?page=${page}&limit=${limit}&latest=${!pageOrNot}`);
         if (!res.ok) {
           throw new Error('Failed to fetch jobs');
         }
@@ -36,32 +37,28 @@ export default function SectionCardsJob({ limits, pages } : Props)  {
     };
 
     fetchJobs();
-  }, [page]);
-
-
+  }, [page, limit, pageOrNot]);
 
   return (
     <div className='mt-10'>
       {error && <p className="text-red-500">{error}</p>}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
         {jobs.map(job => (
-        <JobCard
-                key={job.id}
-                imageUrl={job.imagen}
-                username={job.usuario}
-                price={job.pago}
-                description={job.descripcion}
-              />
+          <JobCard
+            key={job.id}
+            imageUrl={job.imagen}
+            username={job.usuario}
+            price={job.pago}
+            description={job.descripcion}
+          />
         ))}
       </div>
-      {pageornot && (
+      {pageOrNot && (
         <div>
-        <button onClick={() => setPage(prev => Math.max(prev - 1, 1))}>Previous</button>
-        <button onClick={() => setPage(prev => prev + 1)}>Next</button>
-      </div>
+          <button onClick={() => setPage(prev => Math.max(prev - 1, 1))}>Previous</button>
+          <button onClick={() => setPage(prev => prev + 1)}>Next</button>
+        </div>
       )}
     </div>
   );
-};
-
-
+}