From 613e98cd2fb4cbd5c82a1a40e9ca49ef7e2a49fe Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 27 May 2022 14:01:48 +0300
Subject: [PATCH] Fix withInjectables props

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/update-button/update-button.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/update-button/update-button.tsx b/src/renderer/components/update-button/update-button.tsx
index 600efaa04e..10674d83ae 100644
--- a/src/renderer/components/update-button/update-button.tsx
+++ b/src/renderer/components/update-button/update-button.tsx
@@ -12,17 +12,19 @@ import { cssNames } from "../../utils";
 import type { IconProps } from "../icon";
 import { Icon } from "../icon";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import appUpdateWarningInjectable from "../../app-update-warning/app-update-warning.injectable";
+import { observer } from "mobx-react";
+import appUpdateWarningLevelInjectable from "../../app-update-warning/app-update-warning-level.injectable";
+import type { IComputedValue } from "mobx";
 
 interface UpdateButtonProps extends HTMLAttributes<HTMLButtonElement> {
   update: () => void;
 }
 
 interface Dependencies {
-  warningLevel?: "light" | "medium" | "high" | "";
+  warningLevel?: IComputedValue<"light" | "medium" | "high" | "">;
 }
 
-export function NonInjectedUpdateButton({ warningLevel, update, id }: UpdateButtonProps & Dependencies) {
+export const NonInjectedUpdateButton = observer(({ warningLevel, update, id }: UpdateButtonProps & Dependencies) => {
   const buttonId = id ?? "update-lens-button";
   const menuIconProps: IconProps = { material: "update", small: true };
   const [opened, setOpened] = useState(false);
@@ -42,8 +44,8 @@ export function NonInjectedUpdateButton({ warningLevel, update, id }: UpdateButt
         data-warning-level={warningLevel}
         id={buttonId}
         className={cssNames(styles.updateButton, {
-          [styles.warningHigh]: warningLevel === "high",
-          [styles.warningMedium]: warningLevel === "medium",
+          [styles.warningHigh]: warningLevel.get() === "high",
+          [styles.warningMedium]: warningLevel.get() === "medium",
         })}
       >
         Update
@@ -66,15 +68,13 @@ export function NonInjectedUpdateButton({ warningLevel, update, id }: UpdateButt
       </Menu>
     </>
   );
-}
+});
 
 export const UpdateButton = withInjectables<Dependencies, UpdateButtonProps>(NonInjectedUpdateButton, {
   getProps: (di, props) => {
-    const store = di.inject(appUpdateWarningInjectable);
-
     return {
       ...props,
-      warningLevel: store.warningLevel,
+      warningLevel: di.inject(appUpdateWarningLevelInjectable),
     };
   },
 });