pages_core 3.7.0 → 3.8.0

data/app/{assets/javascripts/pages/admin/components/page_tree_store.jsx → javascript/components/PageTree.jsx}

@@ -1,39 +1,82 @@
-var PageTreeActions = Reflux.createActions([
-  "addChild",
-  "init",
-  "movedPage",
-  "setCSRFToken",
-  "toggleCollapsed",
-  "updatePage",
-  "updateTree"
-]);
-
-class PageTreeStore extends Reflux.Store {
-  constructor() {
-    super();
-    this.state = { tree: null };
-    this.listenToMany(PageTreeActions);
+import React from "react";
+import PropTypes from "prop-types";
+import PageTreeDraggable from "./PageTreeDraggable";
+import Tree from "../lib/Tree";
+import { postJson, putJson } from "../lib/request";
+
+export default class PageTree extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { tree: this.buildTree(props.pages) };
+
+    this.addChild = this.addChild.bind(this);
+    this.movedPage = this.movedPage.bind(this);
+    this.toggleCollapsed = this.toggleCollapsed.bind(this);
+    this.updatePage = this.updatePage.bind(this);
+    this.updateTree = this.updateTree.bind(this);
   }
 
-  collapsedState() {
-    if (window && window.localStorage &&
-        typeof(window.localStorage.collapsedPages) != "undefined") {
-      return JSON.parse(window.localStorage.collapsedPages);
-    }
-    return {};
+  addChild(id, attributes) {
+    let tree = this.state.tree;
+    var index = tree.append(attributes, id);
+    this.reorderChildren(id);
+    this.setCollapsed(id, false);
+    this.createPage(index, attributes);
+    this.setState({tree: tree});
+  }
+
+  movedPage(id) {
+    let tree = this.state.tree;
+    let index = tree.getIndex(id);
+    this.reorderChildren(index.parent);
+
+    let parent = tree.getIndex(index.parent);
+    let position = parent.children.indexOf(id) + 1;
+
+    this.movePage(index, parent, position);
+    this.setState({tree: tree});
+  }
+
+  toggleCollapsed(id) {
+    let tree = this.state.tree;
+    var node = tree.getIndex(id).node;
+    this.setCollapsed(id, !node.collapsed);
+    this.setState({tree: tree});
+  }
+
+  updatePage(id, attributes) {
+    let tree = this.state.tree;
+    let index = tree.getIndex(id);
+    let url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
+    this.updateNode(index, attributes);
+    this.performUpdate(index, url, { page: attributes });
+  }
+
+  updateTree(tree) {
+    this.setState({ tree: tree });
   }
 
   applyCollapsed(tree) {
-    let store = this;
+    const depth = (t, index) => {
+      var depth = 0;
+      let pointer = t.getIndex(index.parent);
+      while (pointer) {
+        depth += 1;
+        pointer = t.getIndex(pointer.parent);
+      }
+      return depth;
+    };
+
     let collapsedState = this.collapsedState();
     let walk = function (id) {
       var index = tree.getIndex(id);
       var node = index.node;
-      if (collapsedState.hasOwnProperty(node.id)) {
+      if (Object.prototype.hasOwnProperty.call(collapsedState, node.id)) {
         node.collapsed = collapsedState[node.id];
       } else if (node.news_page) {
         node.collapsed = true;
-      } else if (store.depth(tree, index) > 1) {
+      } else if (depth(tree, index) > 1) {
         node.collapsed = true;
       }
       if (index.children && index.children.length) {
@@ -43,21 +86,37 @@ class PageTreeStore extends Reflux.Store {
     walk(1);
   }
 
-  depth(tree, index) {
-    var depth = 0;
-    var pointer = index;
-    while (pointer = tree.getIndex(pointer.parent)) {
-      depth += 1;
+  collapsedState() {
+    if (window && window.localStorage &&
+        typeof(window.localStorage.collapsedPages) != "undefined") {
+      return JSON.parse(window.localStorage.collapsedPages);
     }
-    return depth;
+    return {};
   }
 
   createPage(index, attributes) {
-    let store = this;
-    let url = `/admin/${index.node.locale}/pages.json`;
-    $.post(url, { page: attributes }, function (response) {
-      store.updateNode(index, response);
-    });
+    postJson(`/admin/${index.node.locale}/pages.json`, { page: attributes })
+      .then(response => this.updateNode(index, response));
+  }
+
+  buildTree(pages) {
+    // Build tree
+    let parentMap = pages.reduce((m, page) => {
+      let id = page.parent_page_id;
+      m[id] = [...(m[id] || []), page];
+      return m;
+    }, {});
+
+    pages.forEach((p) => p.children = parentMap[p.id] || []);
+
+    let tree = new Tree({ name: "All Pages",
+                          locale: this.props.locale,
+                          permissions: this.props.permissions,
+                          root: true,
+                          children: parentMap[null] });
+    this.applyCollapsed(tree);
+    tree.updateNodesPosition();
+    return tree;
   }
 
   movePage(index, parent, position) {
@@ -69,51 +128,19 @@ class PageTreeStore extends Reflux.Store {
     this.performUpdate(index, url, data);
   }
 
-  updatePage(index, attributes) {
-    let url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
-    this.performUpdate(index, url, { page: attributes });
-  }
-
   performUpdate(index, url, data) {
-    let store = this;
-
-    let xhr = new XMLHttpRequest();
-    xhr.open("PUT", url);
-    xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
-    xhr.setRequestHeader("X-CSRF-Token", this.state.csrf_token);
-    xhr.addEventListener("load", function () {
-      if (xhr.readyState == 4 && xhr.status == "200") {
-        store.updateNode(index, JSON.parse(xhr.responseText));
-      }
-    });
-    xhr.send(JSON.stringify(data));
-  }
-
-  updateNode(index, attributes) {
-    for (var attr in attributes) {
-      if (attributes.hasOwnProperty(attr)) {
-        index.node[attr] = attributes[attr];
-      }
-    }
-    this.setState({tree: tree});
+    putJson(url, data).then(response => this.updateNode(index, response));
   }
 
-  getInitialState() {
-    return this.state.tree;
-  }
-
-  setCollapsed(id, value) {
-    var node = this.state.tree.getIndex(id).node;
-    node.collapsed = value;
-    this.storeCollapsed(id, node.collapsed);
-    this.state.tree.updateNodesPosition();
-  }
-
-  storeCollapsed(id, newState) {
-    let node = this.state.tree.getIndex(id).node;
-    var store = this.collapsedState();
-    store[node.id] = newState;
-    window.localStorage.collapsedPages = JSON.stringify(store);
+  render() {
+    return(
+      <PageTreeDraggable tree={this.state.tree}
+                         addChild={this.addChild}
+                         movedPage={this.movedPage}
+                         toggleCollapsed={this.toggleCollapsed}
+                         updatePage={this.updatePage}
+                         updateTree={this.updateTree} />
+    );
   }
 
   reorderChildren(id) {
@@ -135,69 +162,32 @@ class PageTreeStore extends Reflux.Store {
     tree.updateNodesPosition();
   }
 
-  onInit(props) {
-    let pages = props.pages;
-
-    // Build tree
-    let parentMap = pages.reduce((m, page) => {
-      let id = page.parent_page_id;
-      m[id] = [...(m[id] || []), page];
-      return m;
-    }, {});
-
-    pages.forEach((p) => p.children = parentMap[p.id] || []);
-
-    tree = new Tree({ name: "All Pages",
-                      locale: props.locale,
-                      permissions: props.permissions,
-                      root: true,
-                      children: parentMap[null] });
-    this.applyCollapsed(tree);
-    tree.updateNodesPosition();
-    this.setState({tree: tree});
-  }
-
-  onMovedPage(id) {
-    let tree = this.state.tree;
-    let index = tree.getIndex(id);
-    this.reorderChildren(index.parent);
-
-    parent = tree.getIndex(index.parent);
-    position = parent.children.indexOf(id) + 1;
-
-    this.movePage(index, parent, position);
-    this.setState({tree: tree});
-  }
-
-  onAddChild(id, attributes) {
-    let tree = this.state.tree;
-    var index = tree.append(attributes, id);
-    this.reorderChildren(id);
-    this.setCollapsed(id, false);
-    this.createPage(index, attributes);
-    this.setState({tree: tree});
-  }
-
-  onSetCSRFToken(token) {
-    this.setState({ csrf_token: token });
-  }
-
-  onToggleCollapsed(id) {
-    let tree = this.state.tree;
-    var node = tree.getIndex(id).node;
-    this.setCollapsed(id, !node.collapsed);
-    this.setState({tree: tree});
+  setCollapsed(id, value) {
+    var node = this.state.tree.getIndex(id).node;
+    node.collapsed = value;
+    this.storeCollapsed(id, node.collapsed);
+    this.state.tree.updateNodesPosition();
   }
 
-  onUpdatePage(id, attributes) {
-    let tree = this.state.tree;
-    var index = tree.getIndex(id);
-    this.updateNode(index, attributes);
-    this.updatePage(index, attributes);
+  storeCollapsed(id, newState) {
+    let node = this.state.tree.getIndex(id).node;
+    var store = this.collapsedState();
+    store[node.id] = newState;
+    window.localStorage.collapsedPages = JSON.stringify(store);
   }
 
-  onUpdateTree(newTree) {
-    tree = newTree;
-    this.setState({tree: tree});
+  updateNode(index, attributes) {
+    for (var attr in attributes) {
+      if (Object.prototype.hasOwnProperty.call(attributes, attr)) {
+        index.node[attr] = attributes[attr];
+      }
+    }
+    this.setState({ tree: this.state.tree });
   }
 }
+
+PageTree.propTypes = {
+  pages: PropTypes.array,
+  locale: PropTypes.string,
+  permissions: PropTypes.array
+};

data/app/{assets/javascripts/pages/admin/components/page_tree.jsx → javascript/components/PageTreeDraggable.jsx}

@@ -25,18 +25,16 @@
    SOFTWARE.
  */
 
-class PageTree extends Reflux.Component {
+import React from "react";
+import PropTypes from "prop-types";
+import PageTreeNode from "./PageTreeNode";
+
+export default class PageTreeDraggable extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       dragging: this.initDragging()
     };
-    this.store = PageTreeStore;
-  }
-
-  componentDidMount() {
-    PageTreeActions.setCSRFToken(this.props.csrf_token);
-    PageTreeActions.init(this.props);
   }
 
   initDragging() {
@@ -52,7 +50,7 @@ class PageTree extends Reflux.Component {
   }
 
   getDraggingDom() {
-    var tree = this.state.tree;
+    var tree = this.props.tree;
     var dragging = this.state.dragging;
     if (dragging && dragging.id) {
       var draggingIndex = tree.getIndex(dragging.id);
@@ -77,7 +75,7 @@ class PageTree extends Reflux.Component {
   }
 
   render() {
-    var tree = this.state.tree;
+    var tree = this.props.tree;
     var dragging = this.state.dragging;
 
     if (!tree) {
@@ -118,19 +116,22 @@ class PageTree extends Reflux.Component {
       locale: parent.node.locale,
       parent_page_id: parent.node.id
     };
-    PageTreeActions.addChild(parent.id, newNode);
+    this.props.addChild(parent.id, newNode);
   }
 
   prevAddButtonCount(tree, index) {
-    var pointer = index;
-    var parentNodes = [];
-    while (pointer = tree.getIndex(pointer.parent)) {
+    let count = 0;
+    let parentNodes = [];
+    let pointer = tree.getIndex(index.parent);
+    while (pointer) {
       parentNodes.push(pointer);
+      pointer = tree.getIndex(pointer.parent);
     }
 
-    var pointer = index;
-    var count = 0;
-    while (pointer = tree.getNodeByTop(pointer.top - 1)) {
+    pointer = index;
+
+    pointer = tree.getNodeByTop(index.top - 1);
+    while (pointer) {
       if (
         parentNodes.indexOf(pointer) == -1 &&
         !pointer.node.collapsed &&
@@ -138,6 +139,7 @@ class PageTree extends Reflux.Component {
       ) {
         count += 1;
       }
+      pointer = tree.getNodeByTop(pointer.top - 1);
     }
 
     return count;
@@ -165,7 +167,7 @@ class PageTree extends Reflux.Component {
       }
     }
 
-    var tree = this.state.tree;
+    var tree = this.props.tree;
     var dragging = this.state.dragging;
     var paddingLeft = this.props.paddingLeft;
     var newIndex = null;
@@ -233,10 +235,7 @@ class PageTree extends Reflux.Component {
       dragging.id = newIndex.id;
     }
 
-    this.setState({
-      dragging: dragging,
-      tree: tree
-    });
+    this.setState({ dragging: dragging });
   }
 
   dragStart(id, dom, e) {
@@ -271,8 +270,8 @@ class PageTree extends Reflux.Component {
 
   dragEnd() {
     if (!this._start) {
-      PageTreeActions.updateTree(this.state.tree);
-      PageTreeActions.movedPage(this.state.dragging.id);
+      this.props.updateTree(this.props.tree);
+      this.props.movedPage(this.state.dragging.id);
     }
 
     this.setState({
@@ -284,17 +283,24 @@ class PageTree extends Reflux.Component {
   }
 
   toggleCollapse(nodeId) {
-    PageTreeActions.toggleCollapsed(nodeId);
+    this.props.toggleCollapsed(nodeId);
   }
 
   updatePage(index, attributes) {
-    PageTreeActions.updatePage(
-      index.id,
-      attributes
-    );
+    this.props.updatePage(index.id, attributes);
   }
 }
 
-PageTree.defaultProps = {
+PageTreeDraggable.defaultProps = {
   paddingLeft: 15
 };
+
+PageTreeDraggable.propTypes = {
+  tree: PropTypes.object,
+  addChild: PropTypes.func,
+  movedPage: PropTypes.func,
+  toggleCollapsed: PropTypes.func,
+  paddingLeft: PropTypes.number,
+  updatePage: PropTypes.func,
+  updateTree: PropTypes.func,
+};

data/app/{assets/javascripts/pages/admin/components/page_tree_node.jsx → javascript/components/PageTreeNode.jsx}

@@ -25,10 +25,14 @@
    SOFTWARE.
  */
 
-class PageTreeNode extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class PageTreeNode extends React.Component {
   constructor(props) {
     super(props);
     this.state = { newName: props.index.node.name };
+    this.innerRef = React.createRef();
   }
 
   permitted(action) {
@@ -49,7 +53,7 @@ class PageTreeNode extends React.Component {
         <span className="actions">
           <button type="button"
                   className="add"
-                  onClick={e => this.props.addChild(this.props.index)}>
+                  onClick={() => this.props.addChild(this.props.index)}>
             <i className="fa fa-plus icon" />
             Add child
           </button>
@@ -59,27 +63,27 @@ class PageTreeNode extends React.Component {
       return (
         <span className="actions">
           {this.permitted("edit") && this.button(statusLabel, {
-             className: "toggle-status",
-             icon: statusIcon,
-             onClick: e => this.toggleStatus()
+            className: "toggle-status",
+            icon: statusIcon,
+            onClick: () => this.toggleStatus()
            })}
 
           {this.permitted("edit") && this.button("Rename", {
-             className: "edit",
-             icon: "pencil",
-             onClick: e => this.edit()
+            className: "edit",
+            icon: "pencil",
+            onClick: () => this.edit()
            })}
 
           {this.permitted("edit") && this.button("Delete", {
-             className: "delete",
-             icon: "trash",
-             onClick: e => this.deletePage()
+            className: "delete",
+            icon: "trash",
+            onClick: () => this.deletePage()
            })}
 
           {this.permitted("create") && this.button("Add child", {
-             className: "add",
-             icon: "plus",
-             onClick: e => this.props.addChild(this.props.index)
+            className: "add",
+            icon: "plus",
+            onClick: () => this.props.addChild(this.props.index)
            })}
         </span>
       );
@@ -89,7 +93,7 @@ class PageTreeNode extends React.Component {
   addButton() {
     let self = this;
     let node = this.node();
-    let handleClick = function (e) {
+    let handleClick = function () {
       if (self.props.addChild) {
         self.props.addChild(self.props.index);
       }
@@ -251,14 +255,16 @@ class PageTreeNode extends React.Component {
 
     let handleMouseDown = function (e) {
       if (self.permitted("edit") && !editing && props.onDragStart) {
-        props.onDragStart(props.index.id, self.refs.inner, e);
+        props.onDragStart(props.index.id, self.innerRef.current, e);
       }
     };
 
     if (this.node().status != 4) {
       return (
         <div className={classnames}>
-          <div className="inner" ref="inner" onMouseDown={handleMouseDown}>
+          <div className="inner"
+               ref={this.innerRef}
+               onMouseDown={handleMouseDown}>
             {this.collapseArrow()}
             {node}
           </div>
@@ -286,7 +292,7 @@ class PageTreeNode extends React.Component {
       });
     };
 
-    let cancelEdit = function(e) {
+    let cancelEdit = function() {
       self.setState({newName: self.node().name});
       self.updatePage({editing: false});
     };
@@ -298,7 +304,6 @@ class PageTreeNode extends React.Component {
           <input type="text"
                  value={this.state.newName}
                  autoFocus
-                 ref="nameInput"
                  onChange={handleNameChange} />
           <button className="save" type="submit">
             <i className="fa fa-cloud icon"></i>
@@ -315,7 +320,6 @@ class PageTreeNode extends React.Component {
   }
 
   renderNode() {
-    let self = this;
     let index = this.props.index;
     let node = index.node;
 
@@ -394,3 +398,14 @@ class PageTreeNode extends React.Component {
     }
   }
 }
+
+PageTreeNode.propTypes = {
+  addChild: PropTypes.func,
+  dragging: PropTypes.number,
+  index: PropTypes.object,
+  onCollapse: PropTypes.func,
+  onDragStart: PropTypes.func,
+  paddingLeft: PropTypes.number,
+  tree: PropTypes.object,
+  updatePage: PropTypes.func
+};