Merge pull request #1891 from cboard-org/fix-chunk-tiles

Quick fix for remove rows and columns function on fixed boards

Author: tomivm

src/components/Board/Board.container.js

@@ -24,7 +24,7 @@ import {
   speak,
   cancelSpeech
 } from '../../providers/SpeechProvider/SpeechProvider.actions';
-import { moveOrderItem } from '../FixedGrid/utils';
+import { getTilesListForNewOrder, moveOrderItem } from '../FixedGrid/utils';
 import {
   addBoards,
   changeBoard,
@@ -664,8 +664,14 @@ export class BoardContainer extends Component {
       } else {
         newOrder = this.getDefaultOrdering(board.tiles);
       }
+      const tilesForNewOrder = getTilesListForNewOrder({
+        tileItems: board.tiles,
+        order: newOrder
+      });
+
       const newBoard = {
         ...board,
+        tiles: tilesForNewOrder,
         grid: {
           ...board.grid,
           rows: newRows,
@@ -697,8 +703,13 @@ export class BoardContainer extends Component {
       } else {
         newOrder = this.getDefaultOrdering(board.tiles);
       }
+      const tilesForNewOrder = getTilesListForNewOrder({
+        tileItems: board.tiles,
+        order: newOrder
+      });
       const newBoard = {
         ...board,
+        tiles: tilesForNewOrder,
         grid: {
           ...board.grid,
           columns: newColumns,

src/components/FixedGrid/utils.ts

@@ -1,3 +1,5 @@
+import lodash from 'lodash';
+import { TileItem } from './../../types';
 export interface Grid {
   rows: number;
   columns: number;
@@ -123,3 +125,67 @@ export function getNewOrder({ columns,
 export function removeOrderItems(ids: string, order: GridOrder): GridOrder {
   return order.map(row => row.map(id => (id && ids.includes(id) ? null : id)));
 }
+
+function getDeprecatedOrderedPages({
+  tileItems,
+  order,
+}: {
+  tileItems: Array<TileItem>;
+  order: GridOrder;
+}): TileItem[][] {
+  const firstPageItemsInOrder = order.map((row) =>
+    row.map((id) => tileItems.find((item) => item.id === id) || null),
+  );
+
+  const firstPageIds = order.flat();
+  const orderedIds = new Set(order.flat());
+  const unorderedTiles = tileItems.filter((item) => !orderedIds.has(item.id));
+  const fillEmptyPositionsWithUnorderedTilesForOldBoards = ({
+    firstPageItemsInOrder,
+    unorderedTiles,
+  }: {
+    firstPageItemsInOrder: (TileItem | null)[][];
+    unorderedTiles: Array<TileItem>;
+  }) => {
+    let index = 0;
+    const deprecatedFirstPageItemsInOrder = firstPageItemsInOrder.map((row) =>
+      row.map((item) => {
+      if (item) return item;
+      index++;
+        return unorderedTiles[index - 1] || null;
+      }),
+    );
+    const deprecatedFirstPage = deprecatedFirstPageItemsInOrder
+      .flat()
+      .filter((item) => item !== null);
+    const restOfTiles = unorderedTiles.slice(index);
+
+    return { deprecatedFirstPage, restOfTiles };
+  };
+  
+  const { deprecatedFirstPage, restOfTiles } =
+    fillEmptyPositionsWithUnorderedTilesForOldBoards({
+      firstPageItemsInOrder,
+      unorderedTiles,
+    });
+
+  const size = firstPageIds.length;
+  const restOfPages = lodash.chunk(restOfTiles, size);
+  
+  return [deprecatedFirstPage, ...restOfPages];
+}
+
+export function getTilesListForNewOrder({
+  tileItems,
+  order,
+}: {
+  tileItems: Array<TileItem>;
+  order: GridOrder;
+}): TileItem[] {
+  const newPages = getDeprecatedOrderedPages({
+    order,
+    tileItems,
+  });
+  const tilesListForNewOrder = newPages.flat();
+  return tilesListForNewOrder;
+}

src/types.ts

@@ -0,0 +1,12 @@
+export interface TileItem {
+  id: string;
+  label?: string;
+  labelKey?: string;
+  vocalization?: string;
+  image: string;
+  loadBoard?: string;
+  sound?: string;
+  type?: string;
+  backgroundColor: string;
+  linkedBoard?: boolean;
+}