pages_core 3.12.0 → 3.12.2

data/app/javascript/components/PageTree.tsx

@@ -0,0 +1,206 @@
+import React, { Component } from "react";
+import Tree, { TreeId, TreeIndex } from "../lib/Tree";
+import { postJson, putJson } from "../lib/request";
+import { Attributes, PageNode } from "./PageTree/types";
+import Draggable from "./PageTree/Draggable";
+
+interface Page extends Record<string, unknown> {
+  parent_page_id: number | null
+}
+
+type CollapsedState = Record<number, boolean>;
+
+interface ParentMap {
+  [index: number]: Page[]
+}
+
+interface PageTreeProps {
+  dir: string,
+  locale: string,
+  pages: Page[],
+  permissions: string[]
+}
+
+interface PageTreeState {
+  tree: Tree<PageNode>
+}
+
+function collapsedState(): CollapsedState {
+  if (window && window.localStorage &&
+    typeof(window.localStorage.collapsedPages) != "undefined") {
+      return JSON.parse(window.localStorage.getItem("collapsedPages")) as CollapsedState;
+    }
+  return {};
+}
+
+export default class PageTree extends Component<PageTreeProps, PageTreeState> {
+  constructor(props: PageTreeProps) {
+    super(props);
+
+    this.state = { tree: this.buildTree(props.pages) };
+  }
+
+  applyCollapsed(tree: Tree<PageNode>) {
+    const depth = (t: Tree, index: TreeIndex) => {
+      let depth = 0;
+      let pointer = t.getIndex(index.parent);
+      while (pointer) {
+        depth += 1;
+        pointer = t.getIndex(pointer.parent);
+      }
+      return depth;
+    };
+
+    const walk = (id: TreeId) => {
+      const index = tree.getIndex(id);
+      const node = index.node;
+      if (node.id && node.id in collapsedState()) {
+        node.collapsed = collapsedState()[node.id];
+      } else if (node.news_page) {
+        node.collapsed = true;
+      } else if (depth(tree, index) > 1) {
+        node.collapsed = true;
+      }
+      if (index.children && index.children.length) {
+        index.children.forEach(c => walk(c));
+      }
+    };
+    walk(1);
+  }
+
+  createPage(index: TreeIndex<PageNode>, attributes: Attributes) {
+    void postJson(`/admin/${index.node.locale}/pages.json`, { page: attributes })
+      .then((response: Attributes) => this.updateNode(index, response));
+  }
+
+  buildTree(pages: Page[]) {
+    // 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;
+    }, {});
+
+    pages.forEach((p: Page) => { p.children = parentMap[p.id] || []; });
+
+    const tree = new Tree({
+      name: "All Pages",
+      locale: this.props.locale,
+      permissions: this.props.permissions,
+      root: true,
+      children: parentMap[0]
+    });
+    this.applyCollapsed(tree);
+    tree.updateNodesPosition();
+    return tree;
+  }
+
+  movePage(index: TreeIndex<PageNode>, parent: TreeIndex<PageNode>, position: number) {
+    const data = {
+      parent_id: parent.node.id,
+      position: position
+    };
+    const url = `/admin/${index.node.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) => this.updateNode(index, response));
+  }
+
+  render() {
+    const addChild = (id: TreeId, attributes: Attributes) => {
+      const tree = this.state.tree;
+      const index = tree.append(attributes, id);
+      this.reorderChildren(id);
+      this.setCollapsed(id, false);
+      this.createPage(index, attributes);
+      this.setState({tree: tree});
+    };
+
+    const movedPage = (id: TreeId) => {
+      const tree = this.state.tree;
+      const index = tree.getIndex(id);
+      this.reorderChildren(index.parent);
+
+      const parent = tree.getIndex(index.parent);
+      const position = parent.children.indexOf(id) + 1;
+
+      this.movePage(index, parent, position);
+      this.setState({ tree: tree });
+    };
+
+    const toggleCollapsed = (id: TreeId) => {
+      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 tree = this.state.tree;
+      const index = tree.getIndex(id);
+      const url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
+      this.updateNode(index, attributes);
+      this.performUpdate(index, url, { page: attributes });
+    };
+
+    const updateTree = (tree: Tree) => {
+      this.setState({ tree: tree });
+    };
+
+    return(
+      <Draggable tree={this.state.tree}
+                 addChild={addChild}
+                 movedPage={movedPage}
+                 toggleCollapsed={toggleCollapsed}
+                 updatePage={updatePage}
+                 updateTree={updateTree}
+                 locale={this.props.locale}
+                 dir={this.props.dir} />
+    );
+  }
+
+  reorderChildren(id: TreeId) {
+    const tree = this.state.tree;
+    const index = this.state.tree.getIndex(id);
+    const node = index.node;
+    if (!node.news_page) {
+      return;
+    }
+    index.children = index.children.sort(function (a, b) {
+      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);
+      } else {
+        return aNode.pinned ? -1 : 1;
+      }
+    });
+    tree.updateNodesPosition();
+  }
+
+  setCollapsed(id: TreeId, 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) {
+    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];
+      }
+    }
+    this.setState({ tree: this.state.tree });
+  }
+}

data/app/javascript/components/RichTextToolbarButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface RichTextToolbarButtonProps {
+  className: string,
+  name: string,
+  onClick: (evt: Event) => void
+}
+
+export default function RichTextToolbarButton(props: RichTextToolbarButtonProps) {
+  return (
+    <a title={props.name}
+      className={"button " + props.className}
+      onClick={props.onClick}>
+      <i className={"fa-solid fa-" + props.className} />
+    </a>
+  );
+}

data/app/javascript/components/TagEditor/{AddTagForm.jsx → AddTagForm.tsx}

@@ -1,22 +1,25 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
+import React, { ChangeEvent, useState } from "react";
 
-export default function AddTagForm(props) {
+interface AddTagFormProps {
+  addTag: (string) => void
+}
+
+export default function AddTagForm(props: AddTagFormProps) {
   const [tag, setTag] = useState("");
 
-  const submit = (evt) => {
+  const submit = (evt: Event) => {
     evt.preventDefault();
     props.addTag(tag);
     setTag("");
   };
 
-  const handleKeyDown = (evt) => {
+  const handleKeyDown = (evt: Event) => {
     if (evt.which === 13) {
       submit(evt);
     }
   };
 
-  const handleChange = (evt) => {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
     setTag(evt.target.value);
   };
 
@@ -36,7 +39,3 @@ export default function AddTagForm(props) {
     </div>
   );
 }
-
-AddTagForm.propTypes = {
-  addTag: PropTypes.func
-};

data/app/javascript/components/TagEditor/{Tag.jsx → Tag.tsx}

@@ -1,12 +1,17 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Tag(props) {
+interface TagProps {
+  enabled: boolean,
+  tag: string,
+  toggleEnabled: (string) => void
+}
+
+export default function Tag(props: TagProps): JSX.Element {
   const handleChange = () => {
     props.toggleEnabled(props.tag);
   };
 
-  let classes = ["tag"];
+  const classes = ["tag"];
   if (props.enabled) {
     classes.push("enabled");
   }
@@ -24,9 +29,3 @@ export default function Tag(props) {
     </span>
   );
 }
-
-Tag.propTypes = {
-  enabled: PropTypes.bool,
-  tag: PropTypes.string,
-  toggleEnabled: PropTypes.func
-};

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

@@ -1,30 +1,35 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 
 import AddTagForm from "./TagEditor/AddTagForm";
 import Tag from "./TagEditor/Tag";
 
-function onlyUnique(value, index, self) {
+interface TagEditorProps {
+  name: string,
+  enabled: string[],
+  tags: string[]
+}
+
+function onlyUnique(value: string, index: number, self: string[]): number {
   return self.indexOf(value) === index;
 }
 
-export default function TagEditor(props) {
+export default function TagEditor(props: TagEditorProps) {
   const [tags, setTags] = useState(props.tags);
   const [enabled, setEnabled] = useState(props.enabled);
 
   const tagList = [...tags, ...enabled].filter(onlyUnique);
 
-  const normalize = (tag) => {
+  const normalize = (tag: string): string => {
     return (
       tagList.filter(t => t.toLowerCase() == tag.toLowerCase())[0] || tag
     );
   };
 
-  const tagEnabled = (tag) => {
+  const tagEnabled = (tag: string): boolean => {
     return enabled.map(t => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1;
   };
 
-  const toggleEnabled = (tag) => {
+  const toggleEnabled = (tag: string) => {
     const normalized = normalize(tag);
 
     if (tagEnabled(normalized)) {
@@ -34,7 +39,7 @@ export default function TagEditor(props) {
     }
   };
 
-  const addTag = (tag) => {
+  const addTag = (tag: string) => {
     const normalized = normalize(tag);
 
     setTags([...tags, normalized].filter(onlyUnique));
@@ -53,9 +58,3 @@ export default function TagEditor(props) {
     </div>
   );
 }
-
-TagEditor.propTypes = {
-  name: PropTypes.string,
-  enabled: PropTypes.array,
-  tags: PropTypes.array
-};

data/app/javascript/components/Toast.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import useToastStore from "../stores/useToastStore";
+
+interface ToastProps {
+  error: string,
+  notice: string
+}
+
+export default function Toast(props: ToastProps) {
+  const [fadeout, setFadeout] = useState(false);
+  const { toasts, error, notice, next } = useToastStore((state) => state);
+  const timerRef = useRef<number | null>(null);
+
+  const toast = toasts[0];
+
+  useEffect(() => {
+    if (props.error) {
+      error(props.error);
+    }
+    if (props.notice) {
+      notice(props.notice);
+    }
+  }, [props.error, props.notice]);
+
+  useEffect(() => {
+    setFadeout(false);
+    if (toast && !timerRef.current) {
+      timerRef.current = setTimeout(() => {
+        setFadeout(true);
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null;
+          setFadeout(false);
+          next();
+        }, 500);
+      }, 4000);
+    }
+    return () => {
+      clearTimeout(timerRef.current);
+    };
+  }, [toast]);
+
+  const classNames = ["toast"];
+
+  if (toast) {
+    classNames.push(toast.type);
+    if (fadeout) {
+      classNames.push("fadeout");
+    }
+  }
+
+  return (
+    <div className="toast-wrapper" aria-live="polite">
+      {toast && (
+        <div className={classNames.join(" ")}>
+          {toast.message}
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/components/drag/{draggedOrder.js → draggedOrder.ts}

@@ -1,9 +1,14 @@
-function hovering(dragState, target) {
-  let { x, y } = dragState;
-  var rect;
-  if (target.rect) {
+import { Draggable, DragCollection, DragState } from "./types";
+
+function hovering(
+  dragState: DragState,
+  target: Draggable | React.MutableRefObject<HTMLDivElement>
+): boolean {
+  const { x, y } = dragState;
+  let rect: DOMRect;
+  if ("rect" in target) {
     rect = target.rect;
-  } else if (target.current) {
+  } else if ("current" in target) {
     rect = target.current.getBoundingClientRect();
   } else {
     return false;
@@ -12,7 +17,9 @@ function hovering(dragState, target) {
           y >= rect.top && y <= rect.bottom);
 }
 
-export function collectionOrder(collection, dragState) {
+export function collectionOrder(
+  collection: DragCollection, dragState: DragState
+): Draggable[] {
   const { draggables, ref } = collection;
   const { dragging } = dragState;
 
@@ -36,15 +43,18 @@ export function collectionOrder(collection, dragState) {
   return ordered;
 }
 
-export default function draggedOrder(collection, dragState) {
+export default function draggedOrder(
+  collection: DragCollection, dragState: DragState
+): Draggable[] {
   let ordered = collectionOrder(collection, dragState);
 
   if (dragState.dragging && ordered.indexOf(dragState.dragging) === -1) {
-    if (dragState.y < collection.ref.current.getBoundingClientRect().top) {
-      ordered = [dragState.dragging, ...ordered];
-    } else {
-      ordered.push(dragState.dragging);
-    }
+    if (collection.ref.current &&
+      dragState.y < collection.ref.current.getBoundingClientRect().top) {
+        ordered = [dragState.dragging, ...ordered];
+      } else {
+        ordered.push(dragState.dragging);
+      }
   }
 
   return ordered;

data/app/javascript/components/drag/types.ts

@@ -0,0 +1,28 @@
+export type DraggableRecord = Record<string, unknown>;
+
+export interface Draggable {
+  record: DraggableRecord,
+  ref: React.MutableRefObject<HTMLDivElement>,
+  rect: DOMRect | null,
+  handle: string
+}
+
+export interface DragCollectionAction {
+  type: string,
+  payload?: Draggable[] | Draggable | null
+}
+
+export interface DragCollection {
+  ref: React.MutableRefObject<HTMLDivElement>,
+  draggables: Draggable[],
+  dispatch: (DragCollectionAction) => void
+}
+
+export interface Position {
+  x: number | null,
+  y: number | null
+}
+
+export interface DragState extends Position {
+  dragging: Draggable | false
+}

data/app/javascript/components/drag/{useDragCollection.js → useDragCollection.ts}

@@ -1,15 +1,24 @@
-import React, { useEffect, useReducer, useRef } from "react";
-import uniqueId from "lodash/uniqueId";
+import { createRef, useEffect, useReducer, useRef } from "react";
+import { uniqueId } from "lodash";
 
-function getPosition(draggable) {
-  if (draggable.ref.current) {
+import {
+  Draggable,
+  DraggableRecord,
+  DragCollectionAction,
+  DragCollection
+} from "./types";
+
+type Draggables = Draggable[];
+
+function getPosition(draggable: Draggable) {
+  if (draggable && draggable.ref && draggable.ref.current) {
     return draggable.ref.current.getBoundingClientRect();
   } else {
     return null;
   }
 }
 
-function hideDraggable(draggable, callback) {
+function hideDraggable(draggable: Draggable | null, callback: () => void) {
   if (draggable && draggable.ref && draggable.ref.current) {
     const prevDisplay = draggable.ref.current.style.display;
     draggable.ref.current.style.display = "none";
@@ -22,22 +31,29 @@ function hideDraggable(draggable, callback) {
   }
 }
 
-function dragCollectionReducer(state, action) {
+function insertFiles(state: Draggable[], files: Draggable[]): Draggable[] {
+  const index = state.indexOf("Files");
+  if (index === -1 || !files) {
+    return state;
+  } else {
+    return [
+      ...state.slice(0, index),
+      ...files,
+      ...state.slice(index + 1)
+    ];
+  }
+}
+
+function dragCollectionReducer(
+  state: Draggable[], action: DragCollectionAction
+): Draggable[] {
   switch (action.type) {
   case "append":
-    return [...state, ...action.payload];
+    return [...state, ...action.payload as Draggable[]];
   case "prepend":
-    return [...action.payload, ...state];
+    return [...action.payload as Draggable[], ...state];
   case "insertFiles":
-    var index = state.indexOf("Files");
-
-    if (index === -1 || !action.payload) {
-      return state;
-    } else {
-      return [...state.slice(0, index),
-              ...action.payload,
-              ...state.slice(index + 1)];
-    }
+    return insertFiles(state, action.payload);
   case "update":
     return state.map(d => {
       return (d.handle === action.payload.handle) ? action.payload : d;
@@ -59,20 +75,22 @@ function dragCollectionReducer(state, action) {
   }
 }
 
-export function createDraggable(record) {
+export function createDraggable(record: Record<string, unknown>): Draggable {
   return { record: record,
            rect: null,
-           ref: React.createRef(),
+           ref: createRef(),
            handle: uniqueId("draggable") };
 }
 
-export default function useDragCollection(records) {
-  const containerRef = useRef();
+export default function useDragCollection(
+  records: DraggableRecord[]
+): DragCollection {
+  const containerRef = useRef<HTMLElement>(null);
   const [draggables, dispatch] = useReducer(
     dragCollectionReducer,
     [],
     () => records.map(r => createDraggable(r))
-  );
+  ) as [Draggables, (Draggables) => Draggable[]];
 
   useEffect(() => {
     dispatch({ type: "updatePositions" });