feat: Implement the new interface to jobs, and update the pagination

Author: GiovanniDonati

frontend/src/domains/jobs/presentation/components/JobsFiltersCard.tsx

@@ -1,7 +1,7 @@
 import { Badge } from "@/shared/ui/badge";
 import { Card, CardContent } from "@/shared/ui/card";
 import { Input } from "@/shared/ui/input";
-import type { JobFile, JobsMeta } from "@/domains/jobs/domain/job.types";
+import type { JobsPaginationMeta } from "@/domains/jobs/application/useJobsData";
 import {
   useMemo,
   useState,
@@ -13,7 +13,6 @@ import {
 import {
   FiBriefcase,
   FiCheck,
-  FiFileText,
   FiFilter,
   FiPlus,
   FiSearch,
@@ -30,10 +29,7 @@ interface JobsFiltersCardProps {
   onRemoveFilter: (filterToRemove: string) => void;
   onClearFilters: () => void;
   keywords: string[];
-  selectedFile: string;
-  setSelectedFile: Dispatch<SetStateAction<string>>;
-  files: JobFile[];
-  meta: JobsMeta;
+  meta: JobsPaginationMeta;
   actions?: ReactNode;
 }
 
@@ -56,11 +52,7 @@ export function JobsFiltersCard({
   onRemoveFilter,
   onClearFilters,
   keywords,
-  selectedFile,
-  setSelectedFile,
-  files,
   meta,
-  actions,
 }: JobsFiltersCardProps) {
   const [seeKeywordsModal, setSeeKeywordsModal] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -99,7 +91,10 @@ export function JobsFiltersCard({
     }
 
     setSearch((current) => {
-      const currentTerms = getSelectedFilters(current, []);
+      const currentTerms = current
+        .split(/[,;/]+/)
+        .map((item) => item.trim())
+        .filter(Boolean);
 
       if (currentTerms.includes(nextTerm)) {
         return current;
@@ -132,7 +127,6 @@ export function JobsFiltersCard({
                 <FiPlus className="h-4 w-4" />
               </button>
             </form>
-            <div className="flex items-center gap-2">{actions}</div>
           </div>
 
           <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
@@ -151,28 +145,7 @@ export function JobsFiltersCard({
                 ))}
               </select>
 
-              <select
-                aria-label="Selecionar arquivo"
-                className="h-12 min-w-[180px] rounded-2xl border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-[#14AE5C]/40 dark:border-[#35506f] dark:bg-[#0b1527] dark:text-slate-100"
-                value={selectedFile}
-                onChange={(event) => setSelectedFile(event.target.value)}
-              >
-                {files.map((file) => (
-                  <option key={file.file} value={file.file}>
-                    {file.file}
-                  </option>
-                ))}
-              </select>
-
               <div>
-                <Badge
-                  variant="secondary"
-                  className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100"
-                >
-                  <FiFileText className="h-3.5 w-3.5" />
-                  {meta.file || "Sem arquivo"}
-                </Badge>
-
                 <Badge className="gap-1.5 rounded-full bg-[#0c6b35] px-3 py-1 text-xs text-white">
                   <FiBriefcase className="h-3.5 w-3.5" />
                   {meta.total} vagas
@@ -239,4 +212,4 @@ export function JobsFiltersCard({
       )}
     </>
   );
-}
+}

frontend/src/domains/jobs/presentation/components/JobsTableCard.tsx

@@ -15,7 +15,8 @@ import {
   TableRow,
 } from "@/shared/ui/table";
 import { cn } from "@/shared/lib/utils";
-import type { Job, JobsMeta } from "@/domains/jobs/domain/job.types";
+import type { Job } from "@/domains/jobs/domain/job.types";
+import type { JobsPaginationMeta } from "@/domains/jobs/application/useJobsData";
 import { useState } from "react";
 import {
   FiCheckSquare,
@@ -25,12 +26,12 @@ import {
 } from "react-icons/fi";
 
 interface JobsTableCardProps {
-  meta: JobsMeta;
+  meta: JobsPaginationMeta;
   filteredJobs: Job[];
   paginatedJobs: Job[];
   loading: boolean;
   error: string;
-  formatDate: (timestamp: JobsMeta["modifiedAt"]) => string;
+  formatDate: () => string;
   currentPage: number;
   totalPages: number;
   pageSize: number;
@@ -80,8 +81,8 @@ function getPaginationItems(
 
 function getJobId(job: Job, index: number) {
   return (
-    job.link?.trim() ||
-    [job.titulo, job.empresa, job.local, String(index)]
+    job.url?.trim() ||
+    [job.title, job.company, job.location, String(index)]
       .filter(Boolean)
       .join("|")
   );
@@ -130,7 +131,6 @@ export function JobsTableCard({
   paginatedJobs,
   loading,
   error,
-  formatDate,
   currentPage,
   totalPages,
   pageSize,
@@ -139,7 +139,7 @@ export function JobsTableCard({
 }: JobsTableCardProps) {
   const [spamMarks, setSpamMarks] = useState<Record<string, boolean>>({});
   const [readMarks, setReadMarks] = useState<Record<string, boolean>>({});
-  const resultsLabel = getResultsLabel(filteredJobs.length);
+  const resultsLabel = getResultsLabel(meta.total);
   const paginationItems = getPaginationItems(currentPage, totalPages);
 
   return (
@@ -177,28 +177,28 @@ export function JobsTableCard({
             <TableBody>
               {paginatedJobs.map((job, index) => {
                 const jobId = getJobId(job, index);
-                const keywords = getKeywordTags(job.palavra);
+                const keywords = getKeywordTags(job.keyword);
                 const isSpamMarked = Boolean(spamMarks[jobId]);
                 const isReadMarked = Boolean(readMarks[jobId]);
 
                 return (
                   <TableRow key={jobId}>
                     <TableCell className="font-medium">
-                      {job.link ? (
+                      {job.url ? (
                         <a
-                          href={job.link}
+                          href={job.url}
                           target="_blank"
                           rel="noreferrer"
                           className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]"
                         >
-                          {job.titulo || "Abrir vaga"}
+                          {job.title || "Abrir vaga"}
                         </a>
                       ) : (
-                        job.titulo || "-"
+                        job.title || "-"
                       )}
                     </TableCell>
-                    <TableCell>{job.empresa || "-"}</TableCell>
-                    <TableCell>{job.local || "-"}</TableCell>
+                    <TableCell>{job.company || "-"}</TableCell>
+                    <TableCell>{job.location || "-"}</TableCell>
                     <TableCell>
                       {keywords.length > 0 ? (
                         <div className="flex flex-wrap gap-1 text-sm text-foreground/85">
@@ -220,7 +220,7 @@ export function JobsTableCard({
                     </TableCell>
                     <TableCell className="text-center align-middle">
                       <StatusToggleButton
-                        label={`Marcar vaga como spam para ${job.titulo || "vaga"}`}
+                        label={`Marcar vaga como spam para ${job.title || "vaga"}`}
                         pressed={isSpamMarked}
                         activeClassName="text-[#0c6b35]"
                         onClick={() =>
@@ -233,7 +233,7 @@ export function JobsTableCard({
                     </TableCell>
                     <TableCell className="text-center align-middle">
                       <StatusToggleButton
-                        label={`Marcar vaga como lida para ${job.titulo || "vaga"}`}
+                        label={`Marcar vaga como lida para ${job.title || "vaga"}`}
                         pressed={isReadMarked}
                         activeClassName="text-[#0c6b35]"
                         onClick={() =>
@@ -277,7 +277,6 @@ export function JobsTableCard({
         <div className="mt-4 border-t border-border/60 pt-4">
           <p className="text-sm text-muted-foreground">
             <span className="font-medium text-foreground">{resultsLabel}</span>
-            <span> (Atualizado em {formatDate(meta.modifiedAt)})</span>
           </p>
 
           <div className="mt-3 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
@@ -360,7 +359,7 @@ export function JobsTableCard({
                 onClick={() =>
                   onPageChange(Math.min(totalPages, currentPage + 1))
                 }
-                disabled={currentPage === totalPages}
+                disabled={currentPage === totalPages || totalPages === 0}
                 className="flex h-9 min-w-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
               >
                 <FiChevronRight className="h-4 w-4" />
@@ -371,4 +370,4 @@ export function JobsTableCard({
       </CardContent>
     </Card>
   );
-}
+}