feat: add time filter #353
Conversation
WalkthroughAs alterações introduzem um recurso de filtragem de tempo no componente de filtro de data existente. O novo recurso permite aos usuários selecionar horas de início e término específicas junto com o intervalo de datas. O componente agora suporta a definição de tempos padrão (00:00 e 23:59) e inclui novos elementos de interface para seleção de tempo, além de atualizar a lógica de filtragem para incorporar informações de tempo precisas. Changes
Sequence DiagramsequenceDiagram
participant User
participant DateFilter
participant FilterLogic
User->>DateFilter: Seleciona data inicial
User->>DateFilter: Seleciona hora inicial
User->>DateFilter: Seleciona data final
User->>DateFilter: Seleciona hora final
User->>DateFilter: Confirma seleção
DateFilter->>FilterLogic: Aplica filtro com data e tempo
FilterLogic-->>User: Exibe resultados filtrados
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/DateFilter/index.tsx (2)
274-290: Formatando corretamente o intervalo de data e hora.
A atualização doinputValuecom o intervalo facilita o entendimento do usuário. Considere padronizar o formato escolhido (e.g., sempre 24h) para garantir consistência visual e de localização.
391-411: Sugestão de componente reutilizável.
A inclusão de marcadores de rótulo e inputs de tempo ficou bem estruturada. Para maior organização, considere extrair esses blocos em um componente ou hook, evitando duplicação futura e mantendo o código mais enxuto.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/DateFilter/index.tsx(3 hunks)src/components/DateFilter/styles.ts(1 hunks)
🔇 Additional comments (7)
src/components/DateFilter/index.tsx (4)
25-27: Boa adoção de novos componentes de estilo.
Essas importações tornam o código mais organizado, facilitando a implementação da filtragem por tempo.
243-245: Uso apropriado de valores padrão.
Definir '00:00' e '23:59' como valores iniciais auxilia na seleção rápida sem exigir que o usuário sempre defina o horário.
254-272: Implementação de filtragem condicional.
A lógica atende bem ao propósito de atualizar a query com as datas e horários escolhidos, mas esteja atento a fusos horários diferentes e possíveis conversões de horário dados ambientes variados.
292-299: Manipuladores de evento claros e diretos.
O uso desetStartTimeesetEndTimereflete uma implementação simples e eficaz para capturar as alterações de horário do usuário.src/components/DateFilter/styles.ts (3)
129-135: Container bem organizado.
ATimeFilterContainerfornece uma disposição em coluna com espaçamento entre elementos, mantendo a legibilidade e favorecendo a escalabilidade.
137-143: Layout flexível para cada seletor de tempo.
O uso dejustify-content: space-between;ealign-items: center;ajuda a manter os campos e rótulos alinhados de forma consistente, mesmo em diferentes tamanhos de tela.
145-153: Estilização limpa e adaptável.
OTimeInpututiliza recursos comocolor-scheme: dark;e borda customizada, permitindo coerência visual tanto em temas claros quanto escuros.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/DateFilter/index.tsx (1)
246-252:⚠️ Potential issueAdicionar validação do formato de tempo
A função
formatDateWithTimeassume que a string de tempo está no formato correto "HH:MM". Recomenda-se adicionar validação para evitar erros com formatos inválidos.Sugestão de implementação:
const formatDateWithTime = (date: Date, time: string) => { + const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/; + if (!timeRegex.test(time)) { + throw new Error('Formato de tempo inválido. Use HH:MM'); + } const [hours, minutes] = time.split(':').map(Number); const newDate = new Date(date); newDate.setHours(hours, minutes, 0, 0); return newDate; };
🧹 Nitpick comments (1)
src/components/DateFilter/index.tsx (1)
291-297: Otimizar manipuladores de alteração de tempoSugestões de melhorias para os manipuladores de tempo:
- Adicionar debounce para evitar atualizações frequentes
- Validar os valores de tempo antes de atualizar o estado
Exemplo de implementação:
+import { debounce } from 'lodash'; +const validateTime = (time: string) => { + const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/; + return timeRegex.test(time); +}; -const handleStartTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => { - setStartTime(e.target.value); -}; +const handleStartTimeChange = debounce((e: React.ChangeEvent<HTMLInputElement>) => { + const newTime = e.target.value; + if (validateTime(newTime)) { + setStartTime(newTime); + } +}, 300);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/DateFilter/index.tsx(4 hunks)src/components/DateFilter/styles.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/DateFilter/styles.ts
🔇 Additional comments (3)
src/components/DateFilter/index.tsx (3)
243-244: Inicialização adequada dos estados de tempo!A implementação dos estados
startTimeeendTimecom valores padrão apropriados está correta.
254-272: Implementação robusta do filtro de tempo!A função
filterDatelida adequadamente com todos os cenários:
- Filtragem para um único dia
- Filtragem para um intervalo de datas
- Aplicação correta dos horários de início e fim
274-289: Excelente implementação do manipulador de confirmação!O
handleConfirmClickfoi bem atualizado para:
- Incluir informações de tempo no filtro
- Atualizar o valor de exibição com data e hora
- Manter as dependências do useCallback atualizadas
caioapolonio
deleted the
LAB-2889-filter-transactions-by-date-time-range
branch
Summary by CodeRabbit
Novos Recursos
Melhorias de Interface