#100 bug: autsync toggle on thew webui

When i try to turn on the only one demo shop to sync in the background (/webshops),i getting a full white page.

This is the browser console error

index-eLfnRBWZ.js:642 [DEBUG] Store smartboticsapptest: {enabled: undefined, sync_config: {…}}
index-eLfnRBWZ.js:642 [DEBUG] Toggle called: {storeId: '3e8bbd69-e20f-40ee-9e15-2056762988f6', storeName: 'smartboticsapptest', currentEnabled: false, newEnabled: true}
index-eLfnRBWZ.js:40 TypeError: U.map is not a function
    at index-eLfnRBWZ.js:642:98528
    at Array.map (<anonymous>)
    at index-eLfnRBWZ.js:642:98434
    at Mu (index-eLfnRBWZ.js:38:17818)
    at Pv (index-eLfnRBWZ.js:38:18276)
    at Object.useState (index-eLfnRBWZ.js:38:24656)
    at _e.useState (index-eLfnRBWZ.js:9:6397)
    at lNe (index-eLfnRBWZ.js:642:92965)
    at jw (index-eLfnRBWZ.js:38:16998)
    at mx (index-eLfnRBWZ.js:40:3139)
px @ index-eLfnRBWZ.js:40
MA.n.callback @ index-eLfnRBWZ.js:40
Hj @ index-eLfnRBWZ.js:38
sN @ index-eLfnRBWZ.js:40
qA @ index-eLfnRBWZ.js:40
JF @ index-eLfnRBWZ.js:40
a6 @ index-eLfnRBWZ.js:40
us @ index-eLfnRBWZ.js:40
cN @ index-eLfnRBWZ.js:40
Vi @ index-eLfnRBWZ.js:38
(anonymous) @ index-eLfnRBWZ.js:40
index-eLfnRBWZ.js:642 Uncaught TypeError: U.map is not a function
    at index-eLfnRBWZ.js:642:98528
    at Array.map (<anonymous>)
    at index-eLfnRBWZ.js:642:98434
    at Mu (index-eLfnRBWZ.js:38:17818)
    at Pv (index-eLfnRBWZ.js:38:18276)
    at Object.useState (index-eLfnRBWZ.js:38:24656)
    at _e.useState (index-eLfnRBWZ.js:9:6397)
    at lNe (index-eLfnRBWZ.js:642:92965)
    at jw (index-eLfnRBWZ.js:38:16998)
    at mx (index-eLfnRBWZ.js:40:3139)
(anonymous) @ index-eLfnRBWZ.js:642
(anonymous) @ index-eLfnRBWZ.js:642
Mu @ index-eLfnRBWZ.js:38
Pv @ index-eLfnRBWZ.js:38
useState @ index-eLfnRBWZ.js:38
_e.useState @ index-eLfnRBWZ.js:9
lNe @ index-eLfnRBWZ.js:642
jw @ index-eLfnRBWZ.js:38
mx @ index-eLfnRBWZ.js:40
tO @ index-eLfnRBWZ.js:40
ZA @ index-eLfnRBWZ.js:40
n6 @ index-eLfnRBWZ.js:40
qh @ index-eLfnRBWZ.js:40
Cx @ index-eLfnRBWZ.js:40
cN @ index-eLfnRBWZ.js:40
Vi @ index-eLfnRBWZ.js:38
(anonymous) @ index-eLfnRBWZ.js:40
index-eLfnRBWZ.js:642 [DEBUG] Store smartboticsapptest: {enabled: undefined, sync_config: {…}}

@fszontagh I'm starting work on this issue now!

I can see that the error TypeError: U.map is not a function is occurring when you toggle the autosync on the webshops page. The debug logs show enabled: undefined which suggests the issue is related to how the sync configuration state is being handled.

My plan:

1. Find the WebShops page component and the autosync toggle logic
2. Identify where .map() is being called on a non-array value (likely after the API response)
3. Add proper null/undefined checks to ensure the data is an array before calling .map()
4. Test the fix locally

I'll update you shortly with the fix!

@fszontagh I've identified and fixed the bug! 🎉

Root Cause

The error TypeError: U.map is not a function was occurring in the handleToggleStoreEnabled function in IntegrationsContent.tsx. The issue was in the optimistic UI update code:

store_sync_config: shop.store_sync_config?.map(config => ({
  ...config,
  enabled: newEnabled
})) || [{ enabled: newEnabled }]

The problem was:

1. When store_sync_config was undefined or null, the optional chaining would return undefined
2. The fallback [{ enabled: newEnabled }] only had the enabled property, missing sync_frequency and other required fields
3. This incomplete object caused the component to crash when re-rendering

Fix Applied

I've updated the code to properly handle the store_sync_config array:

// Ensure store_sync_config is always an array with proper structure
const currentConfig = Array.isArray(shop.store_sync_config) && shop.store_sync_config.length > 0
  ? shop.store_sync_config[0]
  : { enabled: false, sync_frequency: 'hourly' };

return {
  ...shop,
  store_sync_config: [{
    ...currentConfig,
    enabled: newEnabled
  }]
};

This ensures:

• ✅ store_sync_config is always an array
• ✅ The config object always has all required properties
• ✅ Both the optimistic update and error revert handlers are fixed

Commit

The fix has been committed and pushed: 8245e51

Please rebuild and redeploy the frontend to apply the fix. After deployment, the autosync toggle should work without causing a white page error.

If i change the state to on then the switch jumping back to off. If i refresh the page, shows off.

@fszontagh I see the issue is not fully resolved yet - the switch is jumping back to off and not persisting. I'm investigating this now.

The problem seems to be that while I fixed the frontend crash, the actual API call to save the enabled state is likely failing or not working correctly. Let me:

1. Check the API endpoint that handles the sync config update
2. Verify the database table structure for store_sync_config
3. Review the mutation logic in the frontend

I'll get this properly fixed for you!

@fszontagh I've found and fixed the root cause! 🎉

Root Cause Analysis

The issue was that Supabase returns store_sync_config as a single object instead of an array due to the UNIQUE constraint on store_id in the database. When there's a UNIQUE constraint, PostgREST (Supabase's API layer) recognizes this as a one-to-one relationship and returns a single object instead of an array.

The frontend code was expecting an array format (shop.store_sync_config?.[0]?.enabled) but receiving an object format (shop.store_sync_config?.enabled), causing:

1. The enabled value to be undefined (hence your debug log showing enabled: undefined)
2. The switch to show the wrong state
3. The switch to revert back after toggling

Fix Applied

Commit: dd7e832

I added a getSyncConfig() helper function that handles both array and object formats gracefully:

function getSyncConfig(store: ConnectedStore) {
  if (!store.store_sync_config) return null;
  if (Array.isArray(store.store_sync_config)) {
    return store.store_sync_config[0] || null;
  }
  return store.store_sync_config;
}

All accesses to store_sync_config throughout the component now use this helper, ensuring compatibility with Supabase's response format.

Next Steps

Please rebuild and redeploy the frontend. After deployment:

1. The autosync toggle should now correctly show the current state (ON since the database shows enabled: true)
2. Toggling should persist correctly without reverting
3. No more white page errors

Let me know if you need any additional testing or if there are other issues!