pages_core 3.15.3 → 3.15.5

data/app/javascript/components/PageTree/tree.ts

@@ -0,0 +1,268 @@
+export type Id = number;
+export type Node<T> = {
+  id: Id;
+  collapsed: boolean;
+  record: T;
+  childNodes: Id[];
+  parent?: Id;
+  height?: number;
+  top?: number;
+  left?: number;
+};
+
+export type MovePlacement = "before" | "after" | "prepend" | "append";
+
+type InitNodeFn<T> = (node: T) => { children: Array<T>; collapsed?: boolean };
+type SortFn<T> = (a: Node<T>, b: Node<T>) => number;
+type Index<T> = Record<Id, Node<T>>;
+
+export type State<T> = {
+  rootId: Id;
+  nodes: Index<T>;
+  initNode: InitNodeFn<T>;
+};
+
+const uniqueId = (() => {
+  let id = 1;
+  return (): Id => {
+    return id++;
+  };
+})();
+
+export function getNodeByTop<T>(state: State<T>, top: number): Node<T> | null {
+  return Object.values(state.nodes).find((n) => n.top === top) || null;
+}
+
+export function sibling<T>(state: State<T>, id: Id, offset: number) {
+  const parent = state.nodes[state.nodes[id].parent];
+  if (!parent) {
+    return null;
+  }
+  const index = parent.childNodes.indexOf(id) + offset;
+  if (index >= 0 && index < parent.childNodes.length) {
+    return state.nodes[parent.childNodes[index]];
+  }
+  return null;
+}
+
+export function parents<T>(state: State<T>, id: Id) {
+  const node = state.nodes[id];
+  if (node.parent) {
+    return [...parents(state, node.parent), node.parent];
+  } else {
+    return [];
+  }
+}
+
+export function nextSibling<T>(state: State<T>, id: Id) {
+  return sibling(state, id, 1);
+}
+
+export function prevSibling<T>(state: State<T>, id: Id) {
+  return sibling(state, id, -1);
+}
+
+export function sortChildNodes<T>(state: State<T>, id: Id, sortFn: SortFn<T>) {
+  return updateNode(state, id, {
+    childNodes: state.nodes[id].childNodes
+      .map((i) => state.nodes[i])
+      .sort(sortFn)
+      .map((n) => n.id)
+  });
+}
+
+export function move<T>(
+  prevState: State<T>,
+  id: Id,
+  target: Id,
+  position: number
+) {
+  if (id === target) {
+    return prevState;
+  }
+  const node = prevState.nodes[id];
+  const state = removeNode(prevState, id);
+  return insertNode(state, target, node, position);
+}
+
+export function moveRelative<T>(
+  prevState: State<T>,
+  id: Id,
+  target: Id,
+  placement: MovePlacement
+): State<T> {
+  if (id === target) {
+    return prevState;
+  }
+  const node = prevState.nodes[id];
+  const state = removeNode(prevState, id);
+
+  switch (placement) {
+    case "before":
+      return insertAdjacentNode(state, target, node);
+    case "after":
+      return insertAdjacentNode(state, target, node, 1);
+    case "prepend":
+      return insertNode(state, target, node);
+    case "append":
+      return insertNode(state, target, node, -1);
+    default:
+      return state;
+  }
+}
+
+export function insertAdjacent<T>(
+  state: State<T>,
+  sibling: Id,
+  record: T,
+  offset: number = 0
+): State<T> {
+  const target = state.nodes[sibling];
+  const index = state.nodes[target.parent].childNodes.indexOf(target.id);
+  return insert(state, target.parent, record, index + offset);
+}
+
+function insertAdjacentNode<T>(
+  state: State<T>,
+  sibling: Id,
+  node: Node<T>,
+  offset: number = 0
+): State<T> {
+  const target = state.nodes[sibling];
+  const index = state.nodes[target.parent].childNodes.indexOf(target.id);
+  return insertNode(state, target.parent, node, index + offset);
+}
+
+function insertNode<T>(
+  state: State<T>,
+  parent: Id,
+  node: Node<T>,
+  position: number = 0
+) {
+  const parentNode = state.nodes[parent];
+  const childNodes = [...parentNode.childNodes];
+  if (position < 0) {
+    position += childNodes.length + 1;
+  }
+  childNodes.splice(position, 0, node.id);
+
+  return updateNode(updateNode(state, node.id, { parent: parent }), parent, {
+    childNodes: childNodes
+  });
+}
+
+export function insert<T>(
+  state: State<T>,
+  parent: Id,
+  record: T,
+  position: number = 0
+): State<T> {
+  const [node, newNodes] = makeNode(record, state.initNode, parent);
+  const nextState = { ...state, nodes: { ...state.nodes, ...newNodes } };
+  return insertNode(nextState, parent, node, position);
+}
+
+function makeNode<T>(
+  record: T,
+  initNode: InitNodeFn<T>,
+  parent?: Id
+): [Node<T>, Index<T>] {
+  const id = uniqueId();
+  const childNodes = [];
+  let index = {};
+
+  const { children, collapsed } = initNode(record);
+
+  if (children) {
+    children.forEach((r) => {
+      const [childNode, childIndex] = makeNode(r, initNode, id);
+      childNodes.push(childNode.id);
+      index = { ...index, ...childIndex };
+    });
+  }
+
+  const node = {
+    id: id,
+    collapsed: collapsed || false,
+    record: record,
+    childNodes: childNodes,
+    parent: parent
+  };
+
+  return [node, { ...index, [node.id]: node }];
+}
+
+function removeNode<T>(state: State<T>, id: Id) {
+  const node = state.nodes[id];
+  if (node.parent) {
+    const childNodes = [...state.nodes[node.parent].childNodes];
+    childNodes.splice(childNodes.indexOf(id), 1);
+    return updateNode(state, node.parent, { childNodes: childNodes });
+  } else {
+    return state;
+  }
+}
+
+export function remove<T>(prevState: State<T>, id: Id) {
+  const state = removeNode(prevState, id);
+
+  const removeIndex = (id: Id) => {
+    state.nodes[id].childNodes.forEach((c) => removeIndex(c));
+    delete state.nodes[id];
+  };
+  removeIndex(id);
+
+  return state;
+}
+
+export function update<T>(state: State<T>, id: Id, updated: Partial<T>) {
+  const record = { ...state.nodes[id].record, ...updated };
+  return updateNode(state, id, { record: record });
+}
+
+export function updateNode<T>(
+  state: State<T>,
+  id: Id,
+  updated: Partial<Node<T>>
+) {
+  const node = state.nodes[id];
+  return { ...state, nodes: { ...state.nodes, [id]: { ...node, ...updated } } };
+}
+
+export function indexPositions<T>(prevState: State<T>): State<T> {
+  let top = 1;
+  let state = { ...prevState };
+  const walk = (id: Id, left: number = 1, parentCollapsed?: boolean) => {
+    const position = { height: 1, top: null, left: null };
+    const node = state.nodes[id];
+
+    if (!parentCollapsed) {
+      position.top = top++;
+      position.left = left;
+    }
+
+    node.childNodes.forEach((i) => {
+      position.height += walk(i, left + 1, parentCollapsed || node.collapsed);
+    });
+
+    if (node.collapsed) {
+      position.height = 1;
+    }
+
+    state = updateNode(state, id, position);
+    return position.height;
+  };
+
+  walk(state.rootId);
+
+  return state;
+}
+
+export function build<T>(root: T, initNode: InitNodeFn<T>): State<T> {
+  const [rootNode, nodes] = makeNode(root, initNode);
+  return {
+    rootId: rootNode.id,
+    initNode: initNode,
+    nodes: nodes
+  };
+}

