Merge pull request #150 from razeprasine/Issue38Fix

Issue38 fix

Author: therealjhay

app/(merchant)/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import dynamic from 'next/dynamic';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -77,10 +77,14 @@ export default function DashboardPage() {
 
   const firstName = user?.name?.split(' ')[0] ?? 'Merchant';
 
-  const handleCopy = (text: string) => {
+  const handleCopy = useCallback((text: string) => {
     navigator.clipboard.writeText(text);
     notify.success('Copied to clipboard');
-  };
+  }, []);
+
+  const handlePeriodChange = useCallback((p: Period) => {
+    setActivePeriod(p);
+  }, []);
 
   const toggleSimulation = () => {
     const nextState = !simulationEnabled;
@@ -240,7 +244,7 @@ export default function DashboardPage() {
                 {PERIOD_OPTIONS.map((p) => (
                   <button
                     key={p}
-                    onClick={() => setActivePeriod(p)}
+                    onClick={() => handlePeriodChange(p)}
                     className={cn(
                       'min-h-[44px] min-w-[44px] px-3 py-1 rounded-md text-xs font-semibold transition-all',
                       activePeriod === p

app/(merchant)/settings/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -27,6 +27,7 @@ const notificationOptions = [
 ];
 
 export default function SettingsPage() {
+  const router = useRouter();
   const [activeTab, setActiveTab] = useState('profile');
   const [notificationPreferences, setNotificationPreferences] = useState<Record<string, boolean>>({
     paymentReceived: true,
@@ -37,11 +38,15 @@ export default function SettingsPage() {
   const { user, logout } = useAuthStore();
   const notify = useNotify();
 
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
     logout();
     notify.success('Logged out successfully');
     router.push('/auth/login');
-  };
+  }, [logout, router]);
+
+  const handleTabChange = useCallback((id: string) => {
+    setActiveTab(id);
+  }, []);
 
   const toggleNotificationPreference = (id: string) => {
     setNotificationPreferences((current) => ({
@@ -67,7 +72,7 @@ export default function SettingsPage() {
             {tabs.map(({ id, label, icon: Icon }) => (
               <button
                 key={id}
-                onClick={() => setActiveTab(id)}
+                onClick={() => handleTabChange(id)}
                 className={cn(
                   'w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors text-left',
                   activeTab === id

app/auth/login/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, Suspense } from 'react';
+import { useState, useEffect, Suspense, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
@@ -49,7 +49,7 @@ export default function LoginPage() {
     resolver: zodResolver(loginSchema),
   });
 
-  const onSubmit = async (data: LoginFormValues) => {
+  const onSubmit = useCallback(async (data: LoginFormValues) => {
     setIsLoading(true);
     try {
       const isMockAdmin = data.email.includes('admin');
@@ -102,10 +102,10 @@ export default function LoginPage() {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [login, router, success, error]);
 
   // When WalletModal reports a connected address, perform the merchant login flow
-  const onWalletConnected = async (address: string) => {
+  const onWalletConnected = useCallback(async (address: string) => {
     setIsWalletLoading(true);
     try {
       const mockToken = 'mock_jwt_token_12345';
@@ -134,7 +134,7 @@ export default function LoginPage() {
     } finally {
       setIsWalletLoading(false);
     }
-  };
+  }, [login, success, error]);
 
 
   return (

components/layout/Topbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { Bell, Search, Menu, LogOut, Settings, KeyRound } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -34,11 +34,11 @@ export const Topbar = ({ onMenuClick, isMenuOpen, title, unreadNotificationCount
       ? `Notifications (${unreadNotificationCount} unread)`
       : "Notifications";
 
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
     logout();
     notify.success("Logged out successfully");
     router.push("/auth/login");
-  };
+  }, [logout, router]);
 
   const initials = user?.name
     ? user.name

fix.md

@@ -1,25 +1,17 @@
-29
-
-user avatar
-
-
- 
-15 matches
-#28 Ensure all forms are usable with mobile keyboards
+Add useCallback for event handlers in dashboard and settings
 Repo Avatar
 Betta-Pay/BettaPay-Frontend
-Description: When mobile keyboards are open, form fields can be hidden behind the keyboard. The login, register, payment link creation, and settings forms need to be scrollable and the active input should remain visible above the keyboard.
+Description: Inline functions passed as props (e.g., onClick, onChange, handleCopy) create new function references on every render, causing child components to re-render even with React.memo. Wrapping these in useCallback stabilizes the references.
 
 Requirements:
 
-Form containers should be within a scrollable area
-The or form wrapper should not have overflow: hidden that prevents scrolling to the focused input
-Test all forms with a mobile keyboard open (use Chrome DevTools device emulation)
-Ensure the submit button is reachable without scrolling excessively
+Wrap handleCopy, handleLogout, onSubmit, and other handlers in useCallback
+Include correct dependency arrays
+Apply across all pages with interactive elements
 Suggested execution steps:
 
-Review all form pages and verify the scroll behavior with keyboard open
-In app/auth/layout.tsx, ensure the form column uses overflow-y: auto not overflow: hidden
-Add scroll-margin-bottom: 200px to form submit buttons so they scroll above the keyboard
-Test the settings page form fields (business info, security) with keyboard open
-Test the payment link creation dialog — dialogs can be problematic with mobile keyboards
+In app/(merchant)/dashboard/page.tsx, wrap handleCopy and the period toggle handler in useCallback
+In app/(merchant)/settings/page.tsx, wrap handleLogout and tab change handlers
+In app/auth/login/page.tsx, wrap onSubmit and onWalletConnected
+In components/layout/Topbar.tsx, wrap handleLogout
+Use React DevTools Profiler to verify fewer re-renders