refactor(dashboard): Move hooks to a dedicated directory and update imports

packages/dashboard/src/components/layout/channel-switcher.tsx

@@ -12,7 +12,7 @@ import {
 } from '@/components/ui/dropdown-menu.js';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
 import { Trans } from '@lingui/react/macro';
-import { useChannel } from '@/providers/channel-provider.js';
+import { useChannel } from '@/hooks/use-channel.js';
 import { Link } from '@tanstack/react-router';
 
 export function ChannelSwitcher() {

packages/dashboard/src/components/layout/content-language-selector.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useServerConfig } from '@/providers/server-config.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
 import { cn } from '@/lib/utils.js';
 import { getLocalizedLanguageName } from '@/lib/locale-utils.js';
-import { useUserSettings } from '@/providers/user-settings.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { useLocalFormat } from '@/hooks/use-local-format.js';
 
 interface ContentLanguageSelectorProps {

packages/dashboard/src/components/layout/language-dialog.tsx

@@ -13,7 +13,7 @@ import { FormItem, FormLabel } from '../ui/form.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
 import { Label } from '../ui/label.js';
 import { uiConfig } from 'virtual:vendure-ui-config';
-import { useUserSettings } from '@/providers/user-settings.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
 
 /**
  * This is copied from the generated types from @vendure/common/lib/generated-types.d.ts

packages/dashboard/src/components/layout/nav-user.tsx

@@ -1,19 +1,15 @@
 'use client';
 
-import { useAuth } from '@/providers/auth.js';
+import { useAuth } from '@/hooks/use-auth.js';
 import { Route } from '@/routes/_authenticated.js';
 import { Link, useRouter } from '@tanstack/react-router';
 import {
-    BadgeCheck,
-    Bell,
     ChevronsUpDown,
-    CreditCard,
     LogOut,
     Monitor,
     Moon,
     Sparkles,
-    Sun,
-    SunMoon,
+    Sun
 } from 'lucide-react';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
@@ -23,20 +19,20 @@ import {
     DropdownMenuGroup,
     DropdownMenuItem,
     DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-    DropdownMenuSub,
-    DropdownMenuSubTrigger,
     DropdownMenuPortal,
-    DropdownMenuSubContent,
     DropdownMenuRadioGroup,
     DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu.js';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { useMemo } from 'react';
-import { useUserSettings } from '@/providers/user-settings.js';
-import { LanguageDialog } from './language-dialog.js';
 import { Dialog, DialogTrigger } from '../ui/dialog.js';
+import { LanguageDialog } from './language-dialog.js';
 
 export function NavUser() {
     const { isMobile } = useSidebar();

packages/dashboard/src/hooks/use-auth.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AuthContext } from '../providers/auth.js';
+
+
+export function useAuth() {
+    const context = React.useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}

packages/dashboard/src/hooks/use-channel.ts

@@ -0,0 +1,12 @@
+import { ChannelContext } from '@/providers/channel-provider.js';
+import * as React from 'react';
+
+// Hook to use the channel context
+
+export function useChannel() {
+    const context = React.useContext(ChannelContext);
+    if (context === undefined) {
+        throw new Error('useChannel must be used within a ChannelProvider');
+    }
+    return context;
+}

packages/dashboard/src/hooks/use-local-format.ts

@@ -1,7 +1,8 @@
-import { useServerConfig } from '@/providers/server-config.js';
 import { useLingui } from '@lingui/react';
 import { useCallback, useMemo } from 'react';
 
+import { useServerConfig } from './use-server-config.js';
+
 /**
  * @description
  * This hook is used to format numbers and currencies using the configured language and

packages/dashboard/src/hooks/use-server-config.ts

@@ -0,0 +1,4 @@
+import { ServerConfigContext } from '@/providers/server-config.js';
+import React from 'react';
+
+export const useServerConfig = () => React.useContext(ServerConfigContext);

packages/dashboard/src/hooks/use-theme.ts

@@ -0,0 +1,10 @@
+import { ThemeProviderContext } from '@/providers/theme-provider.js';
+import { useContext } from 'react';
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+    return context;
+};

packages/dashboard/src/hooks/use-user-settings.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { UserSettingsContext } from '../providers/user-settings.js';
+
+// Hook to use the user settings
+
+export const useUserSettings = () => {
+    const context = useContext(UserSettingsContext);
+    if (context === undefined) {
+        throw new Error('useUserSettings must be used within a UserSettingsProvider');
+    }
+    return context;
+};

packages/dashboard/src/main.tsx

@@ -1,5 +1,5 @@
 import { AppProviders, queryClient, router } from '@/app-providers.js';
-import { useAuth } from '@/providers/auth.js';
+import { useAuth } from './hooks/use-auth.js';
 import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
 import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
 import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';

packages/dashboard/src/providers/auth.tsx

@@ -62,7 +62,7 @@ const ActiveAdministratorQuery = graphql(`
     }
 `);
 
-const AuthContext = React.createContext<AuthContext | null>(null);
+export const AuthContext = React.createContext<AuthContext | null>(null);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
     const [status, setStatus] = React.useState<AuthContext['status']>('verifying');
@@ -151,10 +151,3 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     );
 }
 
-export function useAuth() {
-    const context = React.useContext(AuthContext);
-    if (!context) {
-        throw new Error('useAuth must be used within an AuthProvider');
-    }
-    return context;
-}

packages/dashboard/src/providers/channel-provider.tsx

@@ -46,7 +46,7 @@ const ActiveChannelQuery = graphql(
 type Channel = ResultOf<typeof channelFragment>;
 
 // Define the context interface
-interface ChannelContext {
+export interface ChannelContext {
     activeChannel: Channel | undefined;
     channels: Channel[];
     selectedChannelId: string | undefined;
@@ -56,7 +56,7 @@ interface ChannelContext {
 }
 
 // Create the context
-const ChannelContext = React.createContext<ChannelContext | undefined>(undefined);
+export const ChannelContext = React.createContext<ChannelContext | undefined>(undefined);
 
 // Local storage key for the selected channel
 const SELECTED_CHANNEL_KEY = 'vendure-selected-channel';
@@ -129,11 +129,3 @@ export function ChannelProvider({ children }: { children: React.ReactNode }) {
     return <ChannelContext.Provider value={contextValue}>{children}</ChannelContext.Provider>;
 }
 
-// Hook to use the channel context
-export function useChannel() {
-    const context = React.useContext(ChannelContext);
-    if (context === undefined) {
-        throw new Error('useChannel must be used within a ChannelProvider');
-    }
-    return context;
-}

packages/dashboard/src/providers/server-config.tsx

@@ -276,6 +276,4 @@ export const ServerConfigProvider = ({ children }: { children: React.ReactNode }
     return <ServerConfigContext.Provider value={value}>{children}</ServerConfigContext.Provider>;
 };
 
-export const useServerConfig = () => React.useContext(ServerConfigContext);
-
-const ServerConfigContext = React.createContext<ServerConfig | null>(null);
+export const ServerConfigContext = React.createContext<ServerConfig | null>(null);

packages/dashboard/src/providers/theme-provider.tsx

@@ -1,5 +1,5 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { useUserSettings } from './user-settings.js';
+import { createContext, useEffect, useState } from 'react';
+import { useUserSettings } from '../hooks/use-user-settings.js';
 
 export type Theme = 'dark' | 'light' | 'system';
 
@@ -19,7 +19,7 @@ const initialState: ThemeProviderState = {
     setTheme: () => null,
 };
 
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+export const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({ children, defaultTheme = 'system', ...props }: ThemeProviderProps) {
     const { settings, setTheme } = useUserSettings();
@@ -52,10 +52,3 @@ export function ThemeProvider({ children, defaultTheme = 'system', ...props }: T
     );
 }
 
-export const useTheme = () => {
-    const context = useContext(ThemeProviderContext);
-
-    if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
-    return context;
-};

packages/dashboard/src/providers/user-settings.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect } from 'react';
 import { Theme } from './theme-provider.js';
 
 export interface UserSettings {
@@ -22,14 +22,14 @@ const defaultSettings: UserSettings = {
 interface UserSettingsContextType {
     settings: UserSettings;
     setDisplayLanguage: (language: string) => void;
-    setDisplayLocale: (locale: string | null) => void;
+    setDisplayLocale: (locale: string | undefined) => void;
     setContentLanguage: (language: string) => void;
-    setTheme: (theme: string) => void;
+    setTheme: (theme: Theme) => void;
     setDisplayUiExtensionPoints: (display: boolean) => void;
     setMainNavExpanded: (expanded: boolean) => void;
 }
 
-const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
+export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
 
 const STORAGE_KEY = 'vendure-user-settings';
 
@@ -76,11 +76,4 @@ export const UserSettingsProvider: React.FC<React.PropsWithChildren<{}>> = ({ ch
     return <UserSettingsContext.Provider value={contextValue}>{children}</UserSettingsContext.Provider>;
 };
 
-// Hook to use the user settings
-export const useUserSettings = () => {
-    const context = useContext(UserSettingsContext);
-    if (context === undefined) {
-        throw new Error('useUserSettings must be used within a UserSettingsProvider');
-    }
-    return context;
-};
+

packages/dashboard/src/routes/login.tsx

@@ -1,4 +1,4 @@
-import { useAuth } from '@/providers/auth.js';
+import { useAuth } from '@/hooks/use-auth.js';
 import { LoginForm } from '@/components/login/login-form.js';
 import { createFileRoute, Navigate, redirect, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';