Cascade different refactorings to eliminate global shared state from app paths

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -27,7 +27,17 @@ import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table";
-import { boundMethod, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils";
+import {
+  boundMethod,
+  cssNames,
+  IClassName,
+  isReactNode,
+  noop,
+  ObservableToggleSet,
+  prevDefault,
+  stopPropagation,
+  StorageHelper,
+} from "../../utils";
 import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
@@ -40,8 +50,11 @@ import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
 import { UserStore } from "../../../common/user-store";
-import { namespaceStore } from "../+namespaces/namespace.store";
-
+import type { NamespaceStore } from "../+namespaces/namespace-store/namespace.store";
+import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import itemListLayoutStorageInjectable
+  from "./item-list-layout-storage/item-list-layout-storage.injectable";
 
 
 export type SearchFilter<I extends ItemObject> = (item: I) => string | number | (string | number)[];
@@ -72,7 +85,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
   // header (title, filtering, searching, etc.)
   showHeader?: boolean;
   headerClassName?: IClassName;
-  renderHeaderTitle?: ReactNode | ((parent: ItemListLayout<I>) => ReactNode);
+  renderHeaderTitle?: ReactNode | ((parent: NonInjectedItemListLayout<I>) => ReactNode);
   customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
 
   // items list configuration
@@ -96,7 +109,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
 
   // other
   customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
-  renderFooter?: (parent: ItemListLayout<I>) => React.ReactNode;
+  renderFooter?: (parent: NonInjectedItemListLayout<I>) => React.ReactNode;
 
   /**
    * Message to display when a store failed to load
@@ -125,25 +138,26 @@ const defaultProps: Partial<ItemListLayoutProps<ItemObject>> = {
   failedToLoadMessage: "Failed to load items",
 };
 
+interface Dependencies {
+  namespaceStore: NamespaceStore;
+  itemListLayoutStorage: StorageHelper<{ showFilters: boolean }>;
+}
+
 @observer
-export class ItemListLayout<I extends ItemObject> extends React.Component<ItemListLayoutProps<I>> {
+class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<ItemListLayoutProps<I> & Dependencies> {
   static defaultProps = defaultProps as object;
 
-  private storage = createStorage("item_list_layout", {
-    showFilters: false, // setup defaults
-  });
-
-  constructor(props: ItemListLayoutProps<I>) {
+  constructor(props: ItemListLayoutProps<I> & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
   get showFilters(): boolean {
-    return this.storage.get().showFilters;
+    return this.props.itemListLayoutStorage.get().showFilters;
   }
 
   set showFilters(showFilters: boolean) {
-    this.storage.merge({ showFilters });
+    this.props.itemListLayoutStorage.merge({ showFilters });
   }
 
   async componentDidMount() {
@@ -166,7 +180,7 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
     const { store, dependentStores } = this.props;
     const stores = Array.from(new Set([store, ...dependentStores]));
 
-    stores.forEach(store => store.loadAll(namespaceStore.contextNamespaces));
+    stores.forEach(store => store.loadAll(this.props.namespaceStore.contextNamespaces));
   }
 
   private filterCallbacks: ItemsFilters<I> = {
@@ -528,3 +542,19 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
     );
   }
 }
+
+export function ItemListLayout<I extends ItemObject>(
+  props: ItemListLayoutProps<I>,
+) {
+  return withInjectables<Dependencies, ItemListLayoutProps<I>>(
+    NonInjectedItemListLayout,
+
+    {
+      getProps: (di, props) => ({
+        namespaceStore: di.inject(namespaceStoreInjectable),
+        itemListLayoutStorage: di.inject(itemListLayoutStorageInjectable),
+        ...props,
+      }),
+    },
+  )(props);
+}