add editor global state management

Author: softmarshmallow

editor/babel.config.js

@@ -12,6 +12,7 @@ module.exports = {
           layouts: "./layouts",
           scaffolds: "./scaffolds",
           utils: "./utils",
+          core: "./core",
           public: "./public",
           hooks: "./hooks",
         },

editor/core/actions/index.ts

@@ -0,0 +1,23 @@
+export type WorkspaceAction =
+  //
+  HistoryAction;
+
+export type HistoryAction =
+  //
+  | { type: "undo" }
+  //
+  | { type: "redo" }
+  | Action;
+
+export type Action =
+  //
+  PageAction;
+
+export type ActionType = Action["type"];
+
+export type PageAction = SelectPageAction;
+
+export interface SelectPageAction {
+  type: "select-page";
+  page: string;
+}

editor/core/dispatch/index.ts

@@ -0,0 +1,20 @@
+import { Action } from "../actions";
+import { createContext, useCallback, useContext } from "react";
+
+export type Dispatcher = (action: Action) => void;
+
+export type FlatDispatcher = (action: Action) => void;
+
+const __noop = () => {};
+
+export const DispatchContext = createContext<Dispatcher>(__noop);
+
+export const useDispatch = (): FlatDispatcher => {
+  const dispatch = useContext(DispatchContext);
+  return useCallback(
+    (action: Action) => {
+      dispatch(action);
+    },
+    [dispatch]
+  );
+};

editor/core/reducers/editor-reducer.ts

@@ -0,0 +1,13 @@
+import { Action } from "core/actions";
+import { EditorState } from "core/states";
+
+export function editorReducer(state: EditorState, action: Action): EditorState {
+  // TODO: handle actions here.
+  switch (action.type) {
+    case "select-page": {
+      // return pageReducer(state, action);
+    }
+  }
+
+  return state;
+}

editor/core/reducers/history/history-reducer.ts

@@ -0,0 +1,92 @@
+import produce from "immer";
+import { ActionType, HistoryAction } from "core/actions";
+import { EditorState, HistoryEntry, HistoryState } from "core/states";
+import { editorReducer } from "../editor-reducer";
+
+export function historyReducer(state: HistoryState, action: HistoryAction) {
+  const currentState = state.present;
+  switch (action.type) {
+    case "undo":
+      if (state.past.length === 0) {
+        return state;
+      } else {
+        return produce(state, (draft) => {
+          const nextPresent = draft.past.pop();
+          if (nextPresent) {
+            draft.future.unshift(
+              createHistoryEntry(nextPresent.actionType, currentState)
+            );
+            draft.present = nextPresent.state;
+          }
+        });
+      }
+    case "redo":
+      if (state.future.length === 0) {
+        return state;
+      } else {
+        return produce(state, (draft) => {
+          const nextPresent = draft.future.shift();
+          if (nextPresent) {
+            draft.past.push(
+              createHistoryEntry(nextPresent.actionType, currentState)
+            );
+            draft.present = nextPresent.state;
+          }
+        });
+      }
+    default:
+      const nextState = editorReducer(currentState, action);
+      const mergableEntry = getMergableHistoryEntry(state, action[0]);
+
+      return produce(state, (draft) => {
+        const historyEntry = createHistoryEntry(action[0], {
+          ...currentState,
+        });
+
+        if (mergableEntry) {
+          draft.past[draft.past.length - 1] = {
+            ...historyEntry,
+            state: mergableEntry.state,
+          };
+        } else {
+          draft.past.push(historyEntry);
+        }
+        draft.future = [];
+        draft.present = nextState;
+      });
+  }
+}
+
+function createHistoryEntry(
+  actionType: ActionType,
+  state: EditorState
+): HistoryEntry {
+  return {
+    actionType,
+    state,
+    timestamp: Date.now(),
+  };
+}
+
+const CHANGE_DIFF_DURATION_MS = 300;
+
+function getMergableHistoryEntry(
+  state: HistoryState,
+  actionType: ActionType
+): HistoryEntry | undefined {
+  if (state.past.length === 0) {
+    return;
+  }
+
+  const newTimestamp = Date.now();
+  const previousEntry = state.past[state.past.length - 1];
+
+  if (
+    actionType !== previousEntry.actionType ||
+    newTimestamp - previousEntry.timestamp > CHANGE_DIFF_DURATION_MS
+  ) {
+    return;
+  }
+
+  return previousEntry;
+}

editor/core/reducers/history/index.ts

@@ -0,0 +1 @@
+export * from "./history-reducer";

editor/core/reducers/index.ts

@@ -0,0 +1 @@
+export * from "./workspace-reducer";

editor/core/reducers/workspace-reducer.ts

@@ -0,0 +1,17 @@
+import { WorkspaceState } from "core/states";
+import produce from "immer";
+import { WorkspaceAction } from "../actions";
+import { historyReducer } from "./history";
+
+export function workspaceReducer(
+  state: WorkspaceState,
+  action: WorkspaceAction
+): WorkspaceState {
+  switch (action.type) {
+    default: {
+      return produce(state, (draft) => {
+        draft.history = historyReducer(state.history, action);
+      });
+    }
+  }
+}

editor/core/states/editor-context.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { WorkspaceState } from "./workspace-state";
+
+export const StateContext = createContext<WorkspaceState | undefined>(
+  undefined
+);

editor/core/states/editor-initial-state.ts

@@ -0,0 +1,9 @@
+import { EditorSnapshot, EditorState } from "./editor-state";
+
+export function createInitialEditorState(app: EditorSnapshot): EditorState {
+  return {
+    selectedPage: app.selectedPage,
+    selectedNodes: app.selectedNodes,
+    design: app.design,
+  };
+}