Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor hooks organization and month picker

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-06 16:39:49 +00:00
parent 9a5e9161db
commit ad0df4ea81
22 changed files with 239 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -11,6 +11,9 @@ e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR
### Alterado
- Períodos e navegação mensal: `useMonthPeriod` passou a usar os helpers centrais de período (`YYYY-MM`), o month-picker foi simplificado e o rótulo visual agora segue o formato `Março 2026`.
- Hooks e organização: hooks locais de calculadora, month-picker, logo picker e sidebar foram movidos para perto das respectivas features, deixando `/hooks` focado nos hooks realmente compartilhados.
- Estado de formulários e responsividade: `useFormState` ganhou APIs explícitas de reset/substituição no lugar do setter cru, e `useIsMobile` foi atualizado para assinatura estável com `useSyncExternalStore`, reduzindo a troca estrutural inicial no sidebar entre mobile e desktop.
- Navegação e estrutura compartilhada: `components/navbar` e `components/sidebar` foram consolidados em `components/navigation/*`, componentes globais migraram para `components/shared/*` e os imports foram padronizados no projeto.
- Dashboard e relatórios: a análise de parcelas foi movida para `/relatorios/analise-parcelas`, ações rápidas e widgets do dashboard foram refinados, e os cards de relatórios ganharam ajustes para evitar overflow no mobile.
- Pré-lançamentos e lançamentos: tabs e cards da inbox ficaram mais consistentes no mobile, itens descartados podem voltar para `Pendente` e compras feitas no dia do fechamento do cartão agora entram na próxima fatura.

6
components/anotacoes/note-dialog.tsx
View File

@@ -85,17 +85,17 @@ export function NoteDialog({
const initialState = buildInitialValues(note);
const { formState, updateField, setFormState } =
const { formState, resetForm, updateField } =
useFormState<NoteFormValues>(initialState);
useEffect(() => {
if (dialogOpen) {
setFormState(buildInitialValues(note));
resetForm(buildInitialValues(note));
setErrorMessage(null);
setNewTaskText("");
requestAnimationFrame(() => titleRef.current?.focus());
}
}, [dialogOpen, note, setFormState]);
}, [dialogOpen, note, resetForm]);
const dialogTitle = mode === "create" ? "Nova anotação" : "Editar anotação";
const description =

2
components/calculadora/calculator-dialog.tsx
View File

@@ -16,8 +16,8 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useDraggableDialog } from "@/hooks/use-draggable-dialog";
import { cn } from "@/lib/utils/ui";
import { useDraggableDialog } from "./use-draggable-dialog";
type Variant = React.ComponentProps<typeof Button>["variant"];
type Size = React.ComponentProps<typeof Button>["size"];

2
components/calculadora/calculator-keypad.tsx
View File

@@ -1,5 +1,5 @@
import type { CalculatorButtonConfig } from "@/components/calculadora/use-calculator-state";
import { Button } from "@/components/ui/button";
import type { CalculatorButtonConfig } from "@/hooks/use-calculator-state";
import type { Operator } from "@/lib/utils/calculator";
import { cn } from "@/lib/utils/ui";

4
components/calculadora/calculator.tsx
View File

