prettify hooks

src/App.tsx

@@ -1,26 +1,26 @@
 import {
-  NavLinksContextProvider,
+  NavLinksProvider,
   type NavLink,
-} from '@/router/providers/nav-links.provider.tsx';
-import { SubscriptionUpsertStateProvider } from '@/subscriptions/providers/subscription-upsert-state.provider';
-import { SubscriptionsProvider } from '@/subscriptions/providers/subscriptions.provider.tsx';
-import { DefaultLayoutContextProvider } from '@/ui/layouts/default.layout';
+} from '@/router/hooks/use-nav-links.tsx';
+import { SubscriptionUpsertProvider } from '@/subscriptions/hooks/use-subscription-upsert.tsx';
+import { SubscriptionsProvider } from '@/subscriptions/hooks/use-subscriptions.tsx';
+import { DefaultLayoutProvider } from '@/ui/hooks/use-default-layout.tsx';
 import { faChartSimple, faCreditCard } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { memo } from 'react';
 import { Outlet } from 'react-router-dom';
 
 export const App = memo(() => {
   return (
-    <NavLinksContextProvider navLinks={navLinks}>
-      <DefaultLayoutContextProvider>
-        <SubscriptionUpsertStateProvider>
+    <NavLinksProvider navLinks={navLinks}>
+      <DefaultLayoutProvider>
+        <SubscriptionUpsertProvider>
           <SubscriptionsProvider>
             <Outlet />
           </SubscriptionsProvider>
-        </SubscriptionUpsertStateProvider>
-      </DefaultLayoutContextProvider>
-    </NavLinksContextProvider>
+        </SubscriptionUpsertProvider>
+      </DefaultLayoutProvider>
+    </NavLinksProvider>
   );
 });
 

src/dashboard/pages/dashboard.page.tsx

@@ -1,17 +1,17 @@
 import { AddSubscriptionButton } from '@/subscriptions/components/add-subscription-button.tsx';
 import { SubscriptionUpsert } from '@/subscriptions/components/subscription-upsert.tsx';
 import { SubscriptionsByMonthChart } from '@/subscriptions/components/subscriptions-by-month-chart.tsx';
-import { SubscriptionUpsertStateContext } from '@/subscriptions/providers/subscription-upsert-state.provider.tsx';
+import { useSubscriptionUpsert } from '@/subscriptions/hooks/use-subscription-upsert';
 import { TagSelect } from '@/tags/components/tag-select.tsx';
 import {
   DefaultLayout,
   DefaultLayoutHeader,
 } from '@/ui/layouts/default.layout.tsx';
 import { cn } from '@/ui/utils/cn.ts';
