Prepare mechanism for sorting

package.json

@@ -9,6 +9,7 @@
     "handlebars": "^4.7.6",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
+    "react-debounce-input": "^3.2.3",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",

src/constants/actionTypes.js

@@ -4,6 +4,7 @@ const actionTypes = {
   SET_SELECTED_BLOCK: 'LAYOUT/SET_SELECTED_BLOCK',
   PUSH_BLOCK: 'LAYOUT/PUSH_BLOCK',
   CHANGE_BLOCK_DATA: 'LAYOUT/CHANGE_BLOCK_DATA',
+  REORDER_LAYOUT: 'LAYOUT/REORDER_LAYOUT',
 };
 
 export default actionTypes;

src/containers/App.js

@@ -26,6 +26,7 @@ class App extends React.Component {
     this.handlePushBlock = this.handlePushBlock.bind(this);
     this.handleMessage = this.handleMessage.bind(this);
     this.handleSetSelectedBlock = this.handleSetSelectedBlock.bind(this);
+    this.handleReorderLayout = this.handleReorderLayout.bind(this);
   }
 
   componentDidMount() {
@@ -38,9 +39,13 @@ class App extends React.Component {
 
   handleMessage(event) {
     console.log(event.data)
-    if (event.data.blockId && event.data.event) {
-      this.handleChangeActiveTab(0);
-      this.handleSetSelectedBlock(event.data.blockId);
+    if (event.data.event) {
+      if (event.data.blockId && event.data.event === 'click') {
+        this.handleChangeActiveTab(0);
+        this.handleSetSelectedBlock(event.data.blockId);
+      } else if (event.data.newOrder && event.data.event === 'sorted') {
+        this.handleReorderLayout(event.data.newOrder);
+      }
     }
   }
 
@@ -72,6 +77,21 @@ class App extends React.Component {
     });
   }
 
+  handleReorderLayout(newOrder) {
+    const newBlocksLayout = [];
+    newOrder.forEach(blockUuid => {
+      const block = this.props.layout.blocks.find(el => {
+        return el.uuid === blockUuid;
+      })
+      newBlocksLayout.push(block);
+    });
+
+    this.props.dispatch({
+      type: actionTypes.REORDER_LAYOUT,
+      newBlocksLayout
+    });
+  }
+
   render() {
     const innerHTML = renderHandlebars(this.props.layout.blocks);
     const {activeTab, previewMode} = this.props.config;

src/containers/Inspector.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from "react-redux";
-
+import {DebounceInput} from 'react-debounce-input';
 import actionTypes from "../constants/actionTypes";
 import blocks from "../views/blocks";
 
@@ -39,22 +39,28 @@ class Inspector extends Component {
           if (config[el].type === 'string') {
             return <div className='form-group' key={index}>
               <label>{config[el].name}</label>
-              <input
+              <DebounceInput
+                debounceTimeout={500}
                 type='text'
                 className='form-control'
                 placeholder={config[el].name}
                 value={block.data[el]}
                 onChange={(e) => this.handleChangeBlockData(blockUuid, el, e.target.value)}
               />
             </div>
+          } else {
+            return null;
           }
         })}
       </div>
     );
   }
 }
 
