Group the cards without UI update

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop.jsx

@@ -77,7 +77,7 @@ const copy = (
   droppableSource,
   droppableDestination
 ) => {
-  const sourceClone = Array.from(source.itemIds);
+  const sourceClone = Array.from(source.categories.map(groupId => groupId.itemIds).flat());
   const destClone = Array.from(destination.items);
   const item = sourceClone[droppableSource.index];
 
@@ -1515,7 +1515,8 @@ class Backlog extends React.PureComponent {
       isMobile,
     } = this.props;
 
-    const ordered_items = data.itemIds.map(itemId => items[itemId]);
+
+    const ordered_items = data.categories.map(groupItem => groupItem.itemIds.map(itemId => items[itemId])).flat();
     const products = ordered_items.map((item, index) => {
       return (
         <ProductItem

static/js/shop.min.js

@@ -108,7 +108,9 @@ var nbrClocksStyle = function nbrClocksStyle(data) {
 };
 
 var copy = function copy(model, source, destination, droppableSource, droppableDestination) {
-  var sourceClone = Array.from(source.itemIds);
+  var sourceClone = Array.from(source.categories.map(function (groupId) {
+    return groupId.itemIds;
+  }).flat());
   var destClone = Array.from(destination.items);
   var item = sourceClone[droppableSource.index];
   destClone.splice(droppableDestination.index, 0, _objectSpread({}, model[item], {
@@ -1551,9 +1553,11 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
           onClickAddItem = _this$props11.onClickAddItem,
           onClickToggleMobileSideMenu = _this$props11.onClickToggleMobileSideMenu,
           isMobile = _this$props11.isMobile;
-      var ordered_items = data.itemIds.map(function (itemId) {
-        return items[itemId];
-      });
+      var ordered_items = data.categories.map(function (groupItem) {
+        return groupItem.itemIds.map(function (itemId) {
+          return items[itemId];
+        });
+      }).flat();
       var products = ordered_items.map(function (item, index) {
         return /*#__PURE__*/React.createElement(ProductItem, {
           key: item.id,

static/js/shop_data.js

@@ -855,28 +855,40 @@ const shop_data = {
       id: 'backlog',
       title: 'Backlog',
       /* itemIds define items order - change order to suit your need */
-      itemIds: [
-        'kasli',
-        'kaslisoc',
-        'bnc-dio',
-        'sma-dio',
-        'mcx-dio',
-        'rj45-dio',
-        'urukul',
-        'phaser',
-        'mirny',
-        'almazny',
-        'zotino',
-        'fastino',
-        'idc-bnc-adapter',
-        'idc-sma-adapter',
-        'idc-mcx-adapter',
-        'hd68-idc-adapter',
-        'novo',
-        'koster',
-        'clocker',
-        'stabilizer',
-        'vhdcicarrier',
+      categories: [
+        { name: 'Core',
+          itemIds: [
+              'kasli',
+              'kaslisoc']},
+        { name: 'TTL',
+          itemIds: [
+              'bnc-dio',
+              'sma-dio',
+              'mcx-dio',
+              'rj45-dio']},
+        { name: 'RF',
+          itemIds: [
+              'clocker',
+              'urukul',
+              'phaser',
+              'mirny',
+              'almazny']},
+        { name: 'DAC/ADC',
+          itemIds: [
+            'zotino',
+            'fastino',
+            'novo']},
+        { name: 'Adapters',
+          itemIds: [
+              'idc-bnc-adapter',
+              'idc-sma-adapter',
+              'idc-mcx-adapter',
+              'hd68-idc-adapter',
+              'vhdcicarrier']},
+        { name: 'Misc',
+          itemIds: [
+            'koster',
+            'stabilizer']}
       ],
     },