Utilities & Hooks

Overview

The utils and hooks directories contain reusable logic and abstractions used across the app. These utilities simplify formatting, state handling, client-server operations, and component logic. This modular approach keeps business logic out of components and promotes reuse.

Custom Hooks

useDebounce

This hook delays updates to a value until after a specified delay period. It's useful for search inputs and filters where you don’t want to trigger an API call on every keystroke.

function useDebounce<T>(value: T, delay: number): T;

Use Case: Debounced search input in the inbox or listing filter.

useScrollPosition

Tracks the scroll position of the page or a specific element.

Used for:

• Showing/hiding navigation bars
• Animating scroll progress

useIsClient

Returns true if running in the browser (not during SSR).

const isClient = useIsClient();

Used to conditionally run client-only logic like DOM access or localStorage.

useLockBodyScroll

Disables background scrolling when a modal is open.

useLockBodyScroll();

Utilities

formatDate / formatTime

Standardized date/time formatting using date-fns. Ensures consistency across booking, messaging, and review timestamps.

calculateLumpsumPrice / calculatePerHourPrice

Core pricing logic used in:

• Listing previews
• Booking request form
• Messaging quote flow

mergeClasses (cn())

Combines class names with conditional logic.

cn("btn", isActive && "btn-primary");

Wrapped with class-variance-authority for consistency in ShadCN components.

getListingAvailability

Computes open slots or times a listing is available, based on user-provided availability settings. Used in the booking form and calendar display.

Best Practices

• Keep logic in utils/ or hooks/ if reused across pages or components
• Use TypeScript annotations for all helpers
• Favor pure functions for utilities
• Split large logic (e.g. pricing or availability) into multiple small, testable units