-import { memo, useContext } from 'react';
+import { memo } from 'react';
 
 export const DashboardPage = memo(() => {
-  const upsert = useContext(SubscriptionUpsertStateContext);
+  const upsert = useSubscriptionUpsert();
 
   return (
     <DefaultLayout

src/date/types/month-name.ts

@@ -0,0 +1,16 @@
+export const monthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+] as const;
+
+export type MonthName = (typeof monthNames)[number];

src/date/types/month.ts

@@ -1,24 +1,9 @@
+import type { MonthName } from './month-name.ts';
+
 export const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const;
 
 export type Month = (typeof months)[number];
 
-export const monthNames = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-] as const;
-
-export type MonthName = (typeof monthNames)[number];
-
 export const monthToMonthName = {
   0: 'January',
   1: 'February',

src/db/globals/db.ts

@@ -1,5 +1,5 @@
 import type { SubscriptionTagModel } from '@/subscriptions/models/subscription-tag.model.ts';
-import type { SubscriptionModel } from '@/subscriptions/models/subscription.model.tsx';
+import type { SubscriptionModel } from '@/subscriptions/models/subscription.model.ts';
 import type { TagModel } from '@/tags/models/tag.model.ts';
 import Dexie, { type EntityTable, type Table } from 'dexie';
 

src/router/hooks/use-nav-links.tsx

@@ -0,0 +1,40 @@
+import {
+  createContext,
+  memo,
+  useContext,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
+import type { Route } from '../types/route.ts';
+
+export function useNavLinks(): UseNavLinks {
+  return useContext(NavLinksContext);
+}
+
+export interface UseNavLinks {
+  navLinks: Array<NavLink>;
+}
+
+export interface NavLink {
+  label: string;
+  path: Route | string;
+  icon: ReactNode;
+}
+
+export const NavLinksProvider = memo(
+  ({ children, navLinks }: PropsWithChildren<NavLinksProviderProps>) => {
+    return (
+      <NavLinksContext.Provider value={{ navLinks }}>
+        {children}
+      </NavLinksContext.Provider>
+    );
+  },
+);
+
+export interface NavLinksProviderProps {
+  navLinks: Array<NavLink>;
+}
+
+const NavLinksContext = createContext<UseNavLinks>({
+  navLinks: [],
+});

src/subscriptions/components/add-subscription-button.tsx

@@ -2,11 +2,11 @@ import { useBreakpoint } from '@/ui/hooks/use-breakpoint.ts';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ActionIcon, Button } from '@mantine/core';
-import { memo, useCallback, useContext } from 'react';
-import { SubscriptionUpsertStateContext } from '../providers/subscription-upsert-state.provider.tsx';
+import { memo, useCallback } from 'react';
+import { useSubscriptionUpsert } from '../hooks/use-subscription-upsert.tsx';
 
 export const AddSubscriptionButton = memo(() => {
-  const upsert = useContext(SubscriptionUpsertStateContext);
+  const upsert = useSubscriptionUpsert();
   const isMd = useBreakpoint('md');
 
   const openSubscriptionInsert = useCallback(

src/subscriptions/components/subscription-list-item.tsx

@@ -1,15 +1,13 @@
 import { cn } from '@/ui/utils/cn.ts';
 import { Avatar, Card, Text, Title } from '@mantine/core';
-import { memo, useCallback, useContext } from 'react';
-import {
-  subscriptionIconToSvg,
-  type SubscriptionModel,
-} from '../models/subscription.model.tsx';
-import { SubscriptionUpsertStateContext } from '../providers/subscription-upsert-state.provider.tsx';
+import { memo, useCallback } from 'react';
+import { useSubscriptionUpsert } from '../hooks/use-subscription-upsert.tsx';
+import { type SubscriptionModel } from '../models/subscription.model.ts';
+import { subscriptionIconToSvg } from '../types/subscription-icon.tsx';
 
 export const SubscriptionListItem = memo(
   ({ subscription }: SubscriptionListItemProps) => {
-    const upsert = useContext(SubscriptionUpsertStateContext);
+    const upsert = useSubscriptionUpsert();
 
     const openSubscriptionUpdate = useCallback(
       () => upsert.dispatch({ type: 'open', subscription }),

src/subscriptions/components/subscription-list.tsx

@@ -1,10 +1,10 @@
 import { cn } from '@/ui/utils/cn.ts';
-import { memo, useContext } from 'react';
-import { SubscriptionsContext } from '../providers/subscriptions.provider.tsx';
+import { memo } from 'react';
+import { useSubscriptions } from '../hooks/use-subscriptions.tsx';
 import { SubscriptionListItem } from './subscription-list-item.tsx';
 
 export const SubscriptionList = memo(() => {
-  const { subscriptions } = useContext(SubscriptionsContext);
+  const { subscriptions } = useSubscriptions();
 
   return (
     <div className={cn(`grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4`)}>

src/subscriptions/components/subscription-upsert.tsx

@@ -14,33 +14,37 @@ import {
 } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import { useLiveQuery } from 'dexie-react-hooks';
-import { memo, useCallback, useContext, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import {
   Controller,
   useForm,
   type DefaultValues,
   type SubmitHandler,
 } from 'react-hook-form';
+import { useSubscriptionUpsert } from '../hooks/use-subscription-upsert.tsx';
 import {
   insertSubscriptionSchema,
-  subscriptionCyclePeriodToLabel,
-  subscriptionCyclePeriods,
-  subscriptionIconToLabel,
-  subscriptionIcons,
   updateSubscriptionSchema,
   type InsertSubscriptionModel,
   type UpdateSubscriptionModel,
   type UpsertSubscriptionModel,
-} from '../models/subscription.model.tsx';
+} from '../models/subscription.model.ts';
 import {
   deleteSubscription,
   insertSubscription,
   updateSubscription,
 } from '../models/subscription.table.ts';
-import { SubscriptionUpsertStateContext } from '../providers/subscription-upsert-state.provider.tsx';
+import {
+  subscriptionCyclePeriodToLabel,
+  subscriptionCyclePeriods,
+} from '../types/subscription-cycle-period.ts';
+import {
+  subscriptionIconToLabel,
+  subscriptionIcons,
+} from '../types/subscription-icon.tsx';
 
 export const SubscriptionUpsert = memo(() => {
-  const { state, dispatch } = useContext(SubscriptionUpsertStateContext);
+  const { state, dispatch } = useSubscriptionUpsert();
 
   const { register, handleSubmit, control } = useForm<UpsertSubscriptionModel>({
     resolver: zodResolver(

src/subscriptions/components/subscriptions-by-month-chart.tsx

@@ -1,18 +1,15 @@
-import {
-  monthToMonthName,
-  months,
-  type MonthName,
-} from '@/date/types/month.ts';
+import type { MonthName } from '@/date/types/month-name.ts';
+import { monthToMonthName, months } from '@/date/types/month.ts';
 import { cn } from '@/ui/utils/cn.ts';
 import { Card } from '@mantine/core';
-import { memo, useContext, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Bar, BarChart, ResponsiveContainer, XAxis } from 'recharts';
-import type { SubscriptionModel } from '../models/subscription.model.tsx';
-import { SubscriptionsContext } from '../providers/subscriptions.provider.tsx';
+import { useSubscriptions } from '../hooks/use-subscriptions.tsx';
+import type { SubscriptionModel } from '../models/subscription.model.ts';
 import { cyclePeriodToCalculateMonthlyPrice } from '../utils/cycle-period-to-calculate-monthly-price.ts';
 
 export const SubscriptionsByMonthChart = memo(() => {
-  const { subscriptions } = useContext(SubscriptionsContext);
+  const { subscriptions } = useSubscriptions();
 
   const aggregatedSubscriptions = useMemo(
     () => Object.entries(aggregateSubscriptionsByMonth(subscriptions ?? [])),