refactor: separate redux from store logic

Author: ivan-lednev

fixtures/metadata-dump/tasks.json

@@ -1,4 +1,10 @@
 {
+  "pathToMtime": {
+    "HREN.md": 1745496961167,
+    "tasks.md": 1752841860573,
+    "test yaml.md": 1752930178503,
+    "fixture-vault/Test.md": 1753020632753
+  },
   "tasks": [
     {
       "symbol": "-",

src/dump-metadata.ts

@@ -23,15 +23,17 @@ export function createDumpMetadataCommand(app: App) {
 
     await app.vault.adapter.mkdir(metadataDumpPath);
 
+    const markdownFiles = app.vault.getMarkdownFiles();
+
     const dump = {
+      pathToMtime: Object.fromEntries(
+        markdownFiles.map((it) => [it.path, it.stat.mtime]),
+      ),
       tasks: dataview?.pages(`"${fixtureVaultPath}"`).file.tasks.array(),
       headings: Object.fromEntries(
         app.vault
           .getMarkdownFiles()
-          .map((tFile) => [
-            tFile.path,
-            app.metadataCache.getFileCache(tFile)?.headings,
-          ]),
+          .map((it) => [it.path, app.metadataCache.getFileCache(it)?.headings]),
       ),
     };
 

src/main.ts

@@ -1,3 +1,4 @@
+import { isAnyOf } from "@reduxjs/toolkit";
 import {
   MarkdownView,
   Notice,
@@ -34,17 +35,15 @@ import {
 import {
   dataviewChange as dataviewChangeAction,
   listPropsParsed,
+  selectDataviewLoaded,
+  selectListProps,
 } from "./redux/dataview/dataview-slice";
-import {
-  darkModeUpdated,
-  keyDown as keyDownAction,
-  networkStatusChanged,
-  visibleDaysUpdated,
-} from "./redux/global-slice";
+import { editCanceled, visibleDaysUpdated } from "./redux/global-slice";
 import {
   initialIcalState,
   type IcalState,
   icalRefreshRequested,
+  selectRemoteTasks,
 } from "./redux/ical/ical-slice";
 import { initListenerMiddleware } from "./redux/listener-middleware";
 import { settingsUpdated } from "./redux/settings-slice";
@@ -78,6 +77,7 @@ import { createRenderMarkdown } from "./util/create-render-markdown";
 import { createShowPreview } from "./util/create-show-preview";
 import { createDailyNoteIfNeeded } from "./util/daily-notes";
 import { notifyAboutStartedTasks } from "./util/notify-about-started-tasks";
+import { createEnvironmentHooks } from "./util/create-environment-hooks";
 
 export default class DayPlanner extends Plugin {
   settings!: () => DayPlannerSettings;
@@ -87,7 +87,6 @@ export default class DayPlanner extends Plugin {
   private sTaskEditor!: STaskEditor;
   private vaultFacade!: VaultFacade;
   private transationWriter!: TransactionWriter;
-  private syncDataview?: () => void;
   private currentUndoNotice?: Notice;
 
   async onload() {
@@ -119,6 +118,14 @@ export default class DayPlanner extends Plugin {
     );
 
     this.registerViews({ store, listenerMiddleware });
+
+    const handleEditorMenu = createEditorMenuCallback({
+      sTaskEditor: this.sTaskEditor,
+      plugin: this,
+    });
+
+    this.registerEvent(this.app.workspace.on("editor-menu", handleEditorMenu));
+
     this.registerCommands();
     this.addRibbonIcons();
     this.addSettingTab(new DayPlannerSettingsTab(this, this.settingsStore));
@@ -355,9 +362,7 @@ export default class DayPlanner extends Plugin {
       onEditCanceled: () => {
         new Notice("Edit canceled");
 
-        // We need to manually reset tasks to the initial state
-        // todo: use an optimistic update
-        this.syncDataview?.();
+        store.dispatch(editCanceled());
       },
     });
 
@@ -371,57 +376,50 @@ export default class DayPlanner extends Plugin {
     const useSelector = createUseSelector(store);
     const actionDispatched = useActionDispatched({ listenerMiddleware });
 
+    const remoteTasks = useSelector(selectRemoteTasks);
+    const listProps = useSelector(selectListProps);
+    const dataviewLoaded = useSelector(selectDataviewLoaded);
+
     const dataviewRefreshSignal = derived(
       actionDispatched,
       ($actionDispatched, set) => {
-        if (listPropsParsed.match($actionDispatched)) {
+        if (isAnyOf(listPropsParsed, editCanceled)) {
           set($actionDispatched);
         }
       },
     );
 
+    const { isDarkMode, isOnline, keyDown, isModPressed, layoutReady } =
+      createEnvironmentHooks({ workspace: this.app.workspace });
+
     const {
       editContext,
       tasksWithTimeForToday,
-      dataviewLoaded,
-      isModPressed,
       newlyStartedTasks,
-      isOnline,
-      isDarkMode,
       dateRanges,
-      dataviewSyncTrigger,
       pointerDateTime,
       tasksWithActiveClockProps,
       getDisplayedTasksWithClocksForTimeline,
       visibleDays,
     } = createHooks({
-      app: this.app,
+      metadataCache: this.app.metadataCache,
       dataviewFacade: this.dataviewFacade,
       workspaceFacade: this.workspaceFacade,
       settingsStore: this.settingsStore,
       onUpdate,
       onEditAborted,
       currentTime,
-      dispatch: store.dispatch,
-      useSelector,
       dataviewChange: dataviewRefreshSignal,
+      remoteTasks,
+      listProps,
+      keyDown,
+      isOnline,
+      layoutReady,
     });
 
-    this.syncDataview = () => dataviewSyncTrigger.set({});
-
     this.registerDomEvent(window, "blur", editContext.cancelEdit);
     this.registerDomEvent(document, "pointerup", editContext.cancelEdit);
 
-    const handleEditorMenu = createEditorMenuCallback({
-      sTaskEditor: this.sTaskEditor,
-      plugin: this,
-    });
-
-    this.registerEvent(
-      // todo: move out
-      this.app.workspace.on("editor-menu", handleEditorMenu),
-    );
-
     this.register(
       editContext.cursor.subscribe(({ bodyCursor }) => {
         document.body.style.cursor = bodyCursor;
@@ -585,21 +583,6 @@ export default class DayPlanner extends Plugin {
       }, icalRefreshIntervalMillis),
     );
 
-    this.registerDomEvent(window, "online", () => {
-      store.dispatch(networkStatusChanged({ isOnline: true }));
-    });
-    this.registerDomEvent(window, "offline", () => {
-      store.dispatch(networkStatusChanged({ isOnline: false }));
-    });
-    this.registerEvent(
-      this.app.workspace.on("css-change", () => {
-        store.dispatch(darkModeUpdated(document.body.hasClass("theme-dark")));
-      }),
-    );
-    this.registerDomEvent(document, "keydown", () => {
-      store.dispatch(keyDownAction());
-    });
-
     this.registerEvent(
       this.app.metadataCache.on(
         // @ts-expect-error

src/redux/dataview/dataview-slice.ts

@@ -4,7 +4,7 @@ import type { STask } from "obsidian-dataview";
 import { createAppSlice } from "../create-app-slice";
 
 type LineToListProps = Record<number, unknown>;
-type PathToListProps = Record<string, LineToListProps>;
+export type PathToListProps = Record<string, LineToListProps>;
 
 interface DataviewSliceState {
   dataviewTasks: Array<STask>;
@@ -51,11 +51,14 @@ export const dataviewSlice = createAppSlice({
   selectors: {
     selectDataviewTasks: (state) => state.dataviewTasks,
     selectListProps: (state) => state.listProps,
+    selectDataviewLoaded: (state) => state.dataviewLoaded,
   },
 });
 
 export const { dataviewChange, dataviewTasksUpdated, listPropsParsed } =
   dataviewSlice.actions;
-export const { selectDataviewTasks, selectListProps } = dataviewSlice.selectors;
+
+export const { selectDataviewTasks, selectListProps, selectDataviewLoaded } =
+  dataviewSlice.selectors;
 
 export type DataviewChangeAction = ReturnType<typeof dataviewChange>;

src/redux/global-slice.ts

@@ -3,104 +3,40 @@ import {
   createSelector,
   type PayloadAction,
 } from "@reduxjs/toolkit";
-import ical from "node-ical";
 
 import { defaultDayFormat } from "../constants";
-import type { WithIcalConfig } from "../types";
 
 import { createAppSlice } from "./create-app-slice";
 
 interface ObsidianSliceState {
-  icalEvents: Array<WithIcalConfig<ical.VEvent>>;
-  dateRanges: Record<string, string[]>;
-  layoutReady: boolean;
-  isDarkMode: boolean;
-  modPressed: boolean;
-  isOnline: boolean;
   visibleDays: string[];
 }
 
 export const initialState: ObsidianSliceState = {
-  icalEvents: [],
-  dateRanges: {},
-  layoutReady: false,
-  isDarkMode: false,
-  modPressed: false,
-  isOnline: window.navigator.onLine,
-  // todo: remove after date ranges are migrated to Redux
   visibleDays: [],
 };
 
 export const globalSlice = createAppSlice({
   name: "obsidian",
   initialState,
   reducers: (create) => ({
-    icalEventsUpdated: create.reducer(
-      (
-        state,
-        action: PayloadAction<
-          WithIcalConfig<Array<WithIcalConfig<ical.VEvent>>>
-        >,
-      ) => {
-        state.icalEvents = action.payload;
-      },
-    ),
-    layoutReady: create.reducer((state) => {
-      state.layoutReady = true;
-    }),
-    darkModeUpdated: create.reducer((state, action: PayloadAction<boolean>) => {
-      state.isDarkMode = action.payload;
-    }),
-    modDown: create.reducer((state) => {
-      state.modPressed = true;
-    }),
-    modUp: create.reducer((state) => {
-      state.modPressed = false;
-    }),
-    networkStatusChanged: create.reducer(
-      (state, action: PayloadAction<{ isOnline: boolean }>) => {
-        const { isOnline } = action.payload;
-
-        state.isOnline = isOnline;
-      },
-    ),
-    dateRangeOpened: create.reducer(
-      (state, action: PayloadAction<{ id: string; range: string[] }>) => {
-        const { id, range } = action.payload;
-
-        state.dateRanges[id] = range;
-      },
-    ),
-    dateRangeClosed: create.reducer((state, action: PayloadAction<string>) => {
-      delete state.dateRanges[action.payload];
-    }),
     visibleDaysUpdated: create.reducer(
       (state, action: PayloadAction<string[]>) => {
         state.visibleDays = action.payload;
       },
     ),
+    editCanceled: () => {},
   }),
   selectors: {
-    selectIsOnline: (state) => state.isOnline,
     selectVisibleDays: (state) => state.visibleDays,
   },
 });
 
 export const keyDown = createAction("obsidian/keyDown");
 
-export const {
-  darkModeUpdated,
-  layoutReady,
-  modDown,
-  modUp,
-  networkStatusChanged,
-  icalEventsUpdated,
-  dateRangeClosed,
-  dateRangeOpened,
-  visibleDaysUpdated,
-} = globalSlice.actions;
+export const { visibleDaysUpdated, editCanceled } = globalSlice.actions;
 
-export const { selectVisibleDays, selectIsOnline } = globalSlice.selectors;
+export const { selectVisibleDays } = globalSlice.selectors;
 
 export const selectSortedDedupedVisibleDays = createSelector(
   selectVisibleDays,

src/ui/hooks/use-dataview-loaded.ts

@@ -4,13 +4,11 @@ import type { MetadataCache } from "obsidian";
 import { derived, type Readable, type Writable } from "svelte/store";
 
 import { addHorizontalPlacing } from "../../overlap/overlap";
-import { selectListProps } from "../../redux/dataview/dataview-slice";
-import { selectRemoteTasks } from "../../redux/ical/ical-slice";
-import type { createUseSelector } from "../../redux/use-selector";
+import { type PathToListProps } from "../../redux/dataview/dataview-slice";
 import { DataviewFacade } from "../../service/dataview-facade";
 import { WorkspaceFacade } from "../../service/workspace-facade";
 import type { DayPlannerSettings } from "../../settings";
-import type { LocalTask, Task, WithTime } from "../../task-types";
+import type { LocalTask, RemoteTask, Task, WithTime } from "../../task-types";
 import type { OnEditAbortedFn, OnUpdateFn, PointerDateTime } from "../../types";
 import { isValidLogEntry } from "../../util/clock";
 import * as dv from "../../util/dataview";
@@ -39,8 +37,9 @@ export function useTasks(props: {
   onUpdate: OnUpdateFn;
   onEditAborted: OnEditAbortedFn;
   pointerDateTime: Readable<PointerDateTime>;
-  useSelector: ReturnType<typeof createUseSelector>;
   dataviewChange: Readable<unknown>;
+  remoteTasks: Readable<RemoteTask[]>;
+  listProps: Readable<PathToListProps>;
 }) {
   const {
     settingsStore,
@@ -55,12 +54,10 @@ export function useTasks(props: {
     dataviewChange,
     onUpdate,
     onEditAborted,
-    useSelector,
+    remoteTasks,
+    listProps,
   } = props;
 
-  const remoteTasks = useSelector(selectRemoteTasks);
-  const listProps = useSelector(selectListProps);
-
   const visibleDailyNotes = useVisibleDailyNotes(
     layoutReady,
     debouncedTaskUpdateTrigger,