data/app/javascript/components/PageTree/usePageTree.ts

@@ -0,0 +1,268 @@
+import { useMemo, useReducer } from "react";
+
+import * as Pages from "../../types/Pages";
+import { postJson, putJson } from "../../lib/request";
+import * as Tree from "./tree";
+
+type CollapsedState = Record<number, boolean>;
+type RootRecord = {
+  blocks: Pages.Blocks;
+  permissions: string[];
+  root: true;
+  editing: false;
+};
+type PageRecord = Pages.TreeResource;
+type TreeRecord = RootRecord | PageRecord;
+
+export type State = Tree.State<TreeRecord> & {
+  locale: string;
+  dir: string;
+};
+
+export type Action =
+  | {
+      type: "move";
+      id: Tree.Id;
+      payload: { parent: Tree.Id; position: number };
+    }
+  | { type: "append" | "addChild"; id: Tree.Id; payload: TreeRecord }
+  | { type: "remove" | "sortNewsPage"; id: Tree.Id }
+  | { type: "setCollapsed"; id: Tree.Id; payload: boolean }
+  | { type: "update"; id: Tree.Id; payload: Partial<TreeRecord> };
+
+const permittedAttributes = [
+  "status",
+  "news_page",
+  "published_at",
+  "pinned",
+  "parent_page_id"
+];
+
+export function movePage(
+  prevState: State,
+  id: Tree.Id,
+  dispatch: React.Dispatch<Action>
+) {
+  const state = sortNewsPage(prevState, prevState.nodes[id].parent);
+  const node = state.nodes[id];
+  const parentNode = state.nodes[node.parent];
+  const position = parentNode.childNodes.indexOf(id);
+
+  if ("id" in node.record && node.record.id) {
+    const data = {
+      parent_id: !("root" in parentNode.record) && parentNode.record.id,
+      position: position + 1
+    };
+
+    dispatch({
+      type: "move",
+      id: id,
+      payload: { parent: parentNode.id, position: position }
+    });
+
+    putJson(
+      `/admin/${state.locale}/pages/${node.record.id}/move.json`,
+      data
+    ).then((response) => {
+      dispatch({ type: "update", id: id, payload: response });
+    });
+  }
+}
+
+export function updatePage(
+  state: State,
+  id: Tree.Id,
+  dispatch: React.Dispatch<Action>,
+  attributes: Partial<PageRecord>
+) {
+  const node = state.nodes[id];
+  const page = node.record;
+  const updateState = (updated: Partial<PageRecord>) => {
+    dispatch({
+      type: "update",
+      id: id,
+      payload: { ...attributes, ...updated }
+    });
+  };
+
+  let data = {};
+  if (attributes.blocks) {
+    data = { ...attributes.blocks };
+  }
+  permittedAttributes.forEach((a) => {
+    if (Object.prototype.hasOwnProperty.call(attributes, a)) {
+      data[a] = attributes[a];
+    }
+  });
+
+  if ("id" in page) {
+    putJson(`/admin/${state.locale}/pages/${page.id}.json`, {
+      page: data
+    }).then(updateState);
+  } else {
+    const parent = state.nodes[node.parent];
+    if (parent && "id" in parent.record) {
+      data = { parent_page_id: parent.record.id, ...data };
+    }
+    postJson(`/admin/${state.locale}/pages.json`, { page: data }).then(
+      updateState
+    );
+  }
+}
+
+export function visibleChildNodes(state: State, id: Tree.Id) {
+  return state.nodes[id].childNodes
+    .map((i) => state.nodes[i])
+    .filter((n) => "status" in n.record && n.record.status !== 4)
+    .map((n) => n.id);
+}
+
+export function addChild(
+  state: State,
+  id: Tree.Id,
+  dispatch: React.Dispatch<Action>
+) {
+  const parentNode = state.nodes[id];
+
+  const record: PageRecord = {
+    blocks: { name: { [state.locale]: "" } },
+    status: 0,
+    editing: true,
+    news_page: false,
+    published_at: new Date(),
+    pinned: false,
+    parent_page_id: "id" in parentNode.record && parentNode.record.id,
+    permissions: parentNode.record.permissions
+  };
+
+  dispatch({ type: "addChild", id: id, payload: record });
+}
+
+function setCollapsed(state: State, id: Tree.Id, value: boolean): State {
+  const node = state.nodes[id];
+  if ("id" in node.record) {
+    storeCollapsed(node.record.id, value);
+  }
+  return { ...state, ...Tree.updateNode(state, id, { collapsed: value }) };
+}
+
+function sortNewsPage(state: State, id: Tree.Id) {
+  const record = state.nodes[id].record;
+  if ("news_page" in record && record.news_page) {
+    return { ...state, ...Tree.sortChildNodes(state, id, sortChildren) };
+  } else {
+    return state;
+  }
+}
+
+function reducer(state: State, action: Action): State {
+  const { id, type } = action;
+
+  const chain = (operations: Array<Partial<Action>>) => {
+    return operations.reduce((s, o) => {
+      return reducer(s, { id: id, ...o } as Action);
+    }, state);
+  };
+
+  switch (type) {
+    case "addChild": {
+      return chain([
+        { type: "setCollapsed", payload: false },
+        { type: "append", payload: action.payload },
+        { type: "sortNewsPage" }
+      ]);
+    }
+    case "append":
+      return { ...state, ...Tree.insert(state, id, action.payload, -1) };
+    case "move":
+      return {
+        ...state,
+        ...Tree.move(state, id, action.payload.parent, action.payload.position)
+      };
+    case "remove":
+      return { ...state, ...Tree.remove(state, id) };
+    case "setCollapsed":
+      return { ...state, ...setCollapsed(state, id, action.payload) };
+    case "sortNewsPage":
+      return { ...state, ...sortNewsPage(state, id) };
+    case "update":
+      return { ...state, ...Tree.update(state, id, action.payload) };
+    default:
+      return state;
+  }
+}
+
+function collapsedState(): CollapsedState {
+  return JSON.parse(window?.localStorage?.getItem("collapsedPages") || "{}");
+}
+
+function storeCollapsed(id: number, value: boolean) {
+  const state = { ...collapsedState(), [id]: value };
+  window.localStorage.setItem("collapsedPages", JSON.stringify(state));
+}
+
+function sortChildren(a: Tree.Node<PageRecord>, b: Tree.Node<PageRecord>) {
+  if (a.record.pinned == b.record.pinned) {
+    return (
+      new Date(b.record.published_at).getTime() -
+      new Date(a.record.published_at).getTime()
+    );
+  } else {
+    return a.record.pinned ? -1 : 1;
+  }
+}
+
+function indexingReducer(state: State, action: Action): State {
+  return { ...state, ...Tree.indexPositions(reducer(state, action)) };
+}
+
+export default function usePageTree(
+  pages: PageRecord[],
+  locale: string,
+  dir: string,
+  permissions: string[]
+): [State, React.Dispatch<Action>] {
+  const root: RootRecord = {
+    blocks: { name: { [locale]: "All Pages" } },
+    permissions: permissions,
+    root: true,
+    editing: false
+  };
+
+  const parentMap = useMemo(() => {
+    return pages.reduce((m, p) => {
+      const id = p.parent_page_id || 0;
+      m[id] = [...(m[id] || []), p];
+      return m;
+    }, {});
+  }, [pages]);
+
+  const isCollapsed = (page: PageRecord) => {
+    const state = collapsedState();
+    if (page.id && page.id in state) {
+      return state[page.id];
+    } else if (page.news_page || page.parent_page_id) {
+      return true;
+    }
+    return false;
+  };
+
+  const initNode = (page: TreeRecord) => {
+    if ("root" in page) {
+      return { children: parentMap[0], collapsed: false };
+    } else if (page.id) {
+      return { children: parentMap[page.id], collapsed: isCollapsed(page) };
+    } else {
+      return { children: [], collapsed: false };
+    }
+  };
+
+  const [state, dispatch] = useReducer(indexingReducer, {}, () => {
+    return {
+      ...Tree.indexPositions(Tree.build(root, initNode)),
+      dir: dir,
+      locale: locale
+    };
+  });
+  return [state, dispatch];
+}

data/app/javascript/components/PageTree/usePageTreeContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+import { State, Action } from "./usePageTree";
+
+type Context = {
+  state: State;
+  dispatch: React.Dispatch<Action>;
+};
+
+export const PageTreeContext = createContext<Context>(null);
+
+export default function usePageTreeContext() {
+  return useContext(PageTreeContext);
+}