From 48abea03d8ea958c46cf4c22235cf7de9bd7336d Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 13 Dec 2022 15:45:52 -0500
Subject: [PATCH] Fix injection cycle (somehow)

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 ...rame-layout-child-component.injectable.tsx | 81 +++++++++++--------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/renderer/frames/cluster-frame/cluster-frame-layout-child-component.injectable.tsx b/src/renderer/frames/cluster-frame/cluster-frame-layout-child-component.injectable.tsx
index 3f1f5c4a03..0cd23d67c5 100644
--- a/src/renderer/frames/cluster-frame/cluster-frame-layout-child-component.injectable.tsx
+++ b/src/renderer/frames/cluster-frame/cluster-frame-layout-child-component.injectable.tsx
@@ -9,51 +9,62 @@ import { MainLayout } from "../../components/layout/main-layout";
 import { Sidebar } from "../../components/layout/sidebar";
 import { Dock } from "../../components/dock";
 import styles from "./cluster-frame.module.css";
+import type { IComputedValue } from "mobx";
 import { computed } from "mobx";
 import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
 import { Redirect } from "react-router";
 import startUrlInjectable from "./start-url.injectable";
 import currentPathInjectable from "../../routes/current-path.injectable";
 import { observer } from "mobx-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+
+interface Dependencies {
+  currentRouteComponent: IComputedValue<React.ElementType<any> | undefined>;
+  startUrl: IComputedValue<string>;
+  currentPath: IComputedValue<string>;
+}
+
+const NonInjectedClusterFrameLayout = observer((props: Dependencies) => {
+  const Component = props.currentRouteComponent.get();
+  const starting = props.startUrl.get();
+  const current = props.currentPath.get();
+
+  return (
+    <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
+      {Component ? (
+        <Component />
+      ) : // NOTE: this check is to prevent an infinite loop
+        starting !== current ? (
+          <Redirect to={starting} />
+        ) : (
+          <div className={styles.centering}>
+            <div className="error">
+              An error has occured. No route can be found matching the
+              current route, which is also the starting route.
+            </div>
+          </div>
+        )}
+    </MainLayout>
+  );
+});
+
+const ClusterFrameLayout = withInjectables<Dependencies>(NonInjectedClusterFrameLayout, {
+  getProps: (di, props) => ({
+    ...props,
+    currentRouteComponent: di.inject(currentRouteComponentInjectable),
+    startUrl: di.inject(startUrlInjectable),
+    currentPath: di.inject(currentPathInjectable),
+  }),
+});
 
 const clusterFrameLayoutChildComponentInjectable = getInjectable({
   id: "cluster-frame-layout-child-component",
 
-  instantiate: (di) => {
-    const currentRouteComponent = di.inject(currentRouteComponentInjectable);
-    const startUrl = di.inject(startUrlInjectable);
-    const currentPath = di.inject(currentPathInjectable);
-
-    return {
-      id: "cluster-frame-layout",
-
-      shouldRender: computed(() => true),
-
-      Component: observer(() => {
-        const Component = currentRouteComponent.get();
-        const starting = startUrl.get();
-        const current = currentPath.get();
-
-        return (
-          <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
-            {Component ? (
-              <Component />
-            ) : // NOTE: this check is to prevent an infinite loop
-              starting !== current ? (
-                <Redirect to={startUrl.get()} />
-              ) : (
-                <div className={styles.centering}>
-                  <div className="error">
-                    An error has occured. No route can be found matching the
-                    current route, which is also the starting route.
-                  </div>
-                </div>
-              )}
-          </MainLayout>
-        );
-      }),
-    };
-  },
+  instantiate: () => ({
+    id: "cluster-frame-layout",
+    shouldRender: computed(() => true),
+    Component: ClusterFrameLayout,
+  }),
 
   injectionToken: clusterFrameChildComponentInjectionToken,
 });