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/+network-port-forwards/port-forward-menu.tsx

@@ -21,25 +21,34 @@
 
 import React from "react";
 import { boundMethod, cssNames } from "../../utils";
-import { openPortForward, PortForwardItem, removePortForward } from "../../port-forward";
+import { openPortForward, PortForwardItem } from "../../port-forward";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Icon } from "../icon";
-import { PortForwardDialog } from "../../port-forward";
 import { Notifications } from "../notifications";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import removePortForwardInjectable
+  from "../../port-forward/port-forward-store/remove-port-forward/remove-port-forward.injectable";
+import portForwardDialogModelInjectable
+  from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";
 
 interface Props extends MenuActionsProps {
   portForward: PortForwardItem;
   hideDetails?(): void;
 }
 
-export class PortForwardMenu extends React.Component<Props> {
+interface Dependencies {
+  removePortForward: (item: PortForwardItem) => Promise<void>,
+  openPortForwardDialog: (item: PortForwardItem) => void
+}
+
+class NonInjectedPortForwardMenu extends React.Component<Props & Dependencies> {
   @boundMethod
   remove() {
     const { portForward } = this.props;
 
     try {
-      removePortForward(portForward);
+      this.props.removePortForward(portForward);
     } catch (error) {
       Notifications.error(`Error occurred stopping the port-forward from port ${portForward.forwardPort}. The port-forward may still be active.`);
     }
@@ -56,7 +65,7 @@ export class PortForwardMenu extends React.Component<Props> {
           <Icon material="open_in_browser" interactive={toolbar} tooltip="Open in browser" />
           <span className="title">Open</span>
         </MenuItem>
-        <MenuItem onClick={() => PortForwardDialog.open(portForward)}>
+        <MenuItem onClick={() => this.props.openPortForwardDialog(portForward)}>
           <Icon material="edit" tooltip="Change port or protocol" interactive={toolbar} />
           <span className="title">Edit</span>
         </MenuItem>
@@ -78,3 +87,15 @@ export class PortForwardMenu extends React.Component<Props> {
     );
   }
 }
+
+export const PortForwardMenu = withInjectables<Dependencies, Props>(
+  NonInjectedPortForwardMenu,
+
+  {
+    getProps: (di, props) => ({
+      removePortForward: di.inject(removePortForwardInjectable),
+      openPortForwardDialog: di.inject(portForwardDialogModelInjectable).open,
+      ...props,
+    }),
+  },
+);

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -25,11 +25,13 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { RouteComponentProps } from "react-router-dom";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
-import { PortForwardItem, portForwardStore } from "../../port-forward";
+import type { PortForwardItem, PortForwardStore } from "../../port-forward";
 import { PortForwardMenu } from "./port-forward-menu";
 import { PortForwardsRouteParams, portForwardsURL } from "../../../common/routes";
 import { PortForwardDetails } from "./port-forward-details";
 import { navigation } from "../../navigation";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 
 enum columnId {
   name = "name",
@@ -44,19 +46,23 @@ enum columnId {
 interface Props extends RouteComponentProps<PortForwardsRouteParams> {
 }
 
+interface Dependencies {
+  portForwardStore: PortForwardStore
+}
+
 @observer
-export class PortForwards extends React.Component<Props> {
+class NonInjectedPortForwards extends React.Component<Props & Dependencies> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      portForwardStore.watch(),
+      this.props.portForwardStore.watch(),
     ]);
   }
 
   get selectedPortForward() {
     const { match: { params: { forwardport }}} = this.props;
 
-    return portForwardStore.getById(forwardport);
+    return this.props.portForwardStore.getById(forwardport);
   }
 
   onDetails = (item: PortForwardItem) => {
@@ -96,7 +102,7 @@ export class PortForwards extends React.Component<Props> {
         <ItemListLayout
           isConfigurable
           tableId="port_forwards"
-          className="PortForwards" store={portForwardStore}
+          className="PortForwards" store={this.props.portForwardStore}
           sortingCallbacks={{
             [columnId.name]: item => item.getName(),
             [columnId.namespace]: item => item.getNs(),
@@ -150,3 +156,15 @@ export class PortForwards extends React.Component<Props> {
     );
   }
 }
+
+export const PortForwards = withInjectables<Dependencies, Props>(
+  NonInjectedPortForwards,
+
+  {
+    getProps: (di, props) => ({
+      portForwardStore: di.inject(portForwardStoreInjectable),
+      ...props,
+    }),
+  },
+);
+