diff --git a/tgui/docs/tutorial-and-examples.md b/tgui/docs/tutorial-and-examples.md index 2e02f0e491ac..965235fa0c32 100644 --- a/tgui/docs/tutorial-and-examples.md +++ b/tgui/docs/tutorial-and-examples.md @@ -114,9 +114,7 @@ recommend getting yourself introduced to A React component is not a regular HTML template. A component is a javascript function, which accepts a `props` object (that contains -properties passed to a component) and a `context` object (which is -necessary to access UI data) as arguments, and outputs an HTML-like -structure. +properties passed to a component), and outputs an HTML-like structure. So let's create our first React Component. Create a file with a name `SampleInterface.js` (or any other name you want), and copy this code @@ -127,8 +125,8 @@ import { useBackend } from '../backend'; import { Button, LabeledList, Section } from '../components'; import { Window } from '../layouts'; -export const SampleInterface = (props, context) => { - const { act, data } = useBackend(context); +export const SampleInterface = (props) => { + const { act, data } = useBackend(); // Extract `health` and `color` variables from the `data` object. const { health, @@ -158,7 +156,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()` 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 +257,7 @@ import { useBackend } from '../backend'; import { Button, LabeledList, Section } from '../components'; import { Window } from '../layouts'; -export const SampleInterface = (props, context) => { +export const SampleInterface = (props) => { return ( @@ -269,8 +267,8 @@ export const SampleInterface = (props, context) => { ); }; -const HealthStatus = (props, context) => { - const { act, data } = useBackend(context); +const HealthStatus = (props) => { + const { act, data } = useBackend(); const { user, } = props; @@ -330,8 +328,8 @@ import { useBackend } from '../backend'; import { Button, LabeledList, Section } from '../components'; import { Window } from '../layouts'; -export const SampleInterface = (props, context) => { - const { act, data } = useBackend(context); +export const SampleInterface = (props) => { + const { act, data } = useBackend(); // Extract `health` and `color` variables from the `data` object. const { health, diff --git a/tgui/packages/tgui/interfaces/AresAdmin.jsx b/tgui/packages/tgui/interfaces/AresAdmin.jsx index 7d08a728612c..0273c0a4ffb7 100644 --- a/tgui/packages/tgui/interfaces/AresAdmin.jsx +++ b/tgui/packages/tgui/interfaces/AresAdmin.jsx @@ -25,8 +25,8 @@ const PAGES = { maintenance_management: () => MaintManagement, }; -export const AresAdmin = (props, context) => { - const { data } = useBackend(context); +export const AresAdmin = (props) => { + const { data } = useBackend(); const { current_menu, sudo } = data; const PageComponent = PAGES[current_menu](); @@ -48,8 +48,8 @@ export const AresAdmin = (props, context) => { ); }; -const Login = (props, context) => { - const { act } = useBackend(context); +const Login = (props) => { + const { act } = useBackend(); return ( { ); }; -const MainMenu = (props, context) => { - const { data, act } = useBackend(context); +const MainMenu = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, last_page, current_menu, sudo, admin_login } = data; @@ -448,8 +448,8 @@ const MainMenu = (props, context) => { ); }; -const AnnouncementLogs = (props, context) => { - const { data, act } = useBackend(context); +const AnnouncementLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -547,8 +547,8 @@ const AnnouncementLogs = (props, context) => { ); }; -const BioscanLogs = (props, context) => { - const { data, act } = useBackend(context); +const BioscanLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -646,8 +646,8 @@ const BioscanLogs = (props, context) => { ); }; -const BombardmentLogs = (props, context) => { - const { data, act } = useBackend(context); +const BombardmentLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -749,8 +749,8 @@ const BombardmentLogs = (props, context) => { ); }; -const ApolloLog = (props, context) => { - const { data, act } = useBackend(context); +const ApolloLog = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -815,8 +815,8 @@ const ApolloLog = (props, context) => { ); }; -const AccessLogs = (props, context) => { - const { data, act } = useBackend(context); +const AccessLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -881,8 +881,8 @@ const AccessLogs = (props, context) => { ); }; -const DeletionLogs = (props, context) => { - const { data, act } = useBackend(context); +const DeletionLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -977,8 +977,8 @@ const DeletionLogs = (props, context) => { ); }; -const ARESTalk = (props, context) => { - const { data, act } = useBackend(context); +const ARESTalk = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1102,8 +1102,8 @@ const ARESTalk = (props, context) => { ); }; -const DeletedTalks = (props, context) => { - const { data, act } = useBackend(context); +const DeletedTalks = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1197,8 +1197,8 @@ const DeletedTalks = (props, context) => { ); }; -const ReadingTalks = (props, context) => { - const { data, act } = useBackend(context); +const ReadingTalks = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1262,8 +1262,8 @@ const ReadingTalks = (props, context) => { ); }; -const Requisitions = (props, context) => { - const { data, act } = useBackend(context); +const Requisitions = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1359,8 +1359,8 @@ const Requisitions = (props, context) => { ); }; -const FlightLogs = (props, context) => { - const { data, act } = useBackend(context); +const FlightLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1458,8 +1458,8 @@ const FlightLogs = (props, context) => { ); }; -const Security = (props, context) => { - const { data, act } = useBackend(context); +const Security = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1556,8 +1556,8 @@ const Security = (props, context) => { ); }; -const Emergency = (props, context) => { - const { data, act } = useBackend(context); +const Emergency = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, last_page, current_menu, admin_login } = data; return ( @@ -1663,8 +1663,8 @@ const Emergency = (props, context) => { ); }; -const TechLogs = (props, context) => { - const { data, act } = useBackend(context); +const TechLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1861,8 +1861,8 @@ const CoreSec = (props) => { // Anything below this line is exclusive to the Admin Remote Interface. // -------------------------------------------------------------------- // -const AdminAccessLogs = (props, context) => { - const { data, act } = useBackend(context); +const AdminAccessLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1923,8 +1923,8 @@ const AdminAccessLogs = (props, context) => { ); }; -const AccessManagement = (props, context) => { - const { data, act } = useBackend(context); +const AccessManagement = (props) => { + const { data, act } = useBackend(); const { last_page, current_menu, access_tickets, admin_login } = data; return ( @@ -2070,8 +2070,8 @@ const AccessManagement = (props, context) => { ); }; -const MaintManagement = (props, context) => { - const { data, act } = useBackend(context); +const MaintManagement = (props) => { + const { data, act } = useBackend(); const { last_page, current_menu, maintenance_tickets, admin_login } = data; return ( diff --git a/tgui/packages/tgui/interfaces/AresInterface.jsx b/tgui/packages/tgui/interfaces/AresInterface.jsx index 77554538e9d5..d5b393c7f409 100644 --- a/tgui/packages/tgui/interfaces/AresInterface.jsx +++ b/tgui/packages/tgui/interfaces/AresInterface.jsx @@ -1645,8 +1645,8 @@ const Emergency = (props) => { ); }; -const TechLogs = (props, context) => { - const { data, act } = useBackend(context); +const TechLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, diff --git a/tgui/packages/tgui/interfaces/PartFabricator.jsx b/tgui/packages/tgui/interfaces/PartFabricator.jsx index 0b5bfcbd7dcf..b9d4c94af78e 100644 --- a/tgui/packages/tgui/interfaces/PartFabricator.jsx +++ b/tgui/packages/tgui/interfaces/PartFabricator.jsx @@ -13,8 +13,8 @@ export const PartFabricator = (props) => { ); }; -const GeneralPanel = (props, context) => { - const { act, data } = useBackend(context); +const GeneralPanel = (props) => { + const { act, data } = useBackend(); const { points, omnisentrygun_price, Equipment, Ammo } = data; return (
diff --git a/tgui/packages/tgui/interfaces/StripMenu.tsx b/tgui/packages/tgui/interfaces/StripMenu.tsx index b3377d91a6aa..6790d17a29d9 100644 --- a/tgui/packages/tgui/interfaces/StripMenu.tsx +++ b/tgui/packages/tgui/interfaces/StripMenu.tsx @@ -261,7 +261,7 @@ const StripContent = (props: { readonly item: StripMenuItem }) => { return <> ; }; -export const StripMenu = (props, context) => { +export const StripMenu = (props) => { const { act, data } = useBackend(); const gridSpots = new Map(); diff --git a/tgui/packages/tgui/interfaces/WhitelistPanel.jsx b/tgui/packages/tgui/interfaces/WhitelistPanel.jsx index fed3e1c4ebd8..46b453c32728 100644 --- a/tgui/packages/tgui/interfaces/WhitelistPanel.jsx +++ b/tgui/packages/tgui/interfaces/WhitelistPanel.jsx @@ -7,8 +7,8 @@ const PAGES = { Update: () => StatusUpdate, }; -export const WhitelistPanel = (props, context) => { - const { data } = useBackend(context); +export const WhitelistPanel = (props) => { + const { data } = useBackend(); const { current_menu } = data; const PageComponent = PAGES[current_menu](); @@ -21,8 +21,8 @@ export const WhitelistPanel = (props, context) => { ); }; -const PlayerList = (props, context) => { - const { data, act } = useBackend(context); +const PlayerList = (props) => { + const { data, act } = useBackend(); const { whitelisted_players } = data; return ( @@ -87,8 +87,8 @@ const PlayerList = (props, context) => { ); }; -const StatusUpdate = (props, context) => { - const { act, data } = useBackend(context); +const StatusUpdate = (props) => { + const { act, data } = useBackend(); const { co_flags, syn_flags,