mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix injection cycle (somehow)
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
parent
4a0b04df61
commit
48abea03d8
@ -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,
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user