pages_core 3.13.0 → 3.15.0

data/app/javascript/components/PageTree.tsx

@@ -1,28 +1,27 @@
 import React, { Component } from "react";
-import Tree, { TreeId, TreeIndex } from "../lib/Tree";
+
+import Tree from "../lib/Tree";
 import { postJson, putJson } from "../lib/request";
-import { Attributes, PageNode } from "./PageTree/types";
-import Draggable from "./PageTree/Draggable";
+import * as Trees from "../types/Trees";
+import * as Pages from "../types/Pages";
 
-interface Page extends Record<string, unknown> {
-  parent_page_id: number | null;
-}
+import Draggable from "./PageTree/Draggable";
 
 type CollapsedState = Record<number, boolean>;
 
 interface ParentMap {
-  [index: number]: Page[];
+  [index: number]: Pages.TreeNode[];
 }
 
-interface PageTreeProps {
+interface Props {
   dir: string;
   locale: string;
-  pages: Page[];
+  pages: Pages.TreeNode[];
   permissions: string[];
 }
 
-interface PageTreeState {
-  tree: Tree<PageNode>;
+interface State {
+  tree: Tree<Pages.TreeNode>;
 }
 
 function collapsedState(): CollapsedState {
@@ -38,15 +37,15 @@ function collapsedState(): CollapsedState {
   return {};
 }
 
-export default class PageTree extends Component<PageTreeProps, PageTreeState> {
-  constructor(props: PageTreeProps) {
+export default class PageTree extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
 
-    this.state = { tree: this.buildTree(props.pages) };
+    this.state = { tree: this.buildTree(props.pages, props.locale) };
   }
 
-  applyCollapsed(tree: Tree<PageNode>) {
-    const depth = (t: Tree, index: TreeIndex) => {
+  applyCollapsed(tree: Tree<Pages.TreeNode>) {
+    const depth = (t: Tree, index: Trees.Index) => {
       let depth = 0;
       let pointer = t.getIndex(index.parent);
       while (pointer) {
@@ -56,7 +55,7 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       return depth;
     };
 
-    const walk = (id: TreeId) => {
+    const walk = (id: Trees.Id) => {
       const index = tree.getIndex(id);
       const node = index.node;
       if (node.id && node.id in collapsedState()) {
@@ -73,30 +72,35 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
     walk(1);
   }
 
-  createPage(index: TreeIndex<PageNode>, attributes: Attributes) {
-    void postJson(`/admin/${index.node.locale}/pages.json`, {
+  createPage(index: Trees.Index<Pages.TreeNode>, attributes: Pages.TreeItem) {
+    void postJson(`/admin/${this.props.locale}/pages.json`, {
       page: attributes
-    }).then((response: Attributes) => this.updateNode(index, response));
+    }).then((response: Pages.TreeItem) => this.updateNode(index, response));
   }
 
-  buildTree(pages: Page[]) {
+  buildTree(pages: Pages.TreeNode[], locale: string) {
     // Build tree
-    const parentMap: ParentMap = pages.reduce((m: ParentMap, page: Page) => {
-      const id = page.parent_page_id || 0;
-      m[id] = [...(m[id] || []), page];
-      return m;
-    }, {});
+    const parentMap: ParentMap = pages.reduce(
+      (m: ParentMap, page: Pages.TreeNode) => {
+        const id = page.parent_page_id || 0;
+        m[id] = [...(m[id] || []), page];
+        return m;
+      },
+      {}
+    );
 
-    pages.forEach((p: Page) => {
+    pages.forEach((p) => {
       p.children = parentMap[p.id] || [];
     });
 
-    const tree = new Tree({
-      name: "All Pages",
-      locale: this.props.locale,
+    const tree = new Tree<Pages.TreeNode>({
+      blocks: {
+        name: { [locale]: "All Pages" }
+      },
       permissions: this.props.permissions,
       root: true,
-      children: parentMap[0]
+      children: parentMap[0],
+      collapsed: false
     });
     this.applyCollapsed(tree);
     tree.updateNodesPosition();
@@ -104,26 +108,30 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
   }
 
   movePage(
-    index: TreeIndex<PageNode>,
-    parent: TreeIndex<PageNode>,
+    index: Trees.Index<Pages.TreeNode>,
+    parent: Trees.Index<Pages.TreeNode>,
     position: number
   ) {
     const data = {
       parent_id: parent.node.id,
       position: position
     };
-    const url = `/admin/${index.node.locale}/pages/${index.node.id}/move.json`;
+    const url = `/admin/${this.props.locale}/pages/${index.node.id}/move.json`;
     this.performUpdate(index, url, data);
   }
 
-  performUpdate(index: TreeIndex, url: string, data: Attributes) {
-    void putJson(url, data).then((response: Page) =>
+  performUpdate(
+    index: Trees.Index<Pages.TreeNode>,
+    url: string,
+    data: Record<string, unknown>
+  ) {
+    void putJson(url, data).then((response: Pages.TreeItem) =>
       this.updateNode(index, response)
     );
   }
 
   render() {
-    const addChild = (id: TreeId, attributes: Attributes) => {
+    const addChild = (id: Trees.Id, attributes: Pages.TreeNode) => {
       const tree = this.state.tree;
       const index = tree.append(attributes, id);
       this.reorderChildren(id);
@@ -132,7 +140,7 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       this.setState({ tree: tree });
     };
 
-    const movedPage = (id: TreeId) => {
+    const movedPage = (id: Trees.Id) => {
       const tree = this.state.tree;
       const index = tree.getIndex(id);
       this.reorderChildren(index.parent);
@@ -144,22 +152,27 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       this.setState({ tree: tree });
     };
 
-    const toggleCollapsed = (id: TreeId) => {
+    const toggleCollapsed = (id: Trees.Id) => {
       const tree = this.state.tree;
       const node = tree.getIndex(id).node;
       this.setCollapsed(id, !node.collapsed);
       this.setState({ tree: tree });
     };
 
-    const updatePage = (id: TreeId, attributes: Attributes) => {
+    const updatePage = (id: Trees.Id, attributes: Pages.TreeItem) => {
       const tree = this.state.tree;
       const index = tree.getIndex(id);
-      const url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
+      const url = `/admin/${this.props.locale}/pages/${index.node.id}.json`;
       this.updateNode(index, attributes);
-      this.performUpdate(index, url, { page: attributes });
+
+      const data: Record<string, unknown> = { ...attributes };
+      if ("blocks" in attributes && "name" in attributes.blocks) {
+        data.name = attributes.blocks.name[this.props.locale];
+      }
+      this.performUpdate(index, url, { page: data });
     };
 
-    const updateTree = (tree: Tree) => {
+    const updateTree = (tree: Tree<Pages.TreeNode>) => {
       this.setState({ tree: tree });
     };
 
@@ -177,7 +190,7 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
     );
   }
 
-  reorderChildren(id: TreeId) {
+  reorderChildren(id: Trees.Id) {
     const tree = this.state.tree;
     const index = this.state.tree.getIndex(id);
     const node = index.node;
@@ -188,7 +201,10 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       const aNode = tree.getIndex(a).node;
       const bNode = tree.getIndex(b).node;
       if (aNode.pinned == bNode.pinned) {
-        return new Date(bNode.published_at) - new Date(aNode.published_at);
+        return (
+          new Date(bNode.published_at).getTime() -
+          new Date(aNode.published_at).getTime()
+        );
       } else {
         return aNode.pinned ? -1 : 1;
       }
@@ -196,26 +212,22 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
     tree.updateNodesPosition();
   }
 
-  setCollapsed(id: TreeId, value: boolean) {
+  setCollapsed(id: Trees.Id, value: boolean) {
     const node = this.state.tree.getIndex(id).node;
     node.collapsed = value;
     this.storeCollapsed(id, node.collapsed);
     this.state.tree.updateNodesPosition();
   }
 
-  storeCollapsed(id: TreeId, newState: boolean) {
+  storeCollapsed(id: Trees.Id, newState: boolean) {
     const node = this.state.tree.getIndex(id).node;
     const store = collapsedState();
     store[node.id] = newState;
     window.localStorage.collapsedPages = JSON.stringify(store);
   }
 
-  updateNode(index: TreeIndex, attributes: Attributes) {
-    for (const attr in attributes) {
-      if (Object.prototype.hasOwnProperty.call(attributes, attr)) {
-        index.node[attr] = attributes[attr];
-      }
-    }
+  updateNode(index: Trees.Index<Pages.TreeNode>, attributes: Pages.TreeItem) {
+    index.node = { ...index.node, ...attributes };
     this.setState({ tree: this.state.tree });
   }
 }

data/app/javascript/components/{RichTextArea.jsx → RichTextArea.tsx}

@@ -1,140 +1,152 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { createRef, ChangeEvent, Component, RefObject } from "react";
 import RichTextToolbarButton from "./RichTextToolbarButton";
 
-export default class RichTextArea extends React.Component {
-  constructor(props) {
+interface Props {
+  id: string;
+  name: string;
+  value: string;
+  rows: number;
+  className?: string;
+  simple?: boolean;
+  lang?: string;
+  dir?: string;
+  onChange?: (str: string) => void;
+}
+
+interface State {
+  value: string;
+  rows: number;
+}
+
+type Replacement = [string, string, string];
+type ActionFn = (str: string) => Replacement;
+
+interface Action {
+  name: string;
+  className: string;
+  fn: ActionFn;
+  hotkey?: string;
+}
+
+export default class RichTextArea extends Component<Props, State> {
+  inputRef: RefObject<HTMLTextAreaElement>;
+
+  constructor(props: Props) {
     super(props);
     this.state = {
       value: props.value || "",
       rows: props.rows || 5
     };
-    this.inputRef = React.createRef();
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.getSelection = this.getSelection.bind(this);
-    this.link = this.link.bind(this);
-    this.replaceSelection = this.replaceSelection.bind(this);
+    this.inputRef = createRef<HTMLTextAreaElement>();
   }
 
-  actions() {
-    const simple = [
+  actions = () => {
+    const simple: Action[] = [
       {
         name: "bold",
         className: "bold",
         hotkey: "b",
-        fn: (str) => ["<b>", str, "</b>"]
+        fn: (str: string) => ["<b>", str, "</b>"]
       },
       {
         name: "italic",
         className: "italic",
         hotkey: "i",
-        fn: (str) => ["<i>", str, "</i>"]
+        fn: (str: string) => ["<i>", str, "</i>"]
       }
     ];
 
-    const advanced = [
+    const advanced: Action[] = [
       {
         name: "Heading 2",
         className: "header h2",
-        fn: (str) => ["h2. ", str, ""]
+        fn: (str: string) => ["h2. ", str, ""]
       },
       {
         name: "Heading 3",
         className: "header h3",
-        fn: (str) => ["h3. ", str, ""]
+        fn: (str: string) => ["h3. ", str, ""]
       },
       {
         name: "Heading 4",
         className: "header h4",
-        fn: (str) => ["h4. ", str, ""]
+        fn: (str: string) => ["h4. ", str, ""]
       },
       {
         name: "Blockquote",
         className: "quote-left",
-        fn: (str) => ["bq. ", str, ""]
+        fn: (str: string) => ["bq. ", str, ""]
       },
       {
         name: "List",
         className: "list-ul",
-        fn: (str) => ["", this.strToList(str, "*"), ""]
+        fn: (str: string) => ["", this.strToList(str, "*"), ""]
       },
       {
         name: "Ordered list",
         className: "list-ol",
-        fn: (str) => ["", this.strToList(str, "#"), ""]
+        fn: (str: string) => ["", this.strToList(str, "#"), ""]
       },
-      {
-        name: "Link",
-        className: "link",
-        fn: this.link
-      },
-      {
-        name: "Email link",
-        className: "envelope",
-        fn: this.emailLink
-      }
+      { name: "Link", className: "link", fn: this.link },
+      { name: "Email link", className: "envelope", fn: this.emailLink }
     ];
 
     return this.props.simple ? simple : [...simple, ...advanced];
-  }
+  };
 
-  applyAction(fn) {
-    let [prefix, replacement, postfix] = fn(this.getSelection());
+  applyAction(fn: ActionFn) {
+    const [prefix, replacement, postfix] = fn(this.getSelection());
     this.replaceSelection(prefix, replacement, postfix);
   }
 
-  emailLink(selection) {
-    var address = prompt("Enter email address", "");
-    let name = selection.length > 0 ? selection : address;
+  emailLink = (selection: string): Replacement => {
+    const address = prompt("Enter email address", "");
+    const name = selection.length > 0 ? selection : address;
     return ['"', name, `":mailto:${address}`];
-  }
+  };
 
-  getSelection() {
-    let { selectionStart, selectionEnd, value } = this.inputRef.current;
+  getSelection = (): string => {
+    const { selectionStart, selectionEnd, value } = this.inputRef.current;
     return value.substr(selectionStart, selectionEnd - selectionStart);
-  }
+  };
 
-  handleChange(evt) {
-    this.setState({ value: evt.target.value });
-  }
+  handleChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
+    this.updateValue(evt.target.value);
+  };
 
-  handleKeyPress(evt) {
-    let key;
+  handleKeyPress = (evt: React.KeyboardEvent) => {
+    let key: string;
     if (evt.which >= 65 && evt.which <= 90) {
       key = String.fromCharCode(evt.keyCode).toLowerCase();
     } else if (evt.keyCode === 13) {
       key = "enter";
     }
 
-    let hotkeys = {};
+    const hotkeys: Record<string, ActionFn> = {};
     this.actions().forEach((a) => {
       if (a.hotkey) {
         hotkeys[a.hotkey] = a.fn;
       }
     });
 
-    if (
-      (evt.metaKey || evt.ctrlKey) &&
-      Object.prototype.hasOwnProperty.call(hotkeys, key)
-    ) {
+    if ((evt.metaKey || evt.ctrlKey) && key in hotkeys) {
       evt.preventDefault();
       this.applyAction(hotkeys[key]);
     }
-  }
+  };
 
-  link(selection) {
-    let name = selection.length > 0 ? selection : "Link text";
-    var url = prompt("Enter link URL", "");
+  link = (selection: string): Replacement => {
+    const name = selection.length > 0 ? selection : "Link text";
+    const url = prompt("Enter link URL", "");
     if (url) {
       return ['"', name, `":${this.relativeUrl(url)}`];
     } else {
       return ["", name, ""];
     }
-  }
+  };
 
   localeOptions() {
-    let opts = {};
+    const opts: React.HTMLProps<HTMLTextAreaElement> = {};
 
     if (this.props.lang) {
       opts.lang = this.props.lang;
@@ -147,8 +159,8 @@ export default class RichTextArea extends React.Component {
     return opts;
   }
 
-  relativeUrl(str) {
-    let url = null;
+  relativeUrl(str: string): string {
+    let url: URL = null;
 
     if (!str.match(/^https:\/\//) || !document || !document.location) {
       return str;
@@ -171,10 +183,11 @@ export default class RichTextArea extends React.Component {
   }
 
   render() {
-    let { value, rows } = this.state;
-    let { id, name } = this.props;
+    const { rows } = this.state;
+    const { id, name } = this.props;
+    const value = this.getValue();
 
-    const clickHandler = (fn) => (evt) => {
+    const clickHandler = (fn: ActionFn) => (evt: React.MouseEvent) => {
       evt.preventDefault();
       this.applyAction(fn);
     };
@@ -192,7 +205,7 @@ export default class RichTextArea extends React.Component {
           ))}
         </div>
         <textarea
-          className="rich"
+          className={this.props.className || "rich"}
           ref={this.inputRef}
           id={id}
           name={name}
@@ -206,9 +219,9 @@ export default class RichTextArea extends React.Component {
     );
   }
 
-  replaceSelection(prefix, replacement, postfix) {
-    let textarea = this.inputRef.current;
-    let { selectionStart, selectionEnd, value } = textarea;
+  replaceSelection = (prefix: string, replacement: string, postfix: string) => {
+    const textarea = this.inputRef.current;
+    const { selectionStart, selectionEnd, value } = textarea;
 
     textarea.value =
       value.substr(0, selectionStart) +
@@ -222,23 +235,29 @@ export default class RichTextArea extends React.Component {
       selectionStart + prefix.length,
       selectionStart + prefix.length + replacement.length
     );
-    this.setState({ value: textarea.value });
-  }
+    this.updateValue(textarea.value);
+  };
 
-  strToList(str, prefix) {
+  strToList(str: string, prefix: string) {
     return str
       .split("\n")
       .map((l) => prefix + " " + l)
       .join("\n");
   }
-}
 
-RichTextArea.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  rows: PropTypes.number,
-  simple: PropTypes.bool,
-  lang: PropTypes.string,
-  dir: PropTypes.string
-};
+  getValue() {
+    if (this.props.onChange) {
+      return this.props.value;
+    } else {
+      return this.state.value;
+    }
+  }
+
+  updateValue(str: string) {
+    if (this.props.onChange) {
+      this.props.onChange(str);
+    } else {
+      this.setState({ value: str });
+    }
+  }
+}

data/app/javascript/components/RichTextToolbarButton.tsx

@@ -1,14 +1,12 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 
-interface RichTextToolbarButtonProps {
+interface Props {
   className: string;
   name: string;
-  onClick: (evt: Event) => void;
+  onClick: (evt: React.MouseEvent) => void;
 }
 
-export default function RichTextToolbarButton(
-  props: RichTextToolbarButtonProps
-) {
+export default function RichTextToolbarButton(props: Props) {
   return (
     <a
       title={props.name}

data/app/javascript/components/TagEditor/AddTagForm.tsx

@@ -1,21 +1,28 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, MouseEvent, KeyboardEvent, useState } from "react";
 
-interface AddTagFormProps {
-  addTag: (string) => void;
+import * as Tags from "../../types/Tags";
+
+interface Props {
+  dispatch: (action: Tags.Action) => void;
 }
 
-export default function AddTagForm(props: AddTagFormProps) {
+export default function AddTagForm(props: Props) {
   const [tag, setTag] = useState("");
 
-  const submit = (evt: Event) => {
-    evt.preventDefault();
-    props.addTag(tag);
+  const submit = () => {
+    props.dispatch({ type: "addTag", payload: tag });
     setTag("");
   };
 
-  const handleKeyDown = (evt: Event) => {
+  const handleSubmit = (evt: MouseEvent) => {
+    evt.preventDefault();
+    submit();
+  };
+
+  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {
     if (evt.which === 13) {
-      submit(evt);
+      evt.preventDefault();
+      submit();
     }
   };
 
@@ -24,17 +31,17 @@ export default function AddTagForm(props: AddTagFormProps) {
   };
 
   return (
-    <div className="add-tag-form">
+    <div className="add-tag-form inline-form">
       <input
         name="add-tag"
         type="text"
-        className="add-tag"
+        className="add-tag tight"
         value={tag}
         onKeyDown={handleKeyDown}
         onChange={handleChange}
         placeholder="Add tag..."
       />
-      <button onClick={submit} disabled={!tag}>
+      <button onClick={handleSubmit} disabled={!tag}>
         Add
       </button>
     </div>

data/app/javascript/components/TagEditor/Editor.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { allTags, isEnabled } from "./useTags";
+
+import AddTagForm from "./AddTagForm";
+import Tag from "./Tag";
+import * as Tags from "../../types/Tags";
+
+interface Props {
+  name: string;
+  state: Tags.State;
+  dispatch: (action: Tags.Action) => void;
+}
+
+export default function Editor(props: Props) {
+  const { name, state, dispatch } = props;
+
+  return (
+    <div className="tag-editor">
+      <input type="hidden" name={name} value={JSON.stringify(state.enabled)} />
+      {allTags(state).map((t) => (
+        <Tag
+          key={t}
+          tag={t}
+          enabled={isEnabled(t, state)}
+          dispatch={dispatch}
+        />
+      ))}
+      <AddTagForm dispatch={dispatch} />
+    </div>
+  );
+}

data/app/javascript/components/TagEditor/Tag.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 
-interface TagProps {
+import * as Tags from "../../types/Tags";
+
+interface Props {
   enabled: boolean;
   tag: string;
-  toggleEnabled: (string) => void;
+  dispatch: (action: Tags.Action) => void;
 }
 
-export default function Tag(props: TagProps): JSX.Element {
+export default function Tag(props: Props) {
   const handleChange = () => {
-    props.toggleEnabled(props.tag);
+    props.dispatch({ type: "toggleTag", payload: props.tag });
   };
 
   const classes = ["tag"];