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/table/table-model/table-model.injectable.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import createStorageInjectable from "../../../utils/create-storage/create-storage.injectable";
+import { TableModel, TableStorageModel } from "./table-model";
+
+const tableModelInjectable = getInjectable({
+  instantiate: (di) => {
+    const createStorage = di.inject(createStorageInjectable);
+
+    const storage = createStorage<TableStorageModel>("table_settings", {
+      sortParams: {},
+    });
+
+    return new TableModel({
+      storage,
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default tableModelInjectable;

src/renderer/components/table/table-model/table-model.ts

@@ -18,26 +18,31 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
-import { createStorage } from "../../utils";
-import type { TableSortParams } from "./table";
+import type { StorageHelper } from "../../../utils";
+import type { TableSortParams } from "../table";
 
 export interface TableStorageModel {
   sortParams: {
     [tableId: string]: Partial<TableSortParams>;
-  }
+  };
 }
 
-export const tableStorage = createStorage<TableStorageModel>("table_settings", {
-  sortParams: {},
-});
-
-export function getSortParams(tableId: string): Partial<TableSortParams> {
-  return tableStorage.get().sortParams[tableId];
+interface Dependencies {
+  storage: StorageHelper<TableStorageModel>;
 }
 
-export function setSortParams(tableId: string, sortParams: Partial<TableSortParams>) {
-  tableStorage.merge(draft => {
-    draft.sortParams[tableId] = sortParams;
-  });
+export class TableModel {
+  constructor(private dependencies: Dependencies) {}
+
+  getSortParams = (tableId: string): Partial<TableSortParams> =>
+    this.dependencies.storage.get().sortParams[tableId];
+
+  setSortParams = (
+    tableId: string,
+    sortParams: Partial<TableSortParams>,
+  ): void => {
+    this.dependencies.storage.merge((draft) => {
+      draft.sortParams[tableId] = sortParams;
+    });
+  };
 }

src/renderer/components/table/table.tsx

@@ -29,9 +29,11 @@ import { TableHead, TableHeadElem, TableHeadProps } from "./table-head";
 import type { TableCellElem } from "./table-cell";
 import { VirtualList } from "../virtual-list";
 import { createPageParam } from "../../navigation";
-import { getSortParams, setSortParams } from "./table.storage";
 import { computed, makeObservable } from "mobx";
 import { getSorted } from "./sorting";
+import type { TableModel } from "./table-model/table-model";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import tableModelInjectable from "./table-model/table-model.injectable";
 
 export type TableSortBy = string;
 export type TableOrderBy = "asc" | "desc" | string;
@@ -90,8 +92,12 @@ export const orderByUrlParam = createPageParam({
   name: "order",
 });
 
+interface Dependencies {
+  model: TableModel
+}
+
 @observer
-export class Table<Item> extends React.Component<TableProps<Item>> {
+class NonInjectedTable<Item> extends React.Component<TableProps<Item> & Dependencies> {
   static defaultProps: TableProps<any> = {
     scrollable: true,
     autoSize: true,
@@ -101,7 +107,7 @@ export class Table<Item> extends React.Component<TableProps<Item>> {
     customRowHeights: (item, lineHeight, paddings) => lineHeight + paddings,
   };
 
-  constructor(props: TableProps<Item>) {
+  constructor(props: TableProps<Item> & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -121,7 +127,7 @@ export class Table<Item> extends React.Component<TableProps<Item>> {
   }
 
   @computed get sortParams() {
-    return Object.assign({}, this.props.sortByDefault, getSortParams(this.props.tableId));
+    return Object.assign({}, this.props.sortByDefault, this.props.model.getSortParams(this.props.tableId));
   }
 
   renderHead() {
@@ -167,7 +173,7 @@ export class Table<Item> extends React.Component<TableProps<Item>> {
   }
 
   protected onSort({ sortBy, orderBy }: TableSortParams) {
-    setSortParams(this.props.tableId, { sortBy, orderBy });
+    this.props.model.setSortParams(this.props.tableId, { sortBy, orderBy });
     const { sortSyncWithUrl, onSort } = this.props;
 
     if (sortSyncWithUrl) {
@@ -255,3 +261,17 @@ export class Table<Item> extends React.Component<TableProps<Item>> {
     );
   }
 }
+
+export function Table<Item>(props: TableProps<Item>) {
+  return withInjectables<Dependencies, TableProps<Item>>(
+    NonInjectedTable,
+
+    {
+      getProps: (di, props) => ({
+        model: di.inject(tableModelInjectable),
+        ...props,
+      }),
+    },
+  )(props);
+}
+