Refactor and clean up repeat to not use state at all

controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gutenblock-controls",
-  "version": "0.4.6",
+  "version": "0.5.1",
   "description": "Useful inspector controls for gutenberg",
   "main": "dist/index.js",
   "scripts": {

controls/src/repeat/index.js

@@ -2,41 +2,32 @@ import React from 'react';
 
 const { Button } = wp.components;
 
+let getItems = ({ attributes, attribute }) =>
+  attributes && attributes[attribute] ? attributes[attribute] : [];
+
 export default class Repeat extends React.Component {
-  constructor({ attribute, attributes }) {
+  constructor() {
     super();
     this.add = this.add.bind(this);
     this.update = this.update.bind(this);
     this.delete = this.delete.bind(this);
-
-    let items =
-      attributes && attributes[attribute] ? attributes[attribute] : [];
-    this.state = { items: items.length };
-  }
-
-  static getDerivedStateFromProps({ attributes, attribute }, state) {
-    let items =
-      attributes && attributes[attribute] ? attributes[attribute] : [];
-    if (items.length !== state.items) return { items: items.length };
-
-    return null;
   }
 
   add() {
-    let { attribute, attributes, setAttributes } = this.props;
-    let items =
-        attributes && attributes[attribute] ? attributes[attribute] : [];
-    setAttributes({ [attribute]: [...items, {}] })
+    let { attribute, onChange } = this.props;
+
+    onChange(attribute, [...getItems(this.props), {}]);
   }
 
   update(name, value, tabId, onChange) {
-    let { attribute, attributes } = this.props;
+    let { attribute } = this.props;
 
-    let currentAttributes = attributes[attribute] || [];
+    let currentAttributes = getItems(this.props);
 
     let foundAttribute = currentAttributes.find(
       (attr, index) => index === tabId
     );
+
     let newAttributes;
     if (!foundAttribute)
       newAttributes = [...currentAttributes, { [name]: value }];
@@ -95,9 +86,10 @@ export default class Repeat extends React.Component {
   }
 
   render() {
-    let { items } = this.state;
     let { style, title, indent, addNew, max } = this.props;
 
+    let items = getItems(this.props).length;
+
     let repeats = [];
     for (let item = 0; item < items; item++) {
       repeats.push(this.renderChildren(item));
@@ -110,17 +102,8 @@ export default class Repeat extends React.Component {
           {repeats}
           <div style={{ marginTop: '10px' }}>
             {max > items || !max ? (
-              <Button
-                isPrimary
-                onClick={() => {
-                    this.setState(function (prevState, props) {
-                        return { items: prevState.items + 1 }
-                    }, () => {
-                        this.props.setAttributes && this.add();
-                    })
-                }}
-              >
-              {addNew}
+              <Button isPrimary onClick={() => this.add()}>
+                {addNew}
               </Button>
             ) : null}
           </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gutenblock",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "",
   "main": "index.js",
   "scripts": {

plugin/package.json

@@ -14,7 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "@babel/polyfill": "^7.0.0-beta.46",
-    "gutenblock-controls": "^0.4.6",
+    "gutenblock-controls": "^0.5.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-hot-loader": "^4.0.1"

plugin/plugin.php

@@ -9,6 +9,6 @@
  * License: GPL2+
  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
  *
- * @package CGB
+ * @package Gutenblock
  */
 require_once plugin_dir_path( __FILE__ ) . 'src/init.php';