Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR updates the frontend filtering UX to support selecting multiple keywords at once, refreshes UI styling/icons, and extends the jobs table to display keyword tags plus new “Spam”/“Lido” toggle columns.
Changes:
- Switch
keywordFilterfrom a single"all"|stringvalue to astring[](multi-select), with corresponding test updates. - Revamp
JobsFiltersCardUI (selected filter “chips”, manage/clear actions) and update modal copy (“Gerenciar filtros”). - Enhance
JobsTableCardto splitpalavrainto multiple visible tags and add per-row spam/read toggle state; addreact-iconsdependency.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| package-lock.json | Adds react-icons to the lockfile. |
| frontend/package.json | Adds react-icons dependency for new icons used in UI. |
| frontend/src/hooks/useJobsFiltering.ts | Changes keyword filtering state to string[] and updates filter logic. |
| frontend/src/components/JobsFiltersCard.tsx | New filter UI layout, selected filter chips, manage/clear controls; keywordFilter prop now string[]. |
| frontend/src/components/JobsTableCard.tsx | Displays split keyword tags, adds Spam/Lido columns with toggle buttons, and updates table layout. |
| frontend/src/components/KeywordsModal.tsx | Copy/label updates to align “keywords” with “filtros”. |
| frontend/src/App.tsx | Adapts to keywordFilter: string[], adds scraping button styling/icon updates. |
| frontend/tests/unit/utils/useJobsFiltering.test.ts | Adds test for multi-keyword selection behavior. |
| frontend/tests/unit/pages/App.test.tsx | Updates mocks for new useJobsData/useJobsFiltering shape. |
| frontend/tests/unit/components/JobsTableCard.test.tsx | Adds coverage for keyword tag rendering and spam/read toggle behavior. |
| frontend/tests/unit/components/JobsFiltersCard.test.tsx | Updates keywordFilter prop type and adds coverage for manage/clear filter UX. |
| backend/src/db/environment.json | Updates default KEYWORDS seed list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return jobs.filter((job) => { | ||
| const byKeyword = keywordFilter === "all" || String(job.palavra || "") === keywordFilter; | ||
| const currentKeyword = String(job.palavra || "").trim(); | ||
| const byKeyword = keywordFilter.length === 0 || keywordFilter.includes(currentKeyword); | ||
| if (!byKeyword) { |
There was a problem hiding this comment.
byKeyword compara o filtro com job.palavra inteiro. Como a UI agora exibe/aceita múltiplas palavras-chave (e o próprio JobsTableCard quebra palavra por vírgula/;|), um job com palavra como "JavaScript, UX-UI" nunca vai casar com um filtro "JavaScript". Sugestão: normalizar job.palavra em uma lista (mesma regra de split/trim do table) e considerar match por interseção; e também gerar keywords a partir dos tokens (não do campo bruto).
| function getSelectedFilters(search: string, keywordFilter: string[]) { | ||
| const searchTerms = search | ||
| .split(/[,;/]+/) | ||
| .map((item) => item.trim()) | ||
| .filter(Boolean) | ||
| .slice(0, 5); | ||
|
|
There was a problem hiding this comment.
O split de termos de busca em getSelectedFilters (e também em handleRemoveFilter) inclui "/" como delimitador. Isso quebra termos comuns com barra (ex.: "UX/UI", "C/C++"), gerando filtros/chips inesperados e removendo partes do texto ao clicar em remover. Considere limitar os delimitadores a vírgula/;| (ou outro separador explícito) e tratar "/" como caractere normal.
| function getSelectedFilters(search: string, keywordFilter: string[]) { | |
| const searchTerms = search | |
| .split(/[,;/]+/) | |
| .map((item) => item.trim()) | |
| .filter(Boolean) | |
| .slice(0, 5); | |
| function splitSearchTerms(search: string) { | |
| return search | |
| .split(/[;,|]+/) | |
| .map((item) => item.trim()) | |
| .filter(Boolean); | |
| } | |
| function getSelectedFilters(search: string, keywordFilter: string[]) { | |
| const searchTerms = splitSearchTerms(search).slice(0, 5); |
| <TableHead>Local</TableHead> | ||
| <TableHead>Link</TableHead> | ||
| <TableHead>Palavra-chave</TableHead> | ||
| <TableHead>Palavras chaves</TableHead> |
There was a problem hiding this comment.
O header "Palavras chaves" está com grafia inconsistente em PT-BR. Sugestão: usar "Palavras-chave" (com hífen) para manter a ortografia correta e consistente com o restante da UI (ex.: "palavras-chave" já aparece em outros textos).
| <TableHead>Palavras chaves</TableHead> | |
| <TableHead>Palavras-chave</TableHead> |
| <div className="flex flex-wrap gap-1 text-sm text-foreground/85"> | ||
| {keywords.map((keyword, keywordIndex) => ( | ||
| <div key={`${jobId}-${keyword}`} className="flex items-center"> | ||
| <span>{keyword}</span> | ||
| {keywordIndex < keywords.length - 1 ? <span aria-hidden="true">, </span> : null} | ||
| </div> | ||
| ))} |
There was a problem hiding this comment.
A key do map de keywords usa apenas ${jobId}-${keyword}. Se job.palavra vier com keywords repetidas (ou normalização futura gerar duplicatas), isso causa keys duplicadas e warnings do React. Sugestão: incluir keywordIndex na key (ou deduplicar keywords antes do map).
No description provided.