I have a drop down and a few collapsable drawers in my app.
They have been working perfectly until a few commits ago. I’m honestly not sure when they broke, but now in the v0 preview they don’t work. The work perfectly on the deployed URL, just not in preview.
It’s not the end of the world, but makes rapid testing/iteration tough.
Has anyone else experienced anything similar?
Details about the components below…
Technical Stack Information
Language & Framework
-
Language: TypeScript (strict typing)
-
Framework: Next.js (App Router)
-
React Version: React 19 (based on package.json)
-
Rendering Strategy: Mix of client and server components
-
Client components marked with
'use client'directive -
Heavy use of React hooks and context
Component Implementation Details
Insights Drawer
// File: components/insights-drawer.tsx
// Implementation: React functional component with:
- TypeScript interfaces for props and state
- Custom hooks for data processing
- Complex conditional rendering
- Tailwind CSS for styling
- Lucide React icons
- shadcn/ui components (Card, Tooltip)
Game Selector
// File: components/game-selector.tsx
// Implementation: React dropdown component with:
- useState for local open/close state
- date-fns for date formatting
- Complex date parsing to avoid timezone issues
- Tailwind CSS for styling
- shadcn/ui DropdownMenu components
State Management
-
Pattern: React Context API (not Redux)
-
Main Contexts:
-
TeamConfigContext: Manages team, players, games, positions -
AuthContext: Manages user authentication state -
Data Flow: Parent contexts → Custom hooks → Components
Database Integration
-
ORM: None (direct Supabase client queries)
-
Query Pattern:
-
Async/await pattern
-
Error handling with try/catch
-
Data transformation between DB and UI formats
Key Code Patterns
- Heavy use of React hooks (useState, useEffect, useMemo)
- TypeScript interfaces for type safety
- Functional programming approach (map, filter, reduce)
- Component composition pattern
- Conditional rendering based on data availability
Browser APIs Used
- LocalStorage for persistent settings
- SessionStorage for caching
- Crypto API for UUID generation