update

tgui/docs/tutorial-and-examples.md

@@ -127,8 +127,8 @@ import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
 
-export const SampleInterface = (props, context) => {
-  const { act, data } = useBackend(context);
+export const SampleInterface = (props) => {
+  const { act, data } = useBackend<any>();
   // Extract `health` and `color` variables from the `data` object.
   const {
     health,
@@ -158,7 +158,7 @@ export const SampleInterface = (props, context) => {
 };
 ```
 
-Here are the key variables you get from a `useBackend(context)` function:
+Here are the key variables you get from a `useBackend<any>()` function:
 
 - `config` is part of core tgui. It contains meta-information about the
 interface and who uses it, BYOND refs to various objects, and so forth.
@@ -259,7 +259,7 @@ import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
 
-export const SampleInterface = (props, context) => {
+export const SampleInterface = (props) => {
   return (
     <Window resizable>
       <Window.Content scrollable>
@@ -269,8 +269,8 @@ export const SampleInterface = (props, context) => {
   );
 };
 
-const HealthStatus = (props, context) => {
-  const { act, data } = useBackend(context);
+const HealthStatus = (props) => {
+  const { act, data } = useBackend<any>();
   const {
     user,
   } = props;
@@ -330,8 +330,8 @@ import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
 
-export const SampleInterface = (props, context) => {
-  const { act, data } = useBackend(context);
+export const SampleInterface = (props) => {
+  const { act, data } = useBackend<any>();
   // Extract `health` and `color` variables from the `data` object.
   const {
     health,

tgui/packages/tgui/interfaces/AIAnnouncement.tsx

@@ -14,12 +14,12 @@ export const AIAnnouncement = (props) => {
   const [
     current_page,
     set_page,
-  ] = useLocalState(context, 'current_page', 0);
+  ] = useLocalState( 'current_page', 0);
 
   const [
     announcement_input,
     set_announcement_input,
-  ] = useLocalState(context, 'announcement_input', last_announcement);
+  ] = useLocalState( 'announcement_input', last_announcement);
 
   // I love `Object`s!!
   const words_filtered = Object.keys(vox_types[Object.keys(vox_types)[current_page]]);

tgui/packages/tgui/interfaces/Achievements.tsx

@@ -8,7 +8,7 @@ export const Achievements = (props) => {
   const [
     selectedCategory,
     setSelectedCategory,
-  ] = useLocalState(context, 'category', categories[0]);
+  ] = useLocalState( 'category', categories[0]);
   const achievements = data.achievements
     .filter(x => x.category === selectedCategory);
   return (
@@ -95,7 +95,7 @@ const HighScoreTable = (props) => {
   const [
     highScoreIndex,
     setHighScoreIndex,
-  ] = useLocalState(context, 'highscore', 0);
+  ] = useLocalState( 'highscore', 0);
   const highscore = highscores[highScoreIndex];
   if (!highscore) {
     return null;

tgui/packages/tgui/interfaces/AdventureBrowser.tsx

@@ -62,7 +62,7 @@ const AdventureList = (props) => {
   const [
     openAdventure,
     setOpenAdventure,
-  ] = useLocalState(context, 'openAdventure', null);
+  ] = useLocalState( 'openAdventure', null);
 
   return (
     <>

tgui/packages/tgui/interfaces/AirAlarm.tsx

@@ -115,7 +115,7 @@ const AIR_ALARM_ROUTES = {
 };
 
 const AirAlarmControl = (props) => {
-  const [screen, setScreen] = useLocalState(context, 'screen');
+  const [screen, setScreen] = useLocalState( 'screen');
   const route = AIR_ALARM_ROUTES[screen] || AIR_ALARM_ROUTES.home;
   const Component = route.component();
   return (
@@ -138,7 +138,7 @@ const AirAlarmControl = (props) => {
 
 const AirAlarmControlHome = (props) => {
   const { act, data } = useBackend<any>();
-  const [screen, setScreen] = useLocalState(context, 'screen');
+  const [screen, setScreen] = useLocalState( 'screen');
   const {
     mode,
     atmos_alarm,

tgui/packages/tgui/interfaces/AnnouncementHelp.tsx

@@ -13,12 +13,12 @@ export const AnnouncementHelp = (props) => {
   const [
     current_page,
     set_page,
-  ] = useLocalState(context, 'current_page', 0);
+  ] = useLocalState( 'current_page', 0);
 
   const [
     search_text,
     set_search_text,
-  ] = useLocalState(context, 'search_text', '');
+  ] = useLocalState( 'search_text', '');
 
   // I love `Object`s!!
   const words_filtered = prepare_search(Object.keys(vox_types[Object.keys(vox_types)[current_page]]), search_text);

tgui/packages/tgui/interfaces/ApcControl.tsx

@@ -44,7 +44,7 @@ const ApcLoggedIn = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'tab-index', 1);
+  ] = useLocalState( 'tab-index', 1);
   return (
     <>
       <Tabs>
@@ -101,7 +101,7 @@ const ControlPanel = (props) => {
   const [
     sortByField,
     setSortByField,
-  ] = useLocalState(context, 'sortByField', null);
+  ] = useLocalState( 'sortByField', null);
   return (
     <Flex>
       <Flex.Item>
@@ -153,7 +153,7 @@ const ApcControlScene = (props) => {
 
   const [
     sortByField,
-  ] = useLocalState(context, 'sortByField', null);
+  ] = useLocalState( 'sortByField', null);
 
   const apcs = flow([
     map((apc, i) => ({

tgui/packages/tgui/interfaces/Autolathe.tsx

@@ -17,7 +17,7 @@ export const Autolathe = (props) => {
   const [
     current_category,
     setCategory,
-  ] = useLocalState(context, 'current_category', "None");
+  ] = useLocalState( 'current_category', "None");
   const filteredmaterials = materials.filter(material =>
     material.mineral_amount > 0);
   return (

tgui/packages/tgui/interfaces/Biogenerator.tsx

@@ -45,11 +45,11 @@ export const BiogeneratorContent = (props) => {
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  ] = useLocalState( 'searchText', '');
   const [
     selectedCategory,
     setSelectedCategory,
-  ] = useLocalState(context, 'category', categories[0]?.name);
+  ] = useLocalState( 'category', categories[0]?.name);
   const testSearch = createSearch(searchText, item => {
     return item.name;
   });
@@ -132,14 +132,14 @@ const ItemList = (props) => {
   const [
     hoveredItem,
     setHoveredItem,
-  ] = useLocalState(context, 'hoveredItem', {});
+  ] = useLocalState( 'hoveredItem', {});
   const hoveredCost = hoveredItem.cost || 0;
   // Append extra hover data to items
   const items = props.items.map(item => {
     const [
       amount,
       setAmount,
-    ] = useLocalState(context, "amount" + item.name, 1);
+    ] = useLocalState( "amount" + item.name, 1);
     const notSameItem = hoveredItem.name !== item.name;
     const notEnoughHovered = props.biomass - hoveredCost
       * hoveredItem.amount < item.cost * amount;

tgui/packages/tgui/interfaces/CameraConsole.tsx

@@ -94,7 +94,7 @@ export const CameraConsoleContent = (props) => {
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  ] = useLocalState( 'searchText', '');
   const { activeCamera } = data;
   const cameras = selectCameras(data.cameras, searchText);
   return (

tgui/packages/tgui/interfaces/CentcomPodLauncher.tsx

@@ -13,7 +13,7 @@ const pod_grey = {
 };
 
 const useCompact = context => {
-  const [compact, setCompact] = useLocalState(context, 'compact', false);
+  const [compact, setCompact] = useLocalState( 'compact', false);
   const toggleCompact = () => setCompact(!compact);
   return [compact, toggleCompact];
 };
@@ -415,7 +415,7 @@ const ViewTabHolder = (props) => {
   const [
     tabPageIndex,
     setTabPageIndex,
-  ] = useLocalState(context, 'tabPageIndex', 1);
+  ] = useLocalState( 'tabPageIndex', 1);
   const { mapRef } = data;
   const TabPageComponent = TABPAGES[tabPageIndex].component();
   return (
@@ -655,7 +655,7 @@ const ReverseMenu = (props) => {
   const [
     tabPageIndex,
     setTabPageIndex,
-  ] = useLocalState(context, 'tabPageIndex', 1);
+  ] = useLocalState( 'tabPageIndex', 1);
   return (
     <Section
       fill

tgui/packages/tgui/interfaces/ChemFilter.tsx

@@ -48,8 +48,8 @@ export const ChemFilter = (props) => {
     left = [],
     right = [],
   } = data;
-  const [leftName, setLeftName] = useLocalState(context, 'leftName', '');
-  const [rightName, setRightName] = useLocalState(context, 'rightName', '');
+  const [leftName, setLeftName] = useLocalState( 'leftName', '');
+  const [rightName, setRightName] = useLocalState( 'rightName', '');
   return (
     <Window
       width={500}

tgui/packages/tgui/interfaces/ChemReactionChamber.tsx

@@ -9,11 +9,11 @@ export const ChemReactionChamber = (props) => {
   const [
     reagentName,
     setReagentName,
-  ] = useLocalState(context, 'reagentName', '');
+  ] = useLocalState( 'reagentName', '');
   const [
     reagentQuantity,
     setReagentQuantity,
-  ] = useLocalState(context, 'reagentQuantity', 1);
+  ] = useLocalState( 'reagentQuantity', 1);
   const emptying = data.emptying;
   const reagents = data.reagents || [];
   return (

tgui/packages/tgui/interfaces/ClockworkSlab.tsx

@@ -41,7 +41,7 @@ export const ClockworkSlab = (props) => {
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  ] = useLocalState( 'searchText', '');
 
   const testSearch = createSearch(searchText, script => {
     return script.name + script.descname;

tgui/packages/tgui/interfaces/CommunicationsConsole.tsx

@@ -48,7 +48,7 @@ const MessageModal = (props) => {
   const { data } = useBackend<any>();
   const { maxMessageLength } = data;
 
-  const [input, setInput] = useLocalState(context, props.label, "");
+  const [input, setInput] = useLocalState( props.label, "");
 
   const longEnough = props.minLength === undefined
     || input.length >= props.minLength;
@@ -200,8 +200,8 @@ const PageChangingStatus = (props) => {
   const { act, data } = useBackend<any>();
   const { maxStatusLineLength } = data;
 
-  const [lineOne, setLineOne] = useLocalState(context, "lineOne", data.lineOne);
-  const [lineTwo, setLineTwo] = useLocalState(context, "lineTwo", data.lineTwo);
+  const [lineOne, setLineOne] = useLocalState( "lineOne", data.lineOne);
+  const [lineTwo, setLineTwo] = useLocalState( "lineTwo", data.lineTwo);
 
   return (
     <Box>
@@ -332,7 +332,7 @@ const PageMain = (props) => {
   const [
     [showAlertLevelConfirm, confirmingAlertLevelTick],
     setShowAlertLevelConfirm,
-  ] = useLocalState(context, "showConfirmPrompt", [null, null]);
+  ] = useLocalState( "showConfirmPrompt", [null, null]);
 
   return (
     <Box>

tgui/packages/tgui/interfaces/ComponentPrinter.tsx

@@ -69,8 +69,8 @@ const MaterialCost = (props: {
 export const ComponentPrinter = (props) => {
   const { act, data } = useBackend<ComponentPrinterData>(context);
 
-  const [currentCategory, setCurrentCategory] = useLocalState(context, "category", CATEGORY_ALL);
-  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
+  const [currentCategory, setCurrentCategory] = useLocalState( "category", CATEGORY_ALL);
+  const [searchText, setSearchText] = useLocalState( "searchText", "");
 
   return (
     <Window title="Component Printer" width={900} height={700}>

tgui/packages/tgui/interfaces/ExodroneConsole.tsx

@@ -119,7 +119,7 @@ export const ExodroneConsole = (props) => {
   const [
     choosingTools,
     setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  ] = useLocalState( 'choosingTools', false);
 
   return (
     <Window width={650} height={500}>
@@ -222,7 +222,7 @@ const ToolSelectionModal = (props) => {
   const [
     choosingTools,
     setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  ] = useLocalState( 'choosingTools', false);
 
   const toolData = Object.keys(all_tools);
   return (
@@ -358,7 +358,7 @@ const EquipmentGrid = (props) => {
   const [
     choosingTools,
     setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  ] = useLocalState( 'choosingTools', false);
   return (
     <Stack vertical fill>
       <Stack.Item grow>
@@ -484,11 +484,11 @@ const TravelTargetSelectionScreen = (props) => {
   const [
     choosingTools,
     setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  ] = useLocalState( 'choosingTools', false);
   const [
     TravelDimmerShown,
     setTravelDimmerShown,
-  ] = useLocalState(context, 'TravelDimmerShown', false);
+  ] = useLocalState( 'TravelDimmerShown', false);
 
   const travel_to = ref => {
     setTravelDimmerShown(false);
@@ -644,7 +644,7 @@ const ExplorationScreen = (props) => {
   const [
     TravelDimmerShown,
     setTravelDimmerShown,
-  ] = useLocalState(context, 'TravelDimmerShown', false);
+  ] = useLocalState( 'TravelDimmerShown', false);
 
   if (TravelDimmerShown) {
     return (<TravelTargetSelectionScreen showCancelButton />);

tgui/packages/tgui/interfaces/Filteriffic.tsx

@@ -27,7 +27,7 @@ const FilterIntegerEntry = (props) => {
 const FilterFloatEntry = (props) => {
   const { value, name, filterName } = props;
   const { act } = useBackend<any>();
-  const [step, setStep] = useLocalState(context, `${filterName}-${name}`, 0.01);
+  const [step, setStep] = useLocalState( `${filterName}-${name}`, 0.01);
   return (
     <>
       <NumberInput
@@ -243,8 +243,8 @@ export const Filteriffic = (props) => {
   const filters = data.target_filter_data || {};
   const hasFilters = filters !== {};
   const filterDefaults = data["filter_info"];
-  const [massApplyPath, setMassApplyPath] = useLocalState(context, 'massApplyPath', '');
-  const [hiddenSecret, setHiddenSecret] = useLocalState(context, 'hidden', false);
+  const [massApplyPath, setMassApplyPath] = useLocalState( 'massApplyPath', '');
+  const [hiddenSecret, setHiddenSecret] = useLocalState( 'hidden', false);
   return (
     <Window
       title="Filteriffic"

tgui/packages/tgui/interfaces/FishCatalog.tsx

@@ -18,7 +18,7 @@ export const FishCatalog = (props) => {
   const [
     currentFish,
     setCurrentFish,
-  ] = useLocalState(context, 'currentFish', null);
+  ] = useLocalState( 'currentFish', null);
   return (
     <Window
       width={500}

tgui/packages/tgui/interfaces/ForceEvent.tsx

@@ -84,7 +84,7 @@ export const PanelOptions = (props) => {
     ''
   );
 
-  const [announce, setAnnounce] = useLocalState(context, 'announce', true);
+  const [announce, setAnnounce] = useLocalState( 'announce', true);
 
   return (
     <Stack width="240px">
@@ -116,9 +116,9 @@ export const EventSection = (props) => {
   const { data, act } = useBackend<ForceEventData>(context);
   const { categories, events } = data;
 
-  const [category] = useLocalState(context, 'category', categories[0]);
-  const [searchQuery] = useLocalState(context, 'searchQuery', '');
-  const [announce] = useLocalState(context, 'announce', true);
+  const [category] = useLocalState( 'category', categories[0]);
+  const [searchQuery] = useLocalState( 'searchQuery', '');
+  const [announce] = useLocalState( 'announce', true);
 
   const preparedEvents = paginateEvents(
     events.filter((event) => {

tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.tsx

@@ -20,8 +20,8 @@ export const VariableMenu = (props) => {
     ...rest
   } = props;
 
-  const [name, setName] = useLocalState(context, "variable_name", null);
-  const [type, setType] = useLocalState(context, "variable_type", types[1]);
+  const [name, setName] = useLocalState( "variable_name", null);
+  const [type, setType] = useLocalState( "variable_type", types[1]);
 
   return (
     <Section

tgui/packages/tgui/interfaces/NtosCard.tsx

@@ -19,7 +19,7 @@ export const NtosCard = (props) => {
 
 export const NtosCardContent = (props) => {
   const { act, data } = useBackend<any>();
-  const [tab, setTab] = useLocalState(context, 'tab', 1);
+  const [tab, setTab] = useLocalState( 'tab', 1);
   const {
     authenticated,
     regions = [],
@@ -35,7 +35,7 @@ export const NtosCardContent = (props) => {
   const [
     selectedDepartment,
     setSelectedDepartment,
-  ] = useLocalState(context, 'department', Object.keys(jobs)[0]);
+  ] = useLocalState( 'department', Object.keys(jobs)[0]);
   if (!have_id_slot) {
     return (
       <NoticeBox>

tgui/packages/tgui/interfaces/NtosNetDownloader.tsx

@@ -27,7 +27,7 @@ export const NtosNetDownloader = (props) => {
   const [
     selectedCategory,
     setSelectedCategory,
-  ] = useLocalState(context, 'category', all_categories[0]);
+  ] = useLocalState( 'category', all_categories[0]);
   const items = flow([
     // This filters the list to only contain programs with category
     selectedCategory !== all_categories[0]

tgui/packages/tgui/interfaces/NtosPortraitPrinter.tsx

@@ -5,8 +5,8 @@ import { NtosWindow } from '../layouts';
 
 export const NtosPortraitPrinter = (props) => {
   const { act, data } = useBackend<any>();
-  const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
-  const [listIndex, setListIndex] = useLocalState(context, 'listIndex', 0);
+  const [tabIndex, setTabIndex] = useLocalState( 'tabIndex', 0);
+  const [listIndex, setListIndex] = useLocalState( 'listIndex', 0);
   const {
     library,
     library_secure,

tgui/packages/tgui/interfaces/Orbit.tsx

@@ -102,7 +102,7 @@ export const Orbit = (props) => {
     npcs,
   } = data;
 
-  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
+  const [searchText, setSearchText] = useLocalState( "searchText", "");
 
   const collatedAntagonists = {};
   for (const antagonist of antagonists) {

tgui/packages/tgui/interfaces/OreRedemptionMachine.tsx

@@ -107,7 +107,7 @@ const MaterialRow = (props) => {
   const [
     amount,
     setAmount,
-  ] = useLocalState(context, "amount" + material.name, 1);
+  ] = useLocalState( "amount" + material.name, 1);
 
   const amountAvailable = Math.floor(material.amount);
   return (

tgui/packages/tgui/interfaces/PortraitPicker.tsx

@@ -5,8 +5,8 @@ import { Window } from '../layouts';
 
 export const PortraitPicker = (props) => {
   const { act, data } = useBackend<any>();
-  const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
-  const [listIndex, setListIndex] = useLocalState(context, 'listIndex', 0);
+  const [tabIndex, setTabIndex] = useLocalState( 'tabIndex', 0);
+  const [listIndex, setListIndex] = useLocalState( 'listIndex', 0);
   const {
     library,
     library_secure,

tgui/packages/tgui/interfaces/PowerMonitor.tsx

@@ -31,7 +31,7 @@ export const PowerMonitorContent = (props) => {
   const [
     sortByField,
     setSortByField,
-  ] = useLocalState(context, 'sortByField', null);
+  ] = useLocalState( 'sortByField', null);
   const supply = history.supply[history.supply.length - 1] || 0;
   const demand = history.demand[history.demand.length - 1] || 0;
   const supplyData = history.supply.map((value, i) => [i, value]);

tgui/packages/tgui/interfaces/ProduceConsole.tsx

@@ -22,7 +22,7 @@ const ShoppingTab = (props) => {
   const [
     shopIndex,
     setShopIndex,
-  ] = useLocalState(context, 'shop-index', 1);
+  ] = useLocalState( 'shop-index', 1);
   const mapped_food = order_datums.filter(food => (
     food && food.cat === shopIndex
   ));
@@ -224,7 +224,7 @@ export const ProduceConsole = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'tab-index', 1);
+  ] = useLocalState( 'tab-index', 1);
   const TabComponent = TAB2NAME[tabIndex-1].component();
   return (
     <Window

tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx

@@ -67,7 +67,7 @@ export const RapidPipeDispenser = (props) => {
   const [
     categoryName,
     setCategoryName,
-  ] = useLocalState(context, 'categoryName');
+  ] = useLocalState( 'categoryName');
   const shownCategory = categories
     .find(category => category.cat_name === categoryName)
     || categories[0];

tgui/packages/tgui/interfaces/Reagents.tsx

@@ -42,7 +42,7 @@ export const Reagents = (props) => {
     { flag: bitflags.COMPETITIVE, icon: "recycle" },
   ];
 
-  const [page, setPage] = useLocalState(context, "page", 1);
+  const [page, setPage] = useLocalState( "page", 1);
 
   return (
     <Window
@@ -129,7 +129,7 @@ export const Reagents = (props) => {
 
 const TagBox = (props) => {
   const { act, data } = useBackend<any>();
-  const [page, setPage] = useLocalState(context, "page", 1);
+  const [page, setPage] = useLocalState( "page", 1);
   const { bitflags } = props;
   const { selectedBitflags } = data;
   return (
@@ -344,7 +344,7 @@ const TagBox = (props) => {
 
 const RecipeLibrary = (props) => {
   const { act, data } = useBackend<any>();
-  const [page, setPage] = useLocalState(context, "page", 1);
+  const [page, setPage] = useLocalState( "page", 1);
   const { flagIcons } = props;
   const {
     selectedBitflags,

tgui/packages/tgui/interfaces/Roulette.tsx

@@ -160,7 +160,7 @@ export const RouletteBetTable = (props) => {
   const [
     customBet,
     setCustomBet,
-  ] = useLocalState(context, 'customBet', 500);
+  ] = useLocalState( 'customBet', 500);
 
   let {
     BetType,

tgui/packages/tgui/interfaces/Secrets.tsx

@@ -550,7 +550,7 @@ export const Secrets = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'tab-index', 2);
+  ] = useLocalState( 'tab-index', 2);
   const TabComponent = TAB2NAME[tabIndex-1].component();
   return (
     <Window

tgui/packages/tgui/interfaces/SelectEquipment.tsx

@@ -10,7 +10,7 @@ import { Window } from '../layouts';
 const getOutfitKey = outfit => outfit.path || outfit.ref;
 
 const useOutfitTabs = (context, categories) => {
-  return useLocalState(context, 'selected-tab', categories[0]);
+  return useLocalState( 'selected-tab', categories[0]);
 };
 
 export const SelectEquipment = (props) => {

tgui/packages/tgui/interfaces/ShuttleManipulator.tsx

@@ -4,7 +4,7 @@ import { Button, Flex, LabeledList, Section, Table, Tabs } from 'tgui-core/compo
 import { Window } from '../layouts';
 
 export const ShuttleManipulator = (props) => {
-  const [tab, setTab] = useLocalState(context, 'tab', 1);
+  const [tab, setTab] = useLocalState( 'tab', 1);
   return (
     <Window
       title="Shuttle Manipulator"
@@ -106,7 +106,7 @@ export const ShuttleManipulatorTemplates = (props) => {
   const [
     selectedTemplateId,
     setSelectedTemplateId,
-  ] = useLocalState(context, 'templateId', Object.keys(templateObject)[0]);
+  ] = useLocalState( 'templateId', Object.keys(templateObject)[0]);
   const actualTemplates = templateObject[selectedTemplateId]?.templates || [];
   return (
     <Section>

tgui/packages/tgui/interfaces/Spellbook.tsx

@@ -86,7 +86,7 @@ const TableOfContents = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'tab-index', 1);
+  ] = useLocalState( 'tab-index', 1);
   return (
     <Box textAlign="center">
       <Button
@@ -361,7 +361,7 @@ export const Spellbook = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'tab-index', 1);
+  ] = useLocalState( 'tab-index', 1);
   const ScrollableCheck = TAB2NAME[tabIndex-1].noScrollable ? false : true;
   const ScrollableNextCheck = TAB2NAME[tabIndex-1].noScrollable !== 2;
   const TabComponent = TAB2NAME[tabIndex-1].component

tgui/packages/tgui/interfaces/Stack.tsx

@@ -15,7 +15,7 @@ export const Stack = (props) => {
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  ] = useLocalState( 'searchText', '');
 
   const testSearch = createSearch(searchText, item => {
     return item;

tgui/packages/tgui/interfaces/SyndContractor.tsx

@@ -272,7 +272,7 @@ export const StatusPane = (props) => {
 };
 
 export const SyndPane = (props) => {
-  const [tab, setTab] = useLocalState(context, 'tab', 1);
+  const [tab, setTab] = useLocalState( 'tab', 1);
   return (
     <>
       <StatusPane state={props.state} />

tgui/packages/tgui/interfaces/Techweb.tsx

@@ -148,11 +148,11 @@ export const TechwebContent = (props) => {
   const [
     techwebRoute,
     setTechwebRoute,
-  ] = useLocalState(context, 'techwebRoute', null);
+  ] = useLocalState( 'techwebRoute', null);
   const [
     lastPoints,
     setLastPoints,
-  ] = useLocalState(context, 'lastPoints', {});
+  ] = useLocalState( 'lastPoints', {});
 
   return (
     <Flex direction="column" className="Techweb__Viewport" height="100%">
@@ -216,7 +216,7 @@ export const TechwebContent = (props) => {
 const TechwebRouter = (props) => {
   const [
     techwebRoute,
-  ] = useLocalState(context, 'techwebRoute', null);
+  ] = useLocalState( 'techwebRoute', null);
 
   const route = techwebRoute?.route;
   const RoutedComponent = (
@@ -236,11 +236,11 @@ const TechwebOverview = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'overviewTabIndex', 1);
+  ] = useLocalState( 'overviewTabIndex', 1);
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText');
+  ] = useLocalState( 'searchText');
 
   // Only search when 3 or more characters have been input
   const searching = searchText && searchText.trim().length > 1;
@@ -335,7 +335,7 @@ const TechwebDiskMenu = (props) => {
   const [
     techwebRoute,
     setTechwebRoute,
-  ] = useLocalState(context, 'techwebRoute', null);
+  ] = useLocalState( 'techwebRoute', null);
 
   // Check for the disk actually being inserted
   if ((diskType === "design" && !d_disk) || (diskType === "tech" && !t_disk)) {
@@ -410,11 +410,11 @@ const TechwebDesignDisk = (props) => {
   const [
     selectedDesign,
     setSelectedDesign,
-  ] = useLocalState(context, "designDiskSelect", null);
+  ] = useLocalState( "designDiskSelect", null);
   const [
     showModal,
     setShowModal,
-  ] = useLocalState(context, 'showDesignModal', -1);
+  ] = useLocalState( 'showDesignModal', -1);
 
   const designIdByIdx = Object.keys(researched_designs);
   const designOptions = flow([
@@ -523,11 +523,11 @@ const TechNodeDetail = (props) => {
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'nodeDetailTabIndex', 0);
+  ] = useLocalState( 'nodeDetailTabIndex', 0);
   const [
     techwebRoute,
     setTechwebRoute,
-  ] = useLocalState(context, 'techwebRoute', null);
+  ] = useLocalState( 'techwebRoute', null);
 
   const prereqNodes = nodes.filter(x => prereq_ids.includes(x.id));
   const complPrereq = prereq_ids
@@ -610,11 +610,11 @@ const TechNode = (props) => {
   const [
     techwebRoute,
     setTechwebRoute,
-  ] = useLocalState(context, 'techwebRoute', null);
+  ] = useLocalState( 'techwebRoute', null);
   const [
     tabIndex,
     setTabIndex,
-  ] = useLocalState(context, 'nodeDetailTabIndex', 0);
+  ] = useLocalState( 'nodeDetailTabIndex', 0);
 
   const expcompl = required_experiments
     .filter(x => experiments[x]?.completed)

tgui/packages/tgui/interfaces/TramControl.tsx

@@ -61,7 +61,7 @@ export const TramControl = (props) => {
   const [
     transitIndex,
     setTransitIndex,
-  ] = useLocalState(context, 'transit-index', 1);
+  ] = useLocalState( 'transit-index', 1);
   const MovingTramDimmer = () => {
     return (
       <Dimmer>

tgui/packages/tgui/interfaces/Uplink.tsx

@@ -37,11 +37,11 @@ export const GenericUplink = (props) => {
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  ] = useLocalState( 'searchText', '');
   const [
     selectedCategory,
     setSelectedCategory,
-  ] = useLocalState(context, 'category', categories[0]?.name);
+  ] = useLocalState( 'category', categories[0]?.name);
   const testSearch = createSearch(searchText, item => {
     return item.name + item.desc;
   });
@@ -130,7 +130,7 @@ const ItemList = (props) => {
   const [
     hoveredItem,
     setHoveredItem,
-  ] = useLocalState(context, 'hoveredItem', {});
+  ] = useLocalState( 'hoveredItem', {});
   const hoveredCost = hoveredItem && hoveredItem.cost || 0;
   // Append extra hover data to items
   const items = props.items.map(item => {

tgui/packages/tgui/interfaces/Vending.tsx

@@ -181,7 +181,7 @@ export const Vending = (props) => {
   const [
     searchText,
     setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  ] = useLocalState( 'searchText', '');
   let inventory;
   let custom = false;
   if (data.vending_machine_input) {

tgui/packages/tgui/interfaces/VorePanel.tsx

@@ -155,7 +155,7 @@ const VoreSelectedBelly = (props) => {
     contents,
   } = belly;
 
-  const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
+  const [tabIndex, setTabIndex] = useLocalState( 'tabIndex', 0);
 
   return (
     <Fragment>

tgui/packages/tgui/interfaces/common/AccessList.tsx

@@ -30,7 +30,7 @@ export const AccessList = (props) => {
   const [
     selectedAccessName,
     setSelectedAccessName,
-  ] = useLocalState(context, 'accessName', accesses[0]?.name);
+  ] = useLocalState( 'accessName', accesses[0]?.name);
   const selectedAccess = accesses
     .find(access => access.name === selectedAccessName);
   const selectedAccessEntries = sortBy(

tgui/packages/tgui/layouts/NtosWindow.tsx

@@ -9,7 +9,7 @@ import { useBackend } from '../backend';
 import { Box, Button } from 'tgui-core/components';
 import { Window } from './Window';
 
-export const NtosWindow = (props, context) => {
+export const NtosWindow = (props) => {
   const {
     title,
     width = 575,
@@ -17,7 +17,7 @@ export const NtosWindow = (props, context) => {
     theme = 'ntos',
     children,
   } = props;
-  const { act, data } = useBackend(context);
+  const { act, data } = useBackend<any>();
   const {
     PC_device_theme,
     PC_batteryicon,