fix: corrigir hooks com dependências exaustivas
- magnet-lines: move useEffect antes do early return (hooks não podem ser chamados condicionalmente), adiciona disabled aos deps - use-month-period: memoiza [...MONTH_NAMES] com useMemo - lancamentos-filters: handleFilterChange em useCallback - inbox-page: sortByTimestamp em useCallback, atualiza deps dos useMemo - note-card: remove formattedDate não utilizado do useMemo Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -34,7 +34,7 @@ export function NoteCard({
|
|||||||
onArquivar,
|
onArquivar,
|
||||||
isArquivadas = false,
|
isArquivadas = false,
|
||||||
}: NoteCardProps) {
|
}: NoteCardProps) {
|
||||||
const { formattedDate, displayTitle } = useMemo(() => {
|
const { displayTitle } = useMemo(() => {
|
||||||
const resolvedTitle = note.title.trim().length
|
const resolvedTitle = note.title.trim().length
|
||||||
? note.title
|
? note.title
|
||||||
: "Anotação sem título";
|
: "Anotação sem título";
|
||||||
|
|||||||
@@ -6,7 +6,13 @@ import {
|
|||||||
RiFilter3Line,
|
RiFilter3Line,
|
||||||
} from "@remixicon/react";
|
} from "@remixicon/react";
|
||||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||||
import { type ReactNode, useEffect, useState, useTransition } from "react";
|
import {
|
||||||
|
type ReactNode,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
useTransition,
|
||||||
|
} from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Command,
|
Command,
|
||||||
@@ -143,7 +149,8 @@ export function LancamentosFilters({
|
|||||||
const getParamValue = (key: string) =>
|
const getParamValue = (key: string) =>
|
||||||
searchParams.get(key) ?? FILTER_EMPTY_VALUE;
|
searchParams.get(key) ?? FILTER_EMPTY_VALUE;
|
||||||
|
|
||||||
const handleFilterChange = (key: string, value: string | null) => {
|
const handleFilterChange = useCallback(
|
||||||
|
(key: string, value: string | null) => {
|
||||||
const nextParams = new URLSearchParams(searchParams.toString());
|
const nextParams = new URLSearchParams(searchParams.toString());
|
||||||
|
|
||||||
if (value && value !== FILTER_EMPTY_VALUE) {
|
if (value && value !== FILTER_EMPTY_VALUE) {
|
||||||
@@ -157,7 +164,9 @@ export function LancamentosFilters({
|
|||||||
scroll: false,
|
scroll: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
},
|
||||||
|
[searchParams, pathname, router],
|
||||||
|
);
|
||||||
|
|
||||||
const [searchValue, setSearchValue] = useState(searchParams.get("q") ?? "");
|
const [searchValue, setSearchValue] = useState(searchParams.get("q") ?? "");
|
||||||
const currentSearchParam = searchParams.get("q") ?? "";
|
const currentSearchParam = searchParams.get("q") ?? "";
|
||||||
|
|||||||
@@ -30,12 +30,8 @@ const MagnetLines: React.FC<MagnetLinesProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
// Se magnetlines estiver desabilitado, não renderiza nada
|
|
||||||
if (disabled) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (disabled) return;
|
||||||
const container = containerRef.current;
|
const container = containerRef.current;
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
@@ -72,7 +68,12 @@ const MagnetLines: React.FC<MagnetLinesProps> = ({
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("pointermove", handlePointerMove);
|
window.removeEventListener("pointermove", handlePointerMove);
|
||||||
};
|
};
|
||||||
}, []);
|
}, [disabled]);
|
||||||
|
|
||||||
|
// Se magnetlines estiver desabilitado, não renderiza nada
|
||||||
|
if (disabled) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const total = rows * columns;
|
const total = rows * columns;
|
||||||
const spans = Array.from({ length: total }, (_, i) => (
|
const spans = Array.from({ length: total }, (_, i) => (
|
||||||
|
|||||||
@@ -52,24 +52,27 @@ export function InboxPage({
|
|||||||
const [discardOpen, setDiscardOpen] = useState(false);
|
const [discardOpen, setDiscardOpen] = useState(false);
|
||||||
const [itemToDiscard, setItemToDiscard] = useState<InboxItem | null>(null);
|
const [itemToDiscard, setItemToDiscard] = useState<InboxItem | null>(null);
|
||||||
|
|
||||||
const sortByTimestamp = (list: InboxItem[]) =>
|
const sortByTimestamp = useCallback(
|
||||||
|
(list: InboxItem[]) =>
|
||||||
[...list].sort(
|
[...list].sort(
|
||||||
(a, b) =>
|
(a, b) =>
|
||||||
new Date(b.notificationTimestamp).getTime() -
|
new Date(b.notificationTimestamp).getTime() -
|
||||||
new Date(a.notificationTimestamp).getTime(),
|
new Date(a.notificationTimestamp).getTime(),
|
||||||
|
),
|
||||||
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
const sortedPending = useMemo(
|
const sortedPending = useMemo(
|
||||||
() => sortByTimestamp(pendingItems),
|
() => sortByTimestamp(pendingItems),
|
||||||
[pendingItems],
|
[pendingItems, sortByTimestamp],
|
||||||
);
|
);
|
||||||
const sortedProcessed = useMemo(
|
const sortedProcessed = useMemo(
|
||||||
() => sortByTimestamp(processedItems),
|
() => sortByTimestamp(processedItems),
|
||||||
[processedItems],
|
[processedItems, sortByTimestamp],
|
||||||
);
|
);
|
||||||
const sortedDiscarded = useMemo(
|
const sortedDiscarded = useMemo(
|
||||||
() => sortByTimestamp(discardedItems),
|
() => sortByTimestamp(discardedItems),
|
||||||
[discardedItems],
|
[discardedItems, sortByTimestamp],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleProcessOpenChange = useCallback((open: boolean) => {
|
const handleProcessOpenChange = useCallback((open: boolean) => {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export function useMonthPeriod() {
|
|||||||
const now = new Date();
|
const now = new Date();
|
||||||
const currentYear = now.getFullYear();
|
const currentYear = now.getFullYear();
|
||||||
const currentMonthName = MONTH_NAMES[now.getMonth()];
|
const currentMonthName = MONTH_NAMES[now.getMonth()];
|
||||||
const optionsMeses = [...MONTH_NAMES];
|
const optionsMeses = useMemo(() => [...MONTH_NAMES], []);
|
||||||
|
|
||||||
const defaultMonth = currentMonthName;
|
const defaultMonth = currentMonthName;
|
||||||
const defaultYear = currentYear.toString();
|
const defaultYear = currentYear.toString();
|
||||||
|
|||||||
Reference in New Issue
Block a user