Add steps to the editor #114

look at this fancy tree

17 KiB

Design autonomous components. Too many are tied to the DOM, to the whole tree or to a global state.
Don't blindly think that functional programming imposes perfect immutability, especially with user interfaces.

As React state management becomes more complex when the application grows, it's important to keep the state management and prop drilling as simple as possible.
Think about the data flow in your application, place it in the parent component, and pass it down to the child components as props.
If you need your state to involve nested data structures or partial updates, consider not exposing the state setter directly.
Wrap it in a function that will handle closely related state updates. useReducer can be a good fit for this.

Components that use those dispatch functions usually have fewer props and may use an alternate data representation when raising updates.

Here's an example with the StepsTreeNode component:

// *Code shortened for brevity*
// Dispatcher types:
type NonEmptyArray<T> = [T, ...T[]]
type StepTreeAction = {
    type: "ADD_STEP"
    payload: {
        pathToRoot: NonEmptyArray<StepInfoNode>,
    }
} | {
    type: "REMOVE_STEP"
    payload: {
        pathToRoot: NonEmptyArray<StepInfoNode>,
    }
} | {
    type: "REPLACE"
    payload: {
        root: StepInfoNode,
    }
}

// Component:
interface StepsTreeContentProps {
    node: StepInfoNode
    onUpdate: (action: StepTreeAction) => void
}
function StepsTreeNode({ node, onUpdate }: StepsTreeContentProps) {
    const onChildUpdate = useCallback(
        (action: StepTreeAction) => {
            if (action.type !== "REPLACE") {
                action.payload.pathToRoot.push(node)
            }
            onUpdate(action)
        },
        [node, onUpdate]
    )
    return (
        <div>
            <button onClick={() => onUpdate({ type: "ADD_STEP", payload: { pathToRoot: [node] } })}>
                Add step
            </button>
            <button onClick={() => onUpdate({ type: "REMOVE_STEP", payload: { pathToRoot: [node] } })}>
                Remove step
            </button>
            {node.children.map((child) => (
                <StepsTreeNode key={child.id} node={child} onUpdate={onChildUpdate} />
            ))}
        </div>
    )
}

State and updates are still abstracted from the component in the reducer create upper in the component hierarchy,
but the component collaborates with the parent to add information as the update progresses upwards.

Those days, state updates are often asynchronous, and it can become difficult to reason about the state of the application at a given point.
There are state management libraries that can help with this, but it can also be done by combining React native hooks.

For example, the state may be updated only after an API request has been completed. It could look like this:

// StepTreeAction designates the action type as the event bubble up the tree,
// and ReducerAction is the internal UI action, when the event is completed by the API response.
export function useStepTree(tacticId: number): [StepInfoNode, (action: StepTreeAction) => void] {
    // Creates an internal reducer with a state that averagely copy the API data.
    const [state, dispatch] = useReducer(treeReducer, /*initialState*/);
    const adaptedDispatch = useCallback(({ type, payload }: StepTreeAction) => {
        switch (type) {
            case "ADD_STEP": {
                // We don't do the state immediately, since we need an API response with the new step ID.
                const parent = payload.pathToRoot[0]
                fetchAPI(`tactics/${tacticId}/steps`, {
                    parentId: parent.id,
                    content: [],
                }).then((res) => res.json()).then(({ stepId }) => {
                    // Updates the React state only after that
                    dispatch({
                        type,
                        payload: {
                            pathToRoot: payload.pathToRoot,
                            allocatedId: stepId,
                        }
                    })
                })
                break
            }
            // ...
        }
    }, [tacticId]);
    return [state, adaptedDispatch];
}

function treeReducer(_: StepInfoNode, { type, payload }: ReducerAction): StepInfoNode {
    switch (type) {
        case "ADD_STEP": {
            // Create a new tree with the new node
            const [attachNode, ...pathToRoot] = payload.pathToRoot
            let child: StepInfoNode = {
                id: attachNode.id,
                children: [...attachNode.children, {
                    id: payload.allocatedId,
                    children: [],
                }],
            }
            for (const node of pathToRoot) {
                child = {
                    id: node.id,
                    children: node.children.map((node) => node.id === child.id ? child : node),
                }
            }
            return child
        }
    }
}

