Fixes loadout menu crashes (#1092)

* Fixes loadout menu * Refactor this a bit * Whoops * Update modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm --------- Co-authored-by: Bloop <[email protected]> Co-authored-by: GoldenAlpharex <[email protected]>
Fluffy-Frontier · Dec 12, 2023 · 43349f0 · 43349f0
1 parent 947092b
commit 43349f0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm b/modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm
@@ -290,7 +290,7 @@
 	data["user_is_donator"] = !!(GLOB.donator_list[owner.ckey] || is_admin(owner))
 	data["mob_name"] = owner.prefs.read_preference(/datum/preference/name/real_name)
 	data["ismoth"] = istype(owner.prefs.read_preference(/datum/preference/choiced/species), /datum/species/moth) // Moth's humanflaticcon isn't the same dimensions for some reason
-	data["preivew_options"] = list(PREVIEW_PREF_JOB, PREVIEW_PREF_LOADOUT, PREVIEW_PREF_NAKED)
+	data["preview_options"] = list(PREVIEW_PREF_JOB, PREVIEW_PREF_LOADOUT, PREVIEW_PREF_NAKED)
 	data["preview_selection"] = owner?.prefs.preview_pref
 
 	return data
@@ -362,7 +362,7 @@
 		formatted_item["name"] = item.name
 		formatted_item["path"] = item.item_path
 		formatted_item["is_greyscale"] = !!(initial(loadout_atom.greyscale_config) && initial(loadout_atom.greyscale_colors) && (initial(loadout_atom.flags_1) & IS_PLAYER_COLORABLE_1))
-		formatted_item["is_renamable"] = item.can_be_named
+		formatted_item["is_renameable"] = item.can_be_named
 		formatted_item["is_job_restricted"] = !isnull(item.restricted_roles)
 		formatted_item["is_job_blacklisted"] = !isnull(item.blacklisted_roles)
 		formatted_item["is_species_restricted"] = !isnull(item.restricted_species)

diff --git a/...ckages/tgui/interfaces/LoadoutManager.jsx → ...ckages/tgui/interfaces/LoadoutManager.tsx b/...ckages/tgui/interfaces/LoadoutManager.jsx → ...ckages/tgui/interfaces/LoadoutManager.tsx
@@ -1,14 +1,40 @@
 // THIS IS A SKYRAT UI FILE
 import { useBackend, useSharedState } from '../backend';
 import { Box, Button, Section, Stack, Dropdown } from '../components';
+import { BooleanLike } from 'common/react';
 import { Window } from '../layouts';
 
+type LoadoutTabData = {
+  loadout_tabs: LoadoutTab[];
+  selected_loadout: string[];
+  user_is_donator: BooleanLike;
+};
+
+type LoadoutTab = {
+  name: string;
+  title: string;
+  contents: LoadoutTabItem[];
+};
+
+type LoadoutTabItem = {
+  name: string;
+  path: string;
+  is_greyscale: BooleanLike;
+  is_renameable: BooleanLike;
+  is_job_restricted: BooleanLike;
+  is_job_blacklisted: BooleanLike;
+  is_species_restricted: BooleanLike;
+  is_donator_only: BooleanLike;
+  is_ckey_whitelisted: BooleanLike;
+  tooltip_text: string;
+};
+
 export const LoadoutManager = (props) => {
-  const { act, data } = useBackend();
+  const { act, data } = useBackend<LoadoutTabData>();
   const { selected_loadout, loadout_tabs, user_is_donator } = data;
 
   const [selectedTabName, setSelectedTab] = useSharedState(
-    'tabs',
+    'selectedTab',
     loadout_tabs[0]?.name,
   );
   const selectedTab = loadout_tabs.find((curTab) => {
@@ -42,12 +68,8 @@ export const LoadoutManager = (props) => {
               <Dropdown
                 width="100%"
                 selected={selectedTabName}
-                displayText={selectedTabName}
-                options={loadout_tabs.map((curTab) => ({
-                  value: curTab,
-                  displayText: curTab.name,
-                }))}
-                onSelected={(curTab) => setSelectedTab(curTab.name)}
+                options={loadout_tabs.map((curTab) => curTab.name)}
+                onSelected={(curTab) => setSelectedTab(curTab)}
               />
             </Section>
           </Stack.Item>
@@ -90,7 +112,7 @@ export const LoadoutManager = (props) => {
                                 />
                               </Stack.Item>
                             )}
-                            {!!item.is_renamable && (
+                            {!!item.is_renameable && (
                               <Stack.Item>
                                 <Button
                                   icon="pen"