Fixes APC and makes sleeper work again

code/modules/power/apc.dm

@@ -854,7 +854,7 @@
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 
 	if(!ui)
-		ui = new(user, src, ui_key, "Apc", name, 450, 460, master_ui, state)
+		ui = new(user, src, ui_key, "Apc", name, 480, 460, master_ui, state)
 		ui.open()
 
 /obj/machinery/power/apc/ui_data(mob/user)

tgui/packages/tgui/interfaces/Apc.js

@@ -1,50 +1,63 @@
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import { Window } from '../layouts';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
-export const Apc = props => {
+export const Apc = (props, context) => {
-  const { act, data } = useBackend(props);
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <ApcContent />
+      </Window.Content>
+    </Window>
+  );
+};
+
+const powerStatusMap = {
+  2: {
+    color: 'good',
+    externalPowerText: 'External Power',
+    chargingText: 'Fully Charged',
+  },
+  1: {
+    color: 'average',
+    externalPowerText: 'Low External Power',
+    chargingText: 'Charging',
+  },
+  0: {
+    color: 'bad',
+    externalPowerText: 'No External Power',
+    chargingText: 'Not Charging',
+  },
+};
+
+const malfMap = {
+  1: {
+    icon: 'terminal',
+    content: 'Override Programming',
+    action: 'hack',
+  },
+  2: {
+    icon: 'caret-square-down',
+    content: 'Shunt Core Process',
+    action: 'occupy',
+  },
+  3: {
+    icon: 'caret-square-left',
+    content: 'Return to Main Core',
+    action: 'deoccupy',
+  },
+  4: {
+    icon: 'caret-square-down',
+    content: 'Shunt Core Process',
+    action: 'occupy',
+  },
+};
+
+const ApcContent = (props, context) => {
+  const { act, data } = useBackend(context);
   const locked = data.locked && !data.siliconUser;
-  const powerStatusMap = {
-    2: {
-      color: 'good',
-      externalPowerText: 'External Power',
-      chargingText: 'Fully Charged',
-    },
-    1: {
-      color: 'average',
-      externalPowerText: 'Low External Power',
-      chargingText: 'Charging',
-    },
-    0: {
-      color: 'bad',
-      externalPowerText: 'No External Power',
-      chargingText: 'Not Charging',
-    },
-  };
-  const malfMap = {
-    1: {
-      icon: 'terminal',
-      content: 'Override Programming',
-      action: 'hack',
-    },
-    2: {
-      icon: 'caret-square-down',
-      content: 'Shunt Core Process',
-      action: 'occupy',
-    },
-    3: {
-      icon: 'caret-square-left',
-      content: 'Return to Main Core',
-      action: 'deoccupy',
-    },
-    4: {
-      icon: 'caret-square-down',
-      content: 'Shunt Core Process',
-      action: 'occupy',
-    },
-  };
   const externalPowerStatus = powerStatusMap[data.externalPower]
     || powerStatusMap[0];
   const chargingStatus = powerStatusMap[data.chargingStatus]
@@ -52,7 +65,6 @@ export const Apc = props => {
   const channelArray = data.powerChannels || [];
   const malfStatus = malfMap[data.malfStatus] || malfMap[0];
   const adjustedCellChange = data.powerCellStatus / 100;
-
   if (data.failTime > 0) {
     return (
       <NoticeBox>
@@ -73,10 +85,7 @@ export const Apc = props => {
 
   return (
     <Fragment>
-      <InterfaceLockNoticeBox
+      <InterfaceLockNoticeBox />
-        siliconUser={data.siliconUser}
-        locked={data.locked}
-        onLockStatusChange={() => act('lock')} />
       <Section title="Power Status">
         <LabeledList>
           <LabeledList.Item

tgui/packages/tgui/interfaces/Sleeper.js

@@ -1,13 +1,15 @@
 import { useBackend } from '../backend';
 import { Box, Section, LabeledList, Button, ProgressBar, AnimatedNumber } from '../components';
+import { Fragment } from 'inferno';
 import { Window } from '../layouts';
 
-export const Sleeper = props => {
+export const Sleeper = (props, context) => {
-  const { act, data } = useBackend(props);
+  const { act, data } = useBackend(context);
+
   const {
-    occupied,
     open,
-    occupant = [],
+    occupant = {},
+    occupied,
   } = data;
 
   const preSortChems = data.chems || [];
@@ -69,7 +71,7 @@ export const Sleeper = props => {
             </Box>
           )}>
           {!!occupied && (
-            <Window>
+            <Fragment>
               <ProgressBar
                 value={occupant.health}
                 minValue={occupant.minHealth}
@@ -112,7 +114,7 @@ export const Sleeper = props => {
                   {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
                 </LabeledList.Item>
               </LabeledList>
-            </Window>
+            </Fragment>
           )}
         </Section>
         <Section title="Chemical Analysis">
@@ -178,6 +180,5 @@ export const Sleeper = props => {
         </Section>
       </Window.Content>
     </Window>
-
   );
 };