fix #1469

Author: krausest

frameworks/keyed/react-hooks-use-transition/src/main.jsx

@@ -51,7 +51,14 @@ const listReducer = (state, action) => {
     case 'CLEAR':
       return { data: [], selected: 0 };
     case 'SWAP_ROWS':
-      return data.length > 998 ? { data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]], selected } : state;
+      const newdata = [...data];
+      if (data.length > 998) {
+        const d1 = newdata[1];
+        const d998 = newdata[998];
+        newdata[1] = d998;
+        newdata[998] = d1;
+      }
+      return { data: newdata, selected };
     case 'REMOVE': {
       const idx = data.findIndex((d) => d.id === action.id);
 

frameworks/keyed/react-hooks/src/main.jsx

@@ -51,7 +51,14 @@ const listReducer = (state, action) => {
     case 'CLEAR':
       return { data: [], selected: 0 };
     case 'SWAP_ROWS':
-      return data.length > 998 ? { data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]], selected } : state;
+      const newdata = [...data];
+      if (data.length > 998) {
+        const d1 = newdata[1];
+        const d998 = newdata[998];
+        newdata[1] = d998;
+        newdata[998] = d1;
+      }
+      return { data: newdata, selected };
     case 'REMOVE': {
       const idx = data.findIndex((d) => d.id === action.id);
 

frameworks/keyed/react-recoil/src/main.jsx

@@ -134,19 +134,16 @@ const Jumbotron = memo(
     ]);
 
     const swapRows = useCallback(() => {
-      setAppState(({ data, selected }) =>
-        data.length > 998
-          ? {
-            data: [
-              data[0],
-              data[998],
-              ...data.slice(2, 998),
-              data[1],
-              data[999],
-            ],
-            selected,
-          }
-          : state
+      setAppState(({ data, selected }) => {
+        const newdata = [...data];
+        if (data.length > 998) {
+          const d1 = newdata[1];
+          const d998 = newdata[998];
+          newdata[1] = d998;
+          newdata[998] = d1;
+        }
+        return { data: newdata, selected };
+      }
       );
     }, [setAppState]);
 

frameworks/keyed/react-redux-hooks-immutable/src/main.jsx

@@ -56,8 +56,12 @@ const store = createStore((state = initialState, action) => {
       return initialState;
     case 'SWAP_ROWS': {
       return state.updateIn(['data'], data => {
-        const tmp = data.get(1);
-        return data.set(1, data.get(998)).set(998, tmp);
+        if (data.size>998) {
+          const tmp = data.get(1);
+          return data.set(1, data.get(998)).set(998, tmp);
+        } else {
+          return data;
+        }
       });
     }
   }

frameworks/keyed/react-redux-hooks/src/main.jsx

@@ -52,9 +52,11 @@ const store = createStore((state = { data: [], selected: 0 }, action) => {
       return { data: [], selected: 0 };
     case "SWAP_ROWS": {
       const newData = data.slice();
-      const tmp = newData[1];
-      newData[1] = newData[998];
-      newData[998] = tmp;
+      if (data.length>998) {
+        const tmp = newData[1];
+        newData[1] = newData[998];
+        newData[998] = tmp;
+      }
       return { data: newData, selected };
     }
   }

frameworks/keyed/react-redux-rematch/src/main.jsx

@@ -108,10 +108,14 @@ const mainModel = {
     SELECT: ({ data }, id) => ({ data, selected: id }),
     CLEAR: () => ({ data: [], selected: 0 }),
     SWAP_ROWS: ({ data, selected }) => {
-      return {
-        data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]],
-        selected
-      };
+      const newdata = [...data];
+      if (data.length > 998) {
+        const d1 = newdata[1];
+        const d998 = newdata[998];
+        newdata[1] = d998;
+        newdata[998] = d1;
+      }
+      return { data: newdata, selected };
     }
   }
 };

frameworks/keyed/react-redux/src/main.jsx

@@ -48,8 +48,15 @@ const store = createStore((state = { data: [], selected: 0 }, action) => {
     case 'CLEAR':
       return { data: [], selected: 0 };
     case 'SWAP_ROWS':
-      return { data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]], selected };
-  }
+      const newdata = [...data];
+      if (data.length > 998) {
+        const d1 = newdata[1];
+        const d998 = newdata[998];
+        newdata[1] = d998;
+        newdata[998] = d1;
+      }
+      return { data: newdata, selected };
+    }
   return state;
 });
 

frameworks/keyed/react-rxjs/src/main.jsx

@@ -111,9 +111,11 @@ const items$ = state(
           return init;
         case "swap": {
           const newData = data.slice();
-          const tmp = newData[1];
-          newData[1] = newData[998];
-          newData[998] = tmp;
+          if (data.length>998) {
+            const tmp = newData[1];
+            newData[1] = newData[998];
+            newData[998] = tmp;
+          }
           return newData;
         }
       }

frameworks/keyed/react-tagged-state/src/main.jsx

@@ -98,7 +98,15 @@ const Main = () => (
                             selected(0);
                         }}/>
                         <Button id="swaprows" title="Swap Rows"
-                                cb={() => data((curr) => curr.length > 998 ? [curr[0], curr[998], ...curr.slice(2, 998), curr[1], curr[999]] : curr)}/>
+                                cb={() => data((cur) => {
+                                    const newData = cur.slice();
+                                    if (cur.length>998) {
+                                      const tmp = newData[1];
+                                      newData[1] = newData[998];
+                                      newData[998] = tmp;
+                                    }
+                                    return newData;
+                                })}/>
                     </div>
                 </div>
             </div>

frameworks/keyed/react-tracked/src/main.jsx

@@ -51,9 +51,11 @@ const reducer = (state, action) => {
       return { data: [], selected: 0 };
     case "SWAP_ROWS": {
       const newData = data.slice();
-      const tmp = newData[1];
-      newData[1] = newData[998];
-      newData[998] = tmp;
+      if (data.length>998) {
+        const tmp = newData[1];
+        newData[1] = newData[998];
+        newData[998] = tmp;
+      }
       return { data: newData, selected };
     }
   }