Removes context from tgui (#947)

* removes context * missed some * merge conf
DaedalusDock · May 28, 2024 · 6ee3b4e · 6ee3b4e
1 parent 1ba98dd
commit 6ee3b4e
Show file tree

Hide file tree

Showing 392 changed files with 1,888 additions and 2,237 deletions.
diff --git a/tgui/packages/common/redux.js b/tgui/packages/common/redux.js
@@ -139,14 +139,3 @@ export const createAction = (type, prepare = null) => {
   actionCreator.match = (action) => action.type === type;
   return actionCreator;
 };
-
-// Implementation specific
-// --------------------------------------------------------
-
-export const useDispatch = (context) => {
-  return context.store.dispatch;
-};
-
-export const useSelector = (context, selector) => {
-  return selector(context.store.getState());
-};
diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js
@@ -14,17 +14,17 @@ import { PingIndicator } from './ping';
 import { ReconnectButton } from './reconnect';
 import { SettingsPanel, useSettings } from './settings';
 
-export const Panel = (props, context) => {
+export const Panel = (props) => {
   // IE8-10: Needs special treatment due to missing Flex support
   if (Byond.IS_LTE_IE10) {
     return <HoboPanel />;
   }
-  const audio = useAudio(context);
-  const settings = useSettings(context);
-  const game = useGame(context);
+  const audio = useAudio();
+  const settings = useSettings();
+  const game = useGame();
   if (process.env.NODE_ENV !== 'production') {
     const { useDebug, KitchenSink } = require('tgui/debug');
-    const debug = useDebug(context);
+    const debug = useDebug();
     if (debug.kitchenSink) {
       return <KitchenSink panel />;
     }
@@ -103,8 +103,8 @@ export const Panel = (props, context) => {
   );
 };
 
-const HoboPanel = (props, context) => {
-  const settings = useSettings(context);
+const HoboPanel = (props) => {
+  const settings = useSettings();
   return (
     <Pane theme={settings.theme}>
       <Pane.Content scrollable>

diff --git a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
@@ -5,15 +5,15 @@
  */
 
 import { toFixed } from 'common/math';
-import { useDispatch, useSelector } from 'common/redux';
+import { useDispatch, useSelector } from 'tgui/backend';
 import { Button, Flex, Knob } from 'tgui/components';
 import { useSettings } from '../settings';
 import { selectAudio } from './selectors';
 
-export const NowPlayingWidget = (props, context) => {
-  const audio = useSelector(context, selectAudio);
-  const dispatch = useDispatch(context);
-  const settings = useSettings(context);
+export const NowPlayingWidget = (props) => {
+  const audio = useSelector(selectAudio);
+  const dispatch = useDispatch();
+  const settings = useSettings();
   const title = audio.meta?.title;
   return (
     <Flex align="center">

diff --git a/tgui/packages/tgui-panel/audio/hooks.js b/tgui/packages/tgui-panel/audio/hooks.js
@@ -4,12 +4,12 @@
  * @license MIT
  */
 
-import { useSelector, useDispatch } from 'common/redux';
+import { useDispatch, useSelector } from 'tgui/backend';
 import { selectAudio } from './selectors';
 
-export const useAudio = (context) => {
-  const state = useSelector(context, selectAudio);
-  const dispatch = useDispatch(context);
+export const useAudio = () => {
+  const state = useSelector(selectAudio);
+  const dispatch = useDispatch();
   return {
     ...state,
     toggle: () => dispatch({ type: 'audio/toggle' }),

diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.js b/tgui/packages/tgui-panel/chat/ChatPageSettings.js
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { useDispatch, useSelector } from 'common/redux';
+import { useDispatch, useSelector } from 'tgui/backend';
 import {
   Button,
   Collapsible,
@@ -17,9 +17,9 @@ import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
 import { MESSAGE_TYPES } from './constants';
 import { selectCurrentChatPage } from './selectors';
 
-export const ChatPageSettings = (props, context) => {
-  const page = useSelector(context, selectCurrentChatPage);
-  const dispatch = useDispatch(context);
+export const ChatPageSettings = (props) => {
+  const page = useSelector(selectCurrentChatPage);
+  const dispatch = useDispatch();
   return (
     <Section>
       <Stack align="center">

diff --git a/tgui/packages/tgui-panel/chat/ChatTabs.js b/tgui/packages/tgui-panel/chat/ChatTabs.js
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { useDispatch, useSelector } from 'common/redux';
+import { useDispatch, useSelector } from 'tgui/backend';
 import { Box, Tabs, Flex, Button } from 'tgui/components';
 import { changeChatPage, addChatPage } from './actions';
 import { selectChatPages, selectCurrentChatPage } from './selectors';
@@ -25,10 +25,10 @@ const UnreadCountWidget = ({ value }) => (
   </Box>
 );
 
-export const ChatTabs = (props, context) => {
-  const pages = useSelector(context, selectChatPages);
-  const currentPage = useSelector(context, selectCurrentChatPage);
-  const dispatch = useDispatch(context);
+export const ChatTabs = (props) => {
+  const pages = useSelector(selectChatPages);
+  const currentPage = useSelector(selectCurrentChatPage);
+  const dispatch = useDispatch();
   return (
     <Flex align="center">
       <Flex.Item>

diff --git a/tgui/packages/tgui-panel/game/hooks.js b/tgui/packages/tgui-panel/game/hooks.js
@@ -4,9 +4,9 @@
  * @license MIT
  */
 
-import { useSelector } from 'common/redux';
+import { useSelector } from 'tgui/backend';
 import { selectGame } from './selectors';
 
-export const useGame = (context) => {
-  return useSelector(context, selectGame);
+export const useGame = () => {
+  return useSelector(selectGame);
 };
diff --git a/tgui/packages/tgui-panel/index.js b/tgui/packages/tgui-panel/index.js
@@ -22,6 +22,7 @@ import { setupPanelFocusHacks } from './panelFocus';
 import { pingMiddleware, pingReducer } from './ping';
 import { settingsMiddleware, settingsReducer } from './settings';
 import { telemetryMiddleware } from './telemetry';
+import { setGlobalStore } from 'tgui/backend';
 
 perf.mark('inception', window.performance?.timing?.navigationStart);
 perf.mark('init');
@@ -47,6 +48,8 @@ const store = configureStore({
 });
 
 const renderApp = createRenderer(() => {
+  setGlobalStore(store);
+
   const { Panel } = require('./Panel');
   return (
     <StoreProvider store={store}>

diff --git a/tgui/packages/tgui-panel/ping/PingIndicator.js b/tgui/packages/tgui-panel/ping/PingIndicator.js
@@ -6,12 +6,12 @@
 
 import { Color } from 'common/color';
 import { toFixed } from 'common/math';
-import { useSelector } from 'common/redux';
+import { useSelector } from 'tgui/backend';
 import { Box } from 'tgui/components';
 import { selectPing } from './selectors';
 
-export const PingIndicator = (props, context) => {
-  const ping = useSelector(context, selectPing);
+export const PingIndicator = (props) => {
+  const ping = useSelector(selectPing);
   const color = Color.lookup(ping.networkQuality, [
     new Color(220, 40, 40),
     new Color(220, 200, 40),

diff --git a/tgui/packages/tgui-panel/reconnect.tsx b/tgui/packages/tgui-panel/reconnect.tsx
@@ -11,7 +11,7 @@ setInterval(() => {
   });
 }, 5000);
 
-export const ReconnectButton = (props, context) => {
+export const ReconnectButton = (props) => {
   return (
     url && (
       <>

diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.js b/tgui/packages/tgui-panel/settings/SettingsPanel.js
@@ -6,7 +6,7 @@
 
 import { toFixed } from 'common/math';
 import { useLocalState } from 'tgui/backend';
-import { useDispatch, useSelector } from 'common/redux';
+import { useDispatch, useSelector } from 'tgui/backend';
 import {
   Box,
   Button,
@@ -28,9 +28,9 @@ import { changeSettingsTab, updateSettings } from './actions';
 import { FONTS, SETTINGS_TABS, THEMES } from './constants';
 import { selectActiveTab, selectSettings } from './selectors';
 
-export const SettingsPanel = (props, context) => {
-  const activeTab = useSelector(context, selectActiveTab);
-  const dispatch = useDispatch(context);
+export const SettingsPanel = (props) => {
+  const activeTab = useSelector(selectActiveTab);
+  const dispatch = useDispatch();
   return (
     <Stack fill>
       <Stack.Item>
@@ -62,7 +62,7 @@ export const SettingsPanel = (props, context) => {
   );
 };
 
-export const SettingsGeneral = (props, context) => {
+export const SettingsGeneral = (props) => {
   const {
     theme,
     fontFamily,
@@ -72,8 +72,8 @@ export const SettingsGeneral = (props, context) => {
     highlightColor,
     matchWord,
     matchCase,
-  } = useSelector(context, selectSettings);
-  const dispatch = useDispatch(context);
+  } = useSelector(selectSettings);
+  const dispatch = useDispatch();
   const [freeFont, setFreeFont] = useLocalState(context, 'freeFont', false);
   return (
     <Section>

diff --git a/tgui/packages/tgui-panel/settings/hooks.js b/tgui/packages/tgui-panel/settings/hooks.js
@@ -4,13 +4,13 @@
  * @license MIT
  */
 
-import { useDispatch, useSelector } from 'common/redux';
+import { useDispatch, useSelector } from 'tgui/backend';
 import { updateSettings, toggleSettings } from './actions';
 import { selectSettings } from './selectors';
 
-export const useSettings = (context) => {
-  const settings = useSelector(context, selectSettings);
-  const dispatch = useDispatch(context);
+export const useSettings = () => {
+  const settings = useSelector(selectSettings);
+  const dispatch = useDispatch();
   return {
     ...settings,
     visible: settings.view.visible,

diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
@@ -20,6 +20,12 @@ import { resumeRenderer, suspendRenderer } from './renderer';
 
 const logger = createLogger('backend');
 
+export let globalStore;
+
+export const setGlobalStore = (store) => {
+  globalStore = store;
+};
+
 export const backendUpdate = createAction('backend/update');
 export const backendSetSharedState = createAction('backend/setSharedState');
 export const backendSuspendStart = createAction('backend/suspendStart');
@@ -264,9 +270,9 @@ export const selectBackend = <TData>(state: any): BackendState<TData> =>
  *
  * You can make
  */
-export const useBackend = <TData>(context: any) => {
-  const { store } = context;
-  const state = selectBackend<TData>(store.getState());
+export const useBackend = <TData>() => {
+  const state: BackendState<TData> = globalStore?.getState()?.backend;
+
   return {
     ...state,
     act: sendAct,
@@ -292,18 +298,16 @@ type StateWithSetter<T> = [T, (nextState: T) => void];
  * @param initialState Initializes your global variable with this value.
  */
 export const useLocalState = <T>(
-  context: any,
   key: string,
   initialState: T,
 ): StateWithSetter<T> => {
-  const { store } = context;
-  const state = selectBackend(store.getState());
-  const sharedStates = state.shared ?? {};
+  const state = globalStore?.getState()?.backend;
+  const sharedStates = state?.shared ?? {};
   const sharedState = key in sharedStates ? sharedStates[key] : initialState;
   return [
     sharedState,
     (nextState) => {
-      store.dispatch(
+      globalStore.dispatch(
         backendSetSharedState({
           key,
           nextState:
@@ -331,13 +335,11 @@ export const useLocalState = <T>(
  * @param initialState Initializes your global variable with this value.
  */
 export const useSharedState = <T>(
-  context: any,
   key: string,
   initialState: T,
 ): StateWithSetter<T> => {
-  const { store } = context;
-  const state = selectBackend(store.getState());
-  const sharedStates = state.shared ?? {};
+  const state = globalStore?.getState()?.backend;
+  const sharedStates = state?.shared ?? {};
   const sharedState = key in sharedStates ? sharedStates[key] : initialState;
   return [
     sharedState,
@@ -355,3 +357,14 @@ export const useSharedState = <T>(
     },
   ];
 };
+
+// Implementation specific
+// --------------------------------------------------------
+
+export const useDispatch = () => {
+  return globalStore?.dispatch;
+};
+
+export const useSelector = (selector) => {
+  return selector(globalStore?.getState());
+};
diff --git a/tgui/packages/tgui/components/Popper.tsx b/tgui/packages/tgui/components/Popper.tsx
@@ -70,12 +70,7 @@ export class Popper extends Component<PopperProps> {
   renderPopperContent(callback: () => void) {
     // `render` errors when given false, so we convert it to `null`,
     // which is supported.
-    render(
-      this.props.popperContent || null,
-      this.renderedContent,
-      callback,
-      this.context,
-    );
+    render(this.props.popperContent || null, this.renderedContent, callback);
   }
 
   render() {

diff --git a/tgui/packages/tgui/components/TextArea.js b/tgui/packages/tgui/components/TextArea.js
@@ -12,8 +12,8 @@ import { toInputValue } from './Input';
 import { KEY_ESCAPE } from 'common/keycodes';
 
 export class TextArea extends Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
     this.textareaRef = createRef();
     this.fillerRef = createRef();
     this.state = {