-Inspector.propTypes = {};
+Inspector.propTypes = {
+  layout: PropTypes.object,
+  config: PropTypes.object,
+};
 
 const mapStateToProps = state => {
   return {

src/reducers/layout.js

@@ -25,6 +25,13 @@ export default function reducer(state = initialState, action) {
         ...state,
         selectedBlockUuid: action.blockUuid
       }
+    case actionTypes.REORDER_LAYOUT:
+      return {
+        ...state,
+        blocks: [
+          ...action.newBlocksLayout
+        ]
+      }
     case actionTypes.CHANGE_BLOCK_DATA:
       const index = state.blocks.findIndex(el => {
         return el.uuid === action.blockUuid;

src/views/blocks/gallery2.js

@@ -0,0 +1,49 @@
+const hbs = `
+<div class="container">
+  <div class="row">
+    <div class="col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img1}}" alt="{{alt1}}">
+      </a>
+    </div>
+    <div class="col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img2}}" alt="{{alt2}}">
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+const block = {
+  hbs,
+  name: '2 column gallery',
+  previewImageUrl: 'https://i.imgur.com/3hpsgRt.png',
+  category: 'gallery',
+  defaultData: {
+    img1: "https://via.placeholder.com/450x450",
+    img2: "https://via.placeholder.com/450x450.",
+    alt1: "Sample image",
+    alt2: "Sample image",
+  },
+  config: {
+    img1: {
+      type: "string",
+      name: 'Url to image #1',
+    },
+    img2: {
+      type: "string",
+      name: 'Url to image #2',
+    },
+    alt1: {
+      type: "string",
+      name: 'Alt for image #1',
+    },
+    alt2: {
+      type: "string",
+      name: 'Alt for image #2',
+    },
+  }
+};
+
+export default block;

src/views/blocks/gallery3.js

@@ -0,0 +1,64 @@
+const hbs = `
+<div class="container">
+  <div class="row">
+    <div class="col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img1}}" alt="{{alt1}}">
+      </a>
+    </div>
+    <div class="col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img2}}" alt="{{alt2}}">
+      </a>
+    </div>
+    <div class="col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img3}}" alt="{{alt3}}">
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+const block = {
+  hbs,
+  name: '3 column gallery',
+  previewImageUrl: 'https://i.imgur.com/L0eQWAp.png',
+  category: 'gallery',
+  defaultData: {
+    img1: "https://via.placeholder.com/450x450",
+    img2: "https://via.placeholder.com/450x450.",
+    img3: "https://via.placeholder.com/450x450",
+    alt1: "Sample image",
+    alt2: "Sample image",
+    alt3: "Sample image",
+  },
+  config: {
+    img1: {
+      type: "string",
+      name: 'Url to image #1',
+    },
+    img2: {
+      type: "string",
+      name: 'Url to image #2',
+    },
+    img3: {
+      type: "string",
+      name: 'Url to image #3',
+    },
+    alt1: {
+      type: "string",
+      name: 'Alt for image #1',
+    },
+    alt2: {
+      type: "string",
+      name: 'Alt for image #2',
+    },
+    alt3: {
+      type: "string",
+      name: 'Alt for image #3',
+    },
+  }
+};
+
+export default block;

src/views/blocks/gallery4.js

@@ -0,0 +1,79 @@
+const hbs = `
+<div class="container">
+  <div class="row">
+    <div class="col-lg-3 col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img1}}" alt="{{alt1}}">
+      </a>
+    </div>
+    <div class="col-lg-3 col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img2}}" alt="{{alt2}}">
+      </a>
+    </div>
+    <div class="col-lg-3 col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img3}}" alt="{{alt3}}">
+      </a>
+    </div>
+    <div class="col-lg-3 col-md-4 col-6">
+      <a href="#" class="d-block mb-4 h-100">
+        <img class="img-fluid img-thumbnail" src="{{img4}}" alt="{{alt4}}">
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+const block = {
+  hbs,
+  name: '4 column gallery',
+  previewImageUrl: 'https://i.imgur.com/jFFAd28.png',
+  category: 'gallery',
+  defaultData: {
+    img1: "https://via.placeholder.com/450x450",
+    img2: "https://via.placeholder.com/450x450.",
+    img3: "https://via.placeholder.com/450x450",
+    img4: "https://via.placeholder.com/450x450",
+    alt1: "Sample image",
+    alt2: "Sample image",
+    alt3: "Sample image",
+    alt4: "Sample image",
+  },
+  config: {
+    img1: {
+      type: "string",
+      name: 'Url to image #1',
+    },
+    img2: {
+      type: "string",
+      name: 'Url to image #2',
+    },
+    img3: {
+      type: "string",
+      name: 'Url to image #3',
+    },
+    img4: {
+      type: "string",
+      name: 'Url to image #4',
+    },
+    alt1: {
+      type: "string",
+      name: 'Alt for image #1',
+    },
+    alt2: {
+      type: "string",
+      name: 'Alt for image #2',
+    },
+    alt3: {
+      type: "string",
+      name: 'Alt for image #3',
+    },
+    alt4: {
+      type: "string",
+      name: 'Alt for image #4',
+    },
+  }
+};
+
+export default block;