Custom React Hooks

Overview

The application uses custom React hooks for data fetching, state management, and UI interactions. All hooks are located in src/hooks/.

Data Fetching Hooks

useUsers

Location: src/hooks/useUsers.ts

Hook for managing user data and operations.

Returns:

• users: Array of users
• loading: Loading state
• error: Error state
• pagination: Pagination metadata
• fetchUsers: Function to fetch users with filters
• refreshUsers: Function to refresh current user list

Usage:

const { users, loading, fetchUsers } = useUsers();
 
useEffect(() => {
  fetchUsers({ page: 1, limit: 10, search: "john" });
}, []);

useConferences

Location: src/hooks/useConferences.ts

Hook for managing conference data.

Returns:

• conferences: Array of conferences
• loading: Loading state
• error: Error state
• pagination: Pagination metadata
• fetchConferences: Function to fetch conferences
• createConference: Function to create a conference
• updateConference: Function to update a conference
• deleteConference: Function to delete a conference

useEvents

Location: src/hooks/useEvents.ts

Hook for managing event data.

Returns:

• events: Array of events
• loading: Loading state
• error: Error state
• pagination: Pagination metadata
• fetchEvents: Function to fetch events
• createEvent: Function to create an event
• updateEvent: Function to update an event
• deleteEvent: Function to delete an event

useSpeakers

Location: src/hooks/useSpeakers.ts

Hook for managing speaker data.

Returns:

• speakers: Array of speakers
• loading: Loading state
• error: Error state
• pagination: Pagination metadata
• fetchSpeakers: Function to fetch speakers
• createSpeaker: Function to create a speaker
• updateSpeaker: Function to update a speaker
• deleteSpeaker: Function to delete a speaker

useAgenda

Location: src/hooks/useAgenda.ts

Hook for managing agenda items.

Returns:

• agendaItems: Array of agenda items
• loading: Loading state
• error: Error state
• fetchAgendaItems: Function to fetch agenda items for a conference
• createAgendaItem: Function to create an agenda item
• updateAgendaItem: Function to update an agenda item
• deleteAgendaItem: Function to delete an agenda item

useQuests

Location: src/hooks/useQuests.ts

Hook for managing quests list.

Returns:

• quests: Array of quests
• loading: Loading state
• error: Error state
• pagination: Pagination metadata
• pendingCounts: Pending submission counts per quest
• fetchQuests: Function to fetch quests
• toggleQuestActive: Function to toggle quest active status
• deleteQuest: Function to delete a quest

useQuestDetail

Location: src/hooks/useQuestDetail.ts

Hook for managing individual quest details.

Returns:

• quest: Quest object
• tasks: Array of quest tasks
• loading: Loading state
• error: Error state
• fetchQuest: Function to fetch quest details
• updateQuest: Function to update quest
• updateTasks: Function to update quest tasks
• updateQuestAndTasks: Function to update both quest and tasks

useQuestParticipants

Location: src/hooks/useQuestParticipants.ts

Hook for managing quest participants.

Returns:

• participants: Array of participants
• summary: Participant summary statistics
• loading: Loading state
• error: Error state
• filters: Current filter state
• fetchParticipants: Function to fetch participants with filters
• approveRegistration: Function to approve participant registration
• rejectRegistration: Function to reject participant registration
• assignRewardCodes: Function to assign reward codes

useQuestPendingSubmissions

Location: src/hooks/useQuestPendingSubmissions.ts

Hook for managing pending quest submissions.

Returns:

• submissions: Array of pending submissions
• loading: Loading state
• error: Error state
• pagination: Pagination metadata
• fetchSubmissions: Function to fetch pending submissions
• approveSubmission: Function to approve a submission
• rejectSubmission: Function to reject a submission

useQuestReminderTemplates

Location: src/hooks/useQuestReminderTemplates.ts

Hook for managing quest reminder templates.

Returns:

• templates: Array of reminder templates
• loading: Loading state
• error: Error state
• fetchTemplates: Function to fetch templates
• createTemplate: Function to create a template
• updateTemplate: Function to update a template
• deleteTemplate: Function to delete a template
• setDefaultTemplate: Function to set default template

Utility Hooks

usePagination

Location: src/hooks/usePagination.ts

Hook for managing pagination state.

Returns:

• page: Current page number
• limit: Items per page
• setPage: Function to set page
• setLimit: Function to set limit
• reset: Function to reset to page 1

Usage:

const { page, limit, setPage, setLimit } = usePagination();

useDebounce

Location: src/hooks/useDebounce.ts

Hook for debouncing values (useful for search inputs).

Parameters:

• value: Value to debounce
• delay: Debounce delay in milliseconds

Returns: Debounced value

Usage:

const [searchTerm, setSearchTerm] = useState("");
const debouncedSearch = useDebounce(searchTerm, 500);

use-mobile

Location: src/hooks/use-mobile.ts

Hook for detecting mobile devices.

Returns: Boolean indicating if device is mobile

Usage:

const isMobile = useMobile();

Hook Patterns

Error Handling

All data fetching hooks follow a consistent error handling pattern:

• Catch errors and set error state
• Display toast notifications for user feedback
• Log errors to console for debugging

Loading States

All hooks manage loading states to show loading indicators in UI.

Data Refreshing

Most hooks provide refresh functions to refetch data after mutations.

Best Practices

1. Always handle loading and error states in components using hooks
2. Use debounced search for better performance
3. Refresh data after mutations (create, update, delete)
4. Handle pagination properly with usePagination hook
5. Clean up any subscriptions or timers in useEffect cleanup functions