@@ -1,9 +1,9 @@
"use client";
import { CalculatorKeypad } from "@/components/calculadora/calculator-keypad";
import { useCalculatorKeyboard } from "@/components/calculadora/use-calculator-keyboard";
import { useCalculatorState } from "@/components/calculadora/use-calculator-state";
import { Button } from "@/components/ui/button";
import { useCalculatorKeyboard } from "@/hooks/use-calculator-keyboard";
import { useCalculatorState } from "@/hooks/use-calculator-state";
import { CalculatorDisplay } from "./calculator-display";
type CalculatorProps = {

0
hooks/use-calculator-keyboard.ts → components/calculadora/use-calculator-keyboard.ts
View File

0
hooks/use-calculator-state.ts → components/calculadora/use-calculator-state.ts
View File

0
hooks/use-draggable-dialog.ts → components/calculadora/use-draggable-dialog.ts
View File

12
components/cartoes/card-dialog.tsx
View File

@@ -13,6 +13,7 @@ import {
updateCardAction,
} from "@/app/(dashboard)/cartoes/actions";
import { LogoPickerDialog, LogoPickerTrigger } from "@/components/logo-picker";
import { useLogoSelection } from "@/components/logo-picker/use-logo-selection";
import { Button } from "@/components/ui/button";
import {
Dialog,
@@ -25,7 +26,6 @@ import {
} from "@/components/ui/dialog";
import { useControlledState } from "@/hooks/use-controlled-state";
import { useFormState } from "@/hooks/use-form-state";
import { useLogoSelection } from "@/hooks/use-logo-selection";
import { deriveNameFromLogo, normalizeLogo } from "@/lib/logo";
import { formatLimitInput } from "@/lib/utils/currency";
import { CardFormFields } from "./card-form-fields";
@@ -100,16 +100,16 @@ export function CardDialog({
);
// Use form state hook for form management
const { formState, updateField, updateFields, setFormState } =
const { formState, resetForm, updateField, updateFields } =
useFormState<CardFormValues>(initialState);
// Reset form when dialog opens
useEffect(() => {
if (dialogOpen) {
setFormState(initialState);
resetForm(initialState);
setErrorMessage(null);
}
}, [dialogOpen, initialState, setFormState]);
}, [dialogOpen, initialState, resetForm]);
// Close logo dialog when main dialog closes
useEffect(() => {
@@ -173,7 +173,7 @@ export function CardDialog({
if (result.success) {
toast.success(result.message);
setDialogOpen(false);
setFormState(initialState);
resetForm(initialState);
return;
}
@@ -181,7 +181,7 @@ export function CardDialog({
toast.error(result.error);
});
},
[card?.id, formState, initialState, mode, setDialogOpen, setFormState],
[card?.id, formState, initialState, mode, resetForm, setDialogOpen],
);
const title = mode === "create" ? "Novo cartão" : "Editar cartão";

8
components/categorias/category-dialog.tsx
View File

@@ -76,16 +76,16 @@ export function CategoryDialog({
});
// Use form state hook for form management
const { formState, updateField, setFormState } =
const { formState, resetForm, updateField } =
useFormState<CategoryFormValues>(initialState);
// Reset form when dialog opens
useEffect(() => {
if (dialogOpen) {
setFormState(initialState);
resetForm(initialState);
setErrorMessage(null);
}
}, [dialogOpen, setFormState, initialState]);
}, [dialogOpen, initialState, resetForm]);
// Clear error when dialog closes
useEffect(() => {
@@ -123,7 +123,7 @@ export function CategoryDialog({
if (result.success) {
toast.success(result.message);
setDialogOpen(false);
setFormState(initialState);
resetForm(initialState);
return;
}

12
components/contas/account-dialog.tsx
View File

@@ -13,6 +13,7 @@ import {
updateAccountAction,
} from "@/app/(dashboard)/contas/actions";
import { LogoPickerDialog, LogoPickerTrigger } from "@/components/logo-picker";
import { useLogoSelection } from "@/components/logo-picker/use-logo-selection";
import { Button } from "@/components/ui/button";
import {
Dialog,
@@ -25,7 +26,6 @@ import {
} from "@/components/ui/dialog";
import { useControlledState } from "@/hooks/use-controlled-state";
import { useFormState } from "@/hooks/use-form-state";
import { useLogoSelection } from "@/hooks/use-logo-selection";
import { deriveNameFromLogo, normalizeLogo } from "@/lib/logo";
import { formatInitialBalanceInput } from "@/lib/utils/currency";
@@ -126,16 +126,16 @@ export function AccountDialog({
);
// Use form state hook for form management
const { formState, updateField, updateFields, setFormState } =
const { formState, resetForm, updateField, updateFields } =
useFormState<AccountFormValues>(initialState);
// Reset form when dialog opens
useEffect(() => {
if (dialogOpen) {
setFormState(initialState);
resetForm(initialState);
setErrorMessage(null);
}
}, [dialogOpen, initialState, setFormState]);
}, [dialogOpen, initialState, resetForm]);
// Close logo dialog when main dialog closes
useEffect(() => {
@@ -190,7 +190,7 @@ export function AccountDialog({
if (result.success) {
toast.success(result.message);
setDialogOpen(false);
setFormState(initialState);
resetForm(initialState);
return;
}
@@ -198,7 +198,7 @@ export function AccountDialog({
toast.error(result.error);
});
},
[account?.id, formState, initialState, mode, setDialogOpen, setFormState],
[account?.id, formState, initialState, mode, resetForm, setDialogOpen],
);
const title = mode === "create" ? "Nova conta" : "Editar conta";

6
components/lancamentos/dialogs/anticipate-installments-dialog/anticipate-installments-dialog.tsx
View File

@@ -92,7 +92,7 @@ export function AnticipateInstallmentsDialog({
);
// Use form state hook for form management
const { formState, updateField, setFormState } =
const { formState, replaceForm, updateField } =
useFormState<AnticipationFormValues>({
anticipationPeriod: defaultPeriod,
discount: "0",
@@ -122,7 +122,7 @@ export function AnticipateInstallmentsDialog({
// Pré-preencher pagador e categoria da primeira parcela
if (installments.length > 0) {
const first = installments[0];
setFormState({
replaceForm({
anticipationPeriod: defaultPeriod,
discount: "0",
pagadorId: first.pagadorId ?? "",
@@ -140,7 +140,7 @@ export function AnticipateInstallmentsDialog({
setIsLoadingInstallments(false);
});
}
}, [dialogOpen, seriesId, defaultPeriod, setFormState]);
}, [defaultPeriod, dialogOpen, replaceForm, seriesId]);
const totalAmount = useMemo(() => {
return eligibleInstallments

2
hooks/use-logo-selection.ts → components/logo-picker/use-logo-selection.ts
View File

@@ -25,7 +25,7 @@ interface UseLogoSelectionProps {
* mode: 'create',
* currentLogo: formState.logo,
* currentName: formState.name,
* onUpdate: (updates) => setFormState(prev => ({ ...prev, ...updates }))
* onUpdate: (updates) => updateFields(updates)
* });
* ```
*/

61
components/month-picker/month-navigation.tsx
View File

@@ -3,61 +3,37 @@
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useTransition } from "react";
import { Card } from "@/components/ui/card";
import { useMonthPeriod } from "@/hooks/use-month-period";
import { getNextPeriod, getPreviousPeriod } from "@/lib/utils/period";
import LoadingSpinner from "./loading-spinner";
import NavigationButton from "./nav-button";
import ReturnButton from "./return-button";
import { useMonthPeriod } from "./use-month-period";
export default function MonthNavigation() {
const {
monthNames,
currentMonth,
currentYear,
defaultMonth,
defaultYear,
buildHref,
} = useMonthPeriod();
const { period, currentMonth, currentYear, defaultPeriod, buildHref } =
useMonthPeriod();
const router = useRouter();
const [isPending, startTransition] = useTransition();
const currentMonthLabel = useMemo(
() => currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1),
[currentMonth],
() =>
`${currentMonth.charAt(0).toUpperCase()}${currentMonth.slice(1)} ${currentYear}`,
[currentMonth, currentYear],
);
const currentMonthIndex = useMemo(
() => monthNames.indexOf(currentMonth),
[monthNames, currentMonth],
const prevTarget = useMemo(
() => buildHref(getPreviousPeriod(period)),
[buildHref, period],
);
const nextTarget = useMemo(
() => buildHref(getNextPeriod(period)),
[buildHref, period],
);
const prevTarget = useMemo(() => {
let idx = currentMonthIndex - 1;
let year = currentYear;
if (idx < 0) {
idx = monthNames.length - 1;
year = (parseInt(currentYear, 10) - 1).toString();
}
return buildHref(monthNames[idx], year);
}, [currentMonthIndex, currentYear, monthNames, buildHref]);
const nextTarget = useMemo(() => {
let idx = currentMonthIndex + 1;
let year = currentYear;
if (idx >= monthNames.length) {
idx = 0;
year = (parseInt(currentYear, 10) + 1).toString();
}
return buildHref(monthNames[idx], year);
}, [currentMonthIndex, currentYear, monthNames, buildHref]);
const returnTarget = useMemo(
() => buildHref(defaultMonth, defaultYear),
[buildHref, defaultMonth, defaultYear],
() => buildHref(defaultPeriod),
[buildHref, defaultPeriod],
);
const isDifferentFromCurrent =
currentMonth !== defaultMonth || currentYear !== defaultYear.toString();
const isDifferentFromCurrent = period !== defaultPeriod;
// Prefetch otimizado: apenas meses adjacentes (M-1, M+1) e mês atual
// Isso melhora a performance da navegação sem sobrecarregar o cliente
@@ -91,10 +67,9 @@ export default function MonthNavigation() {
<div
className="mx-1 space-x-1 capitalize font-semibold"
aria-current={!isDifferentFromCurrent ? "date" : undefined}
aria-label={`Período selecionado: ${currentMonthLabel} de ${currentYear}`}
aria-label={`Período selecionado: ${currentMonthLabel}`}
>
<span>{currentMonthLabel}</span>
<span>{currentYear}</span>
</div>
{isPending && <LoadingSpinner />}

90
components/month-picker/use-month-period.ts Normal file
View File

@@ -0,0 +1,90 @@
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useMemo } from "react";
import {
formatPeriod,
formatPeriodForUrl,
formatPeriodParam,
MONTH_NAMES,
parsePeriodParam,
} from "@/lib/utils/period";
const PERIOD_PARAM = "periodo";
export function useMonthPeriod() {
const searchParams = useSearchParams();
const pathname = usePathname();
const router = useRouter();
const periodFromParams = searchParams.get(PERIOD_PARAM);
const referenceDate = useMemo(() => new Date(), []);
const defaultPeriod = useMemo(
() =>
formatPeriod(referenceDate.getFullYear(), referenceDate.getMonth() + 1),
[referenceDate],
);
const { period, monthName, year } = useMemo(
() => parsePeriodParam(periodFromParams, referenceDate),
[periodFromParams, referenceDate],
);
const defaultMonth = useMemo(
() => MONTH_NAMES[referenceDate.getMonth()] ?? "",
[referenceDate],
);
const defaultYear = useMemo(
() => referenceDate.getFullYear().toString(),
[referenceDate],
);
const buildHref = useCallback(
(targetPeriod: string) => {
const params = new URLSearchParams(searchParams.toString());
params.set(PERIOD_PARAM, formatPeriodForUrl(targetPeriod));
return `${pathname}?${params.toString()}`;
},
[pathname, searchParams],
);
const buildHrefFromMonth = useCallback(
(month: string, nextYear: string | number) => {
const parsedYear = Number.parseInt(String(nextYear).trim(), 10);
if (Number.isNaN(parsedYear)) {
return buildHref(defaultPeriod);
}
const param = formatPeriodParam(month, parsedYear);
const parsed = parsePeriodParam(param, referenceDate);
return buildHref(parsed.period);
},
[buildHref, defaultPeriod, referenceDate],
);
const replacePeriod = useCallback(
(targetPeriod: string) => {
if (!targetPeriod) {
return;
}
router.replace(buildHref(targetPeriod), { scroll: false });
},
[buildHref, router],
);
return {
pathname,
period,
currentMonth: monthName,
currentYear: year.toString(),
defaultPeriod,
defaultMonth,
defaultYear,
buildHref,
buildHrefFromMonth,
replacePeriod,
};
}
export { PERIOD_PARAM as MONTH_PERIOD_PARAM };

8
components/orcamentos/budget-dialog.tsx
View File

@@ -85,16 +85,16 @@ export function BudgetDialog({
});
// Use form state hook for form management
const { formState, updateField, setFormState } =
const { formState, resetForm, updateField } =
useFormState<BudgetFormValues>(initialState);
// Reset form when dialog opens
useEffect(() => {
if (dialogOpen) {
setFormState(initialState);
resetForm(initialState);
setErrorMessage(null);
}
}, [dialogOpen, setFormState, initialState]);
}, [dialogOpen, initialState, resetForm]);
// Clear error when dialog closes
useEffect(() => {
@@ -153,7 +153,7 @@ export function BudgetDialog({
if (result.success) {
toast.success(result.message);
setDialogOpen(false);
setFormState(initialState);
resetForm(initialState);
return;
}

10
components/pagadores/pagador-dialog.tsx
View File

@@ -95,7 +95,7 @@ export function PagadorDialog({
);
// Use form state hook for form management
const { formState, updateField, setFormState } =
const { formState, resetForm, updateField } =
useFormState<PagadorFormValues>(initialState);
const availableAvatars = useMemo(() => {
@@ -111,10 +111,10 @@ export function PagadorDialog({
// Reset form when dialog opens
useEffect(() => {
if (dialogOpen) {
setFormState(initialState);
resetForm(initialState);
setErrorMessage(null);
}
}, [dialogOpen, initialState, setFormState]);
}, [dialogOpen, initialState, resetForm]);
const handleSubmit = useCallback(
(event: React.FormEvent<HTMLFormElement>) => {
@@ -160,7 +160,7 @@ export function PagadorDialog({
if (result.success) {
toast.success(result.message);
setDialogOpen(false);
setFormState(initialState);
resetForm(initialState);
return;
}
@@ -168,7 +168,7 @@ export function PagadorDialog({
toast.error(result.error);
});
},
[formState, initialState, mode, pagador?.id, setDialogOpen, setFormState],
[formState, initialState, mode, pagador?.id, resetForm, setDialogOpen],
);
const title = mode === "create" ? "Novo pagador" : "Editar pagador";

90
components/ui/sidebar.tsx
View File

@@ -21,8 +21,8 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils/ui";
import { useIsMobile } from "./use-mobile";
const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -162,7 +162,7 @@ function Sidebar({
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
}) {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
const { state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") {
return (
@@ -179,14 +179,14 @@ function Sidebar({
);
}
if (isMobile) {
return (
return (
<>
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
data-sidebar="sidebar"
data-slot="sidebar"
data-mobile="true"
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -201,54 +201,52 @@ function Sidebar({
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
);
}
return (
<div
className="group peer text-sidebar-foreground hidden md:block"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}
data-slot="sidebar"
>
{/* This is what handles the sidebar gap on desktop */}
<div
data-slot="sidebar-gap"
className={cn(
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
)}
/>
<div
data-slot="sidebar-container"
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l",
className,
)}
{...props}
className="group peer text-sidebar-foreground hidden md:block"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}
data-slot="sidebar"
>
{/* This is what handles the sidebar gap on desktop */}
<div
data-sidebar="sidebar"
data-slot="sidebar-inner"
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
data-slot="sidebar-gap"
className={cn(
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
)}
/>
<div
data-slot="sidebar-container"
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l",
className,
)}
{...props}
>
{children}
<div
data-sidebar="sidebar"
data-slot="sidebar-inner"
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
>
{children}
</div>
</div>
</div>
</div>
</>
);
}

26
components/ui/use-mobile.ts Normal file
View File

@@ -0,0 +1,26 @@
import * as React from "react";
const MOBILE_BREAKPOINT = 768;
const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
export function useIsMobile() {
const subscribe = React.useCallback((onStoreChange: () => void) => {
if (typeof window === "undefined") {
return () => {};
}
const mediaQueryList = window.matchMedia(MOBILE_MEDIA_QUERY);
mediaQueryList.addEventListener("change", onStoreChange);
return () => mediaQueryList.removeEventListener("change", onStoreChange);
}, []);
const getSnapshot = React.useCallback(() => {
if (typeof window === "undefined") {
return false;
}
return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
}, []);
return React.useSyncExternalStore(subscribe, getSnapshot, () => false);
}

36
hooks/use-form-state.ts
View File

@@ -1,10 +1,10 @@
import { useState } from "react";
import { useCallback, useRef, useState } from "react";
/**
* Hook for managing form state with type-safe field updates
*
* @param initialValues - Initial form values
* @returns Object with formState, updateField, resetForm, setFormState
* @returns Object with formState, updateField, updateFields, replaceForm, resetForm
*
* @example
* ```tsx
@@ -16,37 +16,45 @@ import { useState } from "react";
* updateField('name', 'John');
* ```
*/
export function useFormState<T extends Record<string, unknown>>(
initialValues: T,
) {
export function useFormState<T extends object>(initialValues: T) {
const latestInitialValuesRef = useRef(initialValues);
latestInitialValuesRef.current = initialValues;
const [formState, setFormState] = useState<T>(initialValues);
/**
* Updates a single field in the form state
*/
const updateField = <K extends keyof T>(field: K, value: T[K]) => {
setFormState((prev) => ({ ...prev, [field]: value }));
};
const updateField = useCallback(
<K extends keyof T>(field: K, value: T[K]) => {
setFormState((prev) => ({ ...prev, [field]: value }));
},
[],
);
/**
* Resets form to initial values
*/
const resetForm = () => {
setFormState(initialValues);
};
const resetForm = useCallback((nextValues?: T) => {
setFormState(nextValues ?? latestInitialValuesRef.current);
}, []);
/**
* Updates multiple fields at once
*/
const updateFields = (updates: Partial<T>) => {
const updateFields = useCallback((updates: Partial<T>) => {
setFormState((prev) => ({ ...prev, ...updates }));
};
}, []);
const replaceForm = useCallback((nextValues: T) => {
setFormState(nextValues);
}, []);
return {
formState,
updateField,
updateFields,
replaceForm,
resetForm,
setFormState,
};
}

21
hooks/use-mobile.ts
View File

@@ -1,21 +0,0 @@
import * as React from "react";
const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
undefined,
);
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
};
mql.addEventListener("change", onChange);
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
return () => mql.removeEventListener("change", onChange);
}, []);
return !!isMobile;
}

79
hooks/use-month-period.ts
View File

@@ -1,79 +0,0 @@
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useMemo } from "react";
import { MONTH_NAMES } from "@/lib/utils/period";
const PERIOD_PARAM = "periodo";
const normalizeMonth = (value: string) => value.trim().toLowerCase();
export function useMonthPeriod() {
const searchParams = useSearchParams();
const pathname = usePathname();
const router = useRouter();
// Get current date info
const now = new Date();
const currentYear = now.getFullYear();
const currentMonthName = MONTH_NAMES[now.getMonth()];
const optionsMeses = useMemo(() => [...MONTH_NAMES], []);
const defaultMonth = currentMonthName;
const defaultYear = currentYear.toString();
const periodFromParams = searchParams.get(PERIOD_PARAM);
const { month: currentMonth, year: currentYearValue } = useMemo(() => {
if (!periodFromParams) {
return { month: defaultMonth, year: defaultYear };
}
const [rawMonth, rawYear] = periodFromParams.split("-");
const normalizedMonth = normalizeMonth(rawMonth ?? "");
const normalizedYear = (rawYear ?? "").trim();
const monthExists = optionsMeses.includes(normalizedMonth);
const parsedYear = Number.parseInt(normalizedYear, 10);
if (!monthExists || Number.isNaN(parsedYear)) {
return { month: defaultMonth, year: defaultYear };
}
return {
month: normalizedMonth,
year: parsedYear.toString(),
};
}, [periodFromParams, defaultMonth, defaultYear, optionsMeses]);
const buildHref = (month: string, year: string | number) => {
const normalizedMonth = normalizeMonth(month);
const normalizedYear = String(year).trim();
const params = new URLSearchParams(searchParams.toString());
params.set(PERIOD_PARAM, `${normalizedMonth}-${normalizedYear}`);
return `${pathname}?${params.toString()}`;
};
const replacePeriod = (target: string) => {
if (!target) {
return;
}
router.replace(target, { scroll: false });
};
return {
monthNames: optionsMeses,
pathname,
currentMonth,
currentYear: currentYearValue,
defaultMonth,
defaultYear,
buildHref,
replacePeriod,
};
}
export { PERIOD_PARAM as MONTH_PERIOD_PARAM };