From 2e1083039df9c28f11426ac1a04c680a9ef46283 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Tue, 11 Nov 2025 15:45:33 +0700
Subject: [PATCH] fix: Channel toggle not working and multiple API calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 🐛 Bug Fixes

### Issue 1: Toggle Not Saving
**Problem:** Channel toggle always returned `enabled: true`
**Root Cause:** Backend using `get_param()` instead of `get_json_params()`
**Fix:** Updated `toggle_channel()` to properly parse JSON POST data

**Backend Changes:**
```php
// Before
$channel_id = $request->get_param('channelId');
$enabled = $request->get_param('enabled');

// After
$params = $request->get_json_params();
$channel_id = isset($params['channelId']) ? $params['channelId'] : null;
$enabled = isset($params['enabled']) ? $params['enabled'] : null;
```

### Issue 2: Multiple API Calls (3x)
**Problem:** Single toggle triggered 3 requests
**Root Cause:** Query invalidation causing immediate refetch
**Fix:** Implemented optimistic updates with rollback

**Frontend Changes:**
- ✅ `onMutate` - Cancel pending queries + optimistic update
- ✅ `onSuccess` - Show toast only
- ✅ `onError` - Rollback + show error
- ✅ `onSettled` - Refetch to sync with server

**Request Flow:**
```
Before: Toggle → API call → Invalidate → Refetch (3 requests)
After:  Toggle → Optimistic update → API call → Refetch (2 requests)
```

### Benefits

1. **Instant UI feedback** - Toggle responds immediately
2. **Fewer API calls** - Reduced from 3 to 2 requests
3. **Error handling** - Automatic rollback on failure
4. **Better UX** - No flickering or delays

### Testing

- [x] Toggle email channel on/off
- [x] Toggle push channel on/off
- [x] Verify state persists on reload
- [x] Check network tab for request count
- [x] Test error handling (disconnect network)

---

**Channel toggles now work correctly!** ✅
---
 .../Settings/Notifications/Channels.tsx       | 28 +++++++++++++++++--
 includes/Api/NotificationsController.php      | 13 +++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Notifications/Channels.tsx b/admin-spa/src/routes/Settings/Notifications/Channels.tsx
index fe19d97..6165b94 100644
--- a/admin-spa/src/routes/Settings/Notifications/Channels.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/Channels.tsx
@@ -49,13 +49,37 @@ export default function NotificationChannels() {
     mutationFn: async ({ channelId, enabled }: { channelId: string; enabled: boolean }) => {
       return api.post('/notifications/channels/toggle', { channelId, enabled });
     },
+    onMutate: async ({ channelId, enabled }) => {
+      // Cancel outgoing refetches
+      await queryClient.cancelQueries({ queryKey: ['notification-channels'] });
+      
+      // Snapshot previous value
+      const previousChannels = queryClient.getQueryData(['notification-channels']);
+      
+      // Optimistically update
+      queryClient.setQueryData(['notification-channels'], (old: any) => {
+        if (!old) return old;
+        return old.map((channel: any) => 
+          channel.id === channelId ? { ...channel, enabled } : channel
+        );
+      });
+      
+      return { previousChannels };
+    },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notification-channels'] });
       toast.success(__('Channel updated'));
     },
-    onError: (error: any) => {
+    onError: (error: any, variables, context: any) => {
+      // Rollback on error
+      if (context?.previousChannels) {
+        queryClient.setQueryData(['notification-channels'], context.previousChannels);
+      }
       toast.error(error?.message || __('Failed to update channel'));
     },
+    onSettled: () => {
+      // Refetch after mutation
+      queryClient.invalidateQueries({ queryKey: ['notification-channels'] });
+    },
   });
 
   // Check push notification support
diff --git a/includes/Api/NotificationsController.php b/includes/Api/NotificationsController.php
index 3b15618..2727410 100644
--- a/includes/Api/NotificationsController.php
+++ b/includes/Api/NotificationsController.php
@@ -553,8 +553,9 @@ class NotificationsController {
 	 * @return WP_REST_Response
 	 */
 	public function toggle_channel(WP_REST_Request $request) {
-		$channel_id = $request->get_param('channelId');
-		$enabled = $request->get_param('enabled');
+		$params = $request->get_json_params();
+		$channel_id = isset($params['channelId']) ? $params['channelId'] : null;
+		$enabled = isset($params['enabled']) ? $params['enabled'] : null;
 		
 		if (empty($channel_id)) {
 			return new WP_Error(
@@ -564,6 +565,14 @@ class NotificationsController {
 			);
 		}
 		
+		if ($enabled === null) {
+			return new WP_Error(
+				'invalid_enabled',
+				__('Enabled parameter is required', 'woonoow'),
+				['status' => 400]
+			);
+		}
+		
 		// Only allow toggling built-in channels
 		if ($channel_id === 'email') {
 			update_option('woonoow_email_notifications_enabled', (bool) $enabled);