The dispatch arguments are adapted when the result is received in order to reflect to update the UI accordingly.

State management is a complex topic, with a lot of pitfalls and not always clean solutions.
Thinking about where events are created, where they are completed, when the state is updated, and how the API is called can help to keep the state management clean and maintainable.
Good luck with that!

Design autonomous components. Too many are tied to the DOM, to the whole tree or to a global state. Don't blindly think that functional programming imposes perfect immutability, especially with user interfaces. As React state management becomes more complex when the application grows, it's important to keep the state management and prop drilling as simple as possible. Think about the data flow in your application, place it in the parent component, and pass it down to the child components as props. If you need your state to involve nested data structures or partial updates, consider not exposing the state setter directly. Wrap it in a function that will handle closely related state updates. [`useReducer`](https://react.dev/reference/react/useReducer) can be a good fit for this. Components that use those dispatch functions usually have fewer props and may use an alternate data representation when raising updates. Here's an example with the `StepsTreeNode` component: ```tsx // *Code shortened for brevity* // Dispatcher types: type NonEmptyArray<T> = [T, ...T[]] type StepTreeAction = { type: "ADD_STEP" payload: { pathToRoot: NonEmptyArray<StepInfoNode>, } } | { type: "REMOVE_STEP" payload: { pathToRoot: NonEmptyArray<StepInfoNode>, } } | { type: "REPLACE" payload: { root: StepInfoNode, } } // Component: interface StepsTreeContentProps { node: StepInfoNode onUpdate: (action: StepTreeAction) => void } function StepsTreeNode({ node, onUpdate }: StepsTreeContentProps) { const onChildUpdate = useCallback( (action: StepTreeAction) => { if (action.type !== "REPLACE") { action.payload.pathToRoot.push(node) } onUpdate(action) }, [node, onUpdate] ) return ( <div> <button onClick={() => onUpdate({ type: "ADD_STEP", payload: { pathToRoot: [node] } })}> Add step </button> <button onClick={() => onUpdate({ type: "REMOVE_STEP", payload: { pathToRoot: [node] } })}> Remove step </button> {node.children.map((child) => ( <StepsTreeNode key={child.id} node={child} onUpdate={onChildUpdate} /> ))} </div> ) } ``` State and updates are still abstracted from the component in the reducer create upper in the component hierarchy, but the component collaborates with the parent to add information as the update progresses upwards. Those days, state updates are often asynchronous, and it can become difficult to reason about the state of the application at a given point. There are state management libraries that can help with this, but it can also be done by combining React native hooks. For example, the state may be updated only after an API request has been completed. It could look like this: ```tsx // StepTreeAction designates the action type as the event bubble up the tree, // and ReducerAction is the internal UI action, when the event is completed by the API response. export function useStepTree(tacticId: number): [StepInfoNode, (action: StepTreeAction) => void] { // Creates an internal reducer with a state that averagely copy the API data. const [state, dispatch] = useReducer(treeReducer, /*initialState*/); const adaptedDispatch = useCallback(({ type, payload }: StepTreeAction) => { switch (type) { case "ADD_STEP": { // We don't do the state immediately, since we need an API response with the new step ID. const parent = payload.pathToRoot[0] fetchAPI(`tactics/${tacticId}/steps`, { parentId: parent.id, content: [], }).then((res) => res.json()).then(({ stepId }) => { // Updates the React state only after that dispatch({ type, payload: { pathToRoot: payload.pathToRoot, allocatedId: stepId, } }) }) break } // ... } }, [tacticId]); return [state, adaptedDispatch]; } function treeReducer(_: StepInfoNode, { type, payload }: ReducerAction): StepInfoNode { switch (type) { case "ADD_STEP": { // Create a new tree with the new node const [attachNode, ...pathToRoot] = payload.pathToRoot let child: StepInfoNode = { id: attachNode.id, children: [...attachNode.children, { id: payload.allocatedId, children: [], }], } for (const node of pathToRoot) { child = { id: node.id, children: node.children.map((node) => node.id === child.id ? child : node), } } return child } } } ``` The dispatch arguments are adapted when the result is received in order to reflect to update the UI accordingly. State management is a complex topic, with a lot of pitfalls and not always clean solutions. Thinking about where events are created, where they are completed, when the state is updated, and how the API is called can help to keep the state management clean and maintainable. Good luck with that!

While not being very idiomatic, the "service" way of managing the states is much better.

 # this sed command will replace the included `profile/dev-config-profile.php` to `profile/prod-config-file.php` in the config.php file.
 sed -E -i 's/\/\*PROFILE_FILE\*\/\s*".*"/"profiles\/prod-config-profile.php"/' config.php
 DRONE_BRANCH_ESCAPED=$(sed -E 's/\//\\\//g' <<< "$DRONE_BRANCH")
 sed -E -i "s/const BASE_PATH = .*;/const BASE_PATH = \"\/IQBall\/$DRONE_BRANCH_ESCAPED\/public\";/" profiles/prod-config-profile.php

                 rootNode={root}
                 selectedStepId={selectedStepId}
                 onAddChildren={onAddChildren}
                 onRemoveNode={onRemoveNode}

                 <BendableArrow
                     key={child.id}
                     area={ref}
                     startPos={"step-piece-" + stepId}

                     segments={[
                         {
                             next:
                                 "step-piece-" + getStepName(rootNode, child.id),

     isSelected: boolean
     onAddButtonClicked?: () => void
     onRemoveButtonClicked?: () => void
     onSelected: () => void

             )
             const infoResponse = await infoResponsePromise
             const treeResponse = await treeResponsePromise

				`import { ReactNode, useCallback, useEffect, useRef, useState } from "react"`

				`export interface SlideLayoutProps {`

     onRightWidthChange: (w: number) => void
 }
 export default function CurtainLayout({


				`const handleMouseDown = () => setResizing(true)`

				`slider.addEventListener("mousedown", handleMouseDown)`

 }: StepsTreeContentProps) {
     const ref = useRef<HTMLDivElement>(null)
     const stepId = getStepName(rootNode, node.id)

             <div className="step-piece-actions">
                 {onAddButtonClicked && (
                     <AddSvg
                         onClick={() => onAddButtonClicked()}

                 )}
                 {onRemoveButtonClicked && (
                     <RemoveSvg
                         onClick={() => onRemoveButtonClicked()}

 /**
  * Spreads the changes to others actions and components, directly or indirectly bound to the origin, implied by the change of the origin's actual state with
  * the given newState.
  * @returns the new state if it has been updated, or null if no changes were operated

     return {
         ...root,
         children: root.children.map((c) => addStepNode(c, parent, child)),

     return guestMode ? <GuestModeEditor /> : <UserModeEditor />
 }
 function GuestModeEditor() {

				`set -e`

				`set -xeu`


				`beforeAll(login)`

				`test("create tactic", async () => {`

             if (!response.ok) return null
             const { stepId } = await response.json()
             const child = { id: stepId, children: [] }
             setStepsTree(addStepNode(stepsTree, parent, child))

                 )
             }),
         [doDeleteAction, doUpdateAction],
         [courtRef, doDeleteAction, doUpdateAction, editorContentCurtainWidth],

 #show-steps-button {
     user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;

     expect(createTacticResponse.status).toBe(200)
     const { id } = await createTacticResponse.json()
     const tasks = Array.from({ length: 200 }).map(async () => {

     const steps = []
     for (const task of tasks) {
         steps.push(await task)
     }

 #VITE_API_ENDPOINT=https://iqball.maxou.dev/api/dotnet-master
 VITE_API_ENDPOINT=http://localhost:5254
 VITE_API_ENDPOINT=http://grospc:5254

				`import React, { ReactNode, useCallback, useRef, useState } from "react"`

				`export interface CurtainLayoutProps {`

                     />
                 )}
             </div>
             <p>{children}</p>

         content.components.filter((c) => c.type !== "phantom") as (
             | Player
             | CourtObject
         )[]

Add steps to the editor #114

Reviewers