PageTreeContext

anyone-oslo · Oct 11, 2024 · 72af081 · 72af081
1 parent 9491a81
commit 72af081
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 42 deletions.
diff --git a/app/assets/builds/pages_core/admin-dist.js b/app/assets/builds/pages_core/admin-dist.js
diff --git a/app/assets/builds/pages_core/admin-dist.js.map b/app/assets/builds/pages_core/admin-dist.js.map
diff --git a/app/javascript/components/PageTree.tsx b/app/javascript/components/PageTree.tsx
@@ -7,6 +7,7 @@ import usePageTree, {
   movePage,
   visibleChildNodes
 } from "./PageTree/usePageTree";
+import { PageTreeContext } from "./PageTree/usePageTreeContext";
 import Node, { paddingLeft } from "./PageTree/Node";
 
 type DragState = {
@@ -65,7 +66,7 @@ export default function PageTree({ dir, locale, pages, permissions }: Props) {
 
       return (
         <div className="draggable" style={dragStateStyles}>
-          <Node state={dragState.tree} id={dragState.id} dispatch={dispatch} />
+          <Node id={dragState.id} />
         </div>
       );
     }
@@ -194,15 +195,19 @@ export default function PageTree({ dir, locale, pages, permissions }: Props) {
   }, [drag, dragEnd]);
 
   return (
-    <div className="page-tree">
-      {getDraggingDom()}
-      <Node
-        state={(dragging && dragState.tree) || state}
-        id={state.rootId}
-        dispatch={dispatch}
-        onDragStart={dragStart}
-        dragging={dragging && dragState.id}
-      />
-    </div>
+    <PageTreeContext.Provider
+      value={{
+        state: (dragging && dragState.tree) || state,
+        dispatch: dispatch
+      }}>
+      <div className="page-tree">
+        {getDraggingDom()}
+        <Node
+          id={state.rootId}
+          onDragStart={dragStart}
+          dragging={dragging && dragState.id}
+        />
+      </div>
+    </PageTreeContext.Provider>
   );
 }
diff --git a/app/javascript/components/PageTree/CollapseArrow.tsx b/app/javascript/components/PageTree/CollapseArrow.tsx
@@ -1,13 +1,13 @@
 import * as Tree from "./tree";
-import { State, Action, visibleChildNodes } from "./usePageTree";
+import { visibleChildNodes } from "./usePageTree";
+import usePageTreeContext from "./usePageTreeContext";
 
 type Props = {
   id: Tree.Id;
-  state: State;
-  dispatch: React.Dispatch<Action>;
 };
 
-export default function CollapseArrow({ id, state, dispatch }: Props) {
+export default function CollapseArrow({ id }: Props) {
+  const { state, dispatch } = usePageTreeContext();
   const node = state.nodes[id];
   const classNames = ["collapse fa-solid fa-caret-right"];
 

diff --git a/app/javascript/components/PageTree/CollapsedLabel.tsx b/app/javascript/components/PageTree/CollapsedLabel.tsx
@@ -1,12 +1,13 @@
 import * as Tree from "./tree";
-import { State, visibleChildNodes } from "./usePageTree";
+import { visibleChildNodes } from "./usePageTree";
+import usePageTreeContext from "./usePageTreeContext";
 
 type Props = {
   id: Tree.Id;
-  state: State;
-}
+};
 
-export default function CollapsedLabel({ id, state }: Props) {
+export default function CollapsedLabel({ id }: Props) {
+  const { state } = usePageTreeContext();
   const node = state.nodes[id];
   const count = visibleChildNodes(state, id).length;
 

diff --git a/app/javascript/components/PageTree/EditPageName.tsx b/app/javascript/components/PageTree/EditPageName.tsx
@@ -1,16 +1,16 @@
 import { useState } from "react";
 
 import * as Tree from "./tree";
-import { State, Action, updatePage } from "./usePageTree";
+import { updatePage } from "./usePageTree";
+import usePageTreeContext from "./usePageTreeContext";
 import Button from "./Button";
 
 type Props = {
   id: Tree.Id;
-  state: State;
-  dispatch: (action: Action) => void;
-}
+};
 
-export default function EditPageName({ id, state, dispatch }: Props) {
+export default function EditPageName({ id }: Props) {
+  const { state, dispatch } = usePageTreeContext();
   const { dir, locale } = state;
   const node = state.nodes[id];
   const page = node.record;

diff --git a/app/javascript/components/PageTree/Node.tsx b/app/javascript/components/PageTree/Node.tsx
@@ -1,14 +1,9 @@
 import { Fragment, useRef } from "react";
 
+import usePageTreeContext from "./usePageTreeContext";
 import * as Tree from "./tree";
 
-import {
-  State,
-  Action,
-  addChild,
-  updatePage,
-  visibleChildNodes
-} from "./usePageTree";
+import { addChild, updatePage, visibleChildNodes } from "./usePageTree";
 import Button from "./Button";
 import CollapseArrow from "./CollapseArrow";
 import CollapsedLabel from "./CollapsedLabel";
@@ -18,8 +13,6 @@ import EditPageName from "./EditPageName";
 
 type Props = {
   id: Tree.Id;
-  state: State;
-  dispatch: (action: Action) => void;
 
   dragging?: Tree.Id;
   onDragStart?: (
@@ -32,7 +25,8 @@ type Props = {
 export const paddingLeft = 20;
 
 export default function Node(props: Props) {
-  const { id, state, dispatch, dragging, onDragStart } = props;
+  const { state, dispatch } = usePageTreeContext();
+  const { id, dragging, onDragStart } = props;
   const { dir, locale } = state;
   const node = state.nodes[id];
   const page = node.record;
@@ -92,7 +86,7 @@ export default function Node(props: Props) {
   return (
     <div className={classNames.join(" ")}>
       <div className="inner" ref={innerRef} onMouseDown={handleDragStart}>
-        <CollapseArrow {...props} />
+        <CollapseArrow id={id} />
 
         {!page.editing && (
           <div className={pageClassNames.join(" ")}>
@@ -108,7 +102,7 @@ export default function Node(props: Props) {
               }
             />
             {"status" in page && <StatusLabel status={page.status} />}
-            <CollapsedLabel {...props} />
+            <CollapsedLabel id={id} />
             <span className="actions">
               {!("root" in page) && (
                 <Fragment>
@@ -152,7 +146,7 @@ export default function Node(props: Props) {
           </div>
         )}
 
-        {page.editing && <EditPageName {...props} />}
+        {page.editing && <EditPageName id={id} />}
       </div>
 
       {!node.collapsed && visibleChildNodes(state, id).length > 0 && (

diff --git a/app/javascript/components/PageTree/usePageTreeContext.ts b/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);
+}