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/drawer/drawer-storage/drawer-storage.injectable.ts

@@ -0,0 +1,38 @@
+/**
+ * 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";
+
+export const defaultDrawerWidth = 725;
+
+const drawerStorageInjectable = getInjectable({
+  instantiate: (di) => {
+    const createStorage = di.inject(createStorageInjectable);
+
+    return createStorage("drawer", {
+      width: defaultDrawerWidth,
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default drawerStorageInjectable;

src/renderer/components/drawer/drawer.tsx

@@ -24,11 +24,15 @@ import "./drawer.scss";
 import React from "react";
 import { clipboard } from "electron";
 import { createPortal } from "react-dom";
-import { createStorage, cssNames, noop } from "../../utils";
+import { cssNames, noop, StorageHelper } from "../../utils";
 import { Icon } from "../icon";
 import { Animate, AnimateName } from "../animate";
 import { history } from "../../navigation";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
+import drawerStorageInjectable, {
+  defaultDrawerWidth,
+} from "./drawer-storage/drawer-storage.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
 
 export type DrawerPosition = "top" | "left" | "right" | "bottom";
 
@@ -70,12 +74,11 @@ resizingAnchorProps.set("left", [ResizeDirection.HORIZONTAL, ResizeSide.TRAILING
 resizingAnchorProps.set("top", [ResizeDirection.VERTICAL, ResizeSide.TRAILING, ResizeGrowthDirection.TOP_TO_BOTTOM]);
 resizingAnchorProps.set("bottom", [ResizeDirection.VERTICAL, ResizeSide.LEADING, ResizeGrowthDirection.BOTTOM_TO_TOP]);
 
-const defaultDrawerWidth = 725;
-const drawerStorage = createStorage("drawer", {
-  width: defaultDrawerWidth,
-});
+interface Dependencies {
+  drawerStorage: StorageHelper<{ width: number }>;
+}
 
-export class Drawer extends React.Component<DrawerProps, State> {
+class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, State> {
   static defaultProps = defaultProps as object;
 
   private mouseDownTarget: HTMLElement;
@@ -89,7 +92,7 @@ export class Drawer extends React.Component<DrawerProps, State> {
 
   public state = {
     isCopied: false,
-    width: drawerStorage.get().width,
+    width: this.props.drawerStorage.get().width,
   };
 
   componentDidMount() {
@@ -110,7 +113,7 @@ export class Drawer extends React.Component<DrawerProps, State> {
 
   resizeWidth = (width: number) => {
     this.setState({ width });
-    drawerStorage.merge({ width });
+    this.props.drawerStorage.merge({ width });
   };
 
   fixUpTripleClick = (ev: MouseEvent) => {
@@ -239,3 +242,15 @@ export class Drawer extends React.Component<DrawerProps, State> {
     return usePortal ? createPortal(drawer, document.body) : drawer;
   }
 }
+
+export const Drawer = withInjectables<Dependencies, DrawerProps>(
+  NonInjectedDrawer,
+
+  {
+    getProps: (di, props) => ({
+      drawerStorage: di.inject(drawerStorageInjectable),
+      ...props,
+    }),
+  },
+);
+