feat: use town provider correctly

src/app/layout.tsx

@@ -7,6 +7,7 @@ import { Toaster } from 'sonner';
 import { PropsWithChildren } from 'react';
 import { QueryClientProvider } from '@/context/QueryClientProvider';
 import { RoleProvider } from '@/context/RoleProvider';
+import { TownProvider } from '../context/TownProvider';
 
 export const metadata = {
   title: 'Ajuda Dana - Sistema de Coordinación',
@@ -21,9 +22,11 @@ export default async function RootLayout({ children }: PropsWithChildren) {
         <SessionProvider>
           <RoleProvider>
             <QueryClientProvider>
-              <ModalProvider>
-                <SidebarLayout>{children}</SidebarLayout>
-              </ModalProvider>
+              <TownProvider>
+                <ModalProvider>
+                  <SidebarLayout>{children}</SidebarLayout>
+                </ModalProvider>
+              </TownProvider>
             </QueryClientProvider>
           </RoleProvider>
         </SessionProvider>

src/context/TownProvider.tsx

@@ -3,8 +3,29 @@
 import { useQuery } from '@tanstack/react-query';
 import { Town } from '@/types/Town';
 import { getTowns } from '@/lib/actions';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 
-export const useTowns = () => {
+export type TownContextData = {
+  towns: Town[];
+  isLoading: boolean;
+  error: Error | null;
+  getTownById: (id: number) => Town | null;
+};
+
+const TownContext = createContext<TownContextData>({
+  towns: [],
+  isLoading: false,
+  error: null,
+  getTownById: () => {
+    return null;
+  },
+});
+
+type TownProviderProps = {
+  children: ReactNode;
+};
+
+export const TownProvider: React.FC<TownProviderProps> = ({ children }) => {
   const {
     data: towns,
     isLoading,
@@ -14,7 +35,13 @@ export const useTowns = () => {
     queryFn: () => getTowns(),
   });
 
-  const getTownById = (id: number) => towns?.find((t) => t.id === id);
+  const getTownById = (id: number): Town | null => towns?.find((t) => t.id === id) || null;
 
-  return { towns: towns ?? [], isLoading, error, getTownById };
+  return (
+    <TownContext.Provider value={{ towns: towns || [], isLoading, error, getTownById }}>
+      {children}
+    </TownContext.Provider>
+  );
 };
+
+export const useTowns = () => useContext(TownContext);