Reduce prop chaining

src/StockMarket/ui/StockMarketRoot.tsx

@@ -7,31 +7,14 @@ import { InfoAndPurchases } from "./InfoAndPurchases";
 import { StockTickers } from "./StockTickers";
 
 import { IStockMarket } from "../IStockMarket";
-import { Stock } from "../Stock";
-import { OrderTypes } from "../data/OrderTypes";
-import { PositionTypes } from "../data/PositionTypes";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { EventEmitter } from "../../utils/EventEmitter";
 
-type txFn = (stock: Stock, shares: number) => boolean;
-type placeOrderFn = (
-  stock: Stock,
-  shares: number,
-  price: number,
-  ordType: OrderTypes,
-  posType: PositionTypes,
-) => boolean;
-
 type IProps = {
-  buyStockLong: txFn;
-  buyStockShort: txFn;
   eventEmitterForReset?: EventEmitter<[]>;
   initStockMarket: () => void;
   p: IPlayer;
-  placeOrder: placeOrderFn;
-  sellStockLong: txFn;
-  sellStockShort: txFn;
   stockMarket: IStockMarket;
 };
 
@@ -49,16 +32,7 @@ export function StockMarketRoot(props: IProps): React.ReactElement {
     <>
       <InfoAndPurchases initStockMarket={props.initStockMarket} p={props.p} rerender={rerender} />
       {props.p.hasWseAccount && (
-        <StockTickers
+        <StockTickers eventEmitterForReset={props.eventEmitterForReset} p={props.p} stockMarket={props.stockMarket} />
-          buyStockLong={props.buyStockLong}
-          buyStockShort={props.buyStockShort}
-          eventEmitterForReset={props.eventEmitterForReset}
-          p={props.p}
-          placeOrder={props.placeOrder}
-          sellStockLong={props.sellStockLong}
-          sellStockShort={props.sellStockShort}
-          stockMarket={props.stockMarket}
-        />
       )}
     </>
   );

src/StockMarket/ui/StockTicker.tsx

@@ -14,6 +14,8 @@ import { Stock } from "../Stock";
 import { getBuyTransactionCost, getSellTransactionGain, calculateBuyMaxAmount } from "../StockMarketHelpers";
 import { OrderTypes } from "../data/OrderTypes";
 import { PositionTypes } from "../data/PositionTypes";
+import { placeOrder } from "../StockMarket";
+import { buyStock, shortStock, sellStock, sellShort } from "../BuyingAndSelling";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { numeralWrapper } from "../../ui/numeralFormat";
@@ -38,24 +40,10 @@ enum SelectorOrderType {
   Stop = "Stop Order",
 }
 
-type txFn = (stock: Stock, shares: number) => boolean;
-type placeOrderFn = (
-  stock: Stock,
-  shares: number,
-  price: number,
-  ordType: OrderTypes,
-  posType: PositionTypes,
-) => boolean;
-
 type IProps = {
-  buyStockLong: txFn;
-  buyStockShort: txFn;
   orders: Order[];
   p: IPlayer;
-  placeOrder: placeOrderFn;
   rerenderAllTickers: () => void;
-  sellStockLong: txFn;
-  sellStockShort: txFn;
   stock: Stock;
 };
 
@@ -138,9 +126,9 @@ export function StockTicker(props: IProps): React.ReactElement {
     switch (orderType) {
       case SelectorOrderType.Market: {
         if (position === PositionTypes.Short) {
-          props.buyStockShort(props.stock, shares);
+          shortStock(props.stock, shares);
         } else {
-          props.buyStockLong(props.stock, shares);
+          buyStock(props.stock, shares);
         }
         props.rerenderAllTickers();
         break;
@@ -150,7 +138,7 @@ export function StockTicker(props: IProps): React.ReactElement {
         setModalProps({
           text: "Enter the price for your Limit Order",
           placeText: "Place Buy Limit Order",
-          place: (price: number) => props.placeOrder(props.stock, shares, price, OrderTypes.LimitBuy, position),
+          place: (price: number) => placeOrder(props.stock, shares, price, OrderTypes.LimitBuy, position),
         });
         break;
       }
@@ -159,7 +147,7 @@ export function StockTicker(props: IProps): React.ReactElement {
         setModalProps({
           text: "Enter the price for your Stop Order",
           placeText: "Place Buy Stop Order",
-          place: (price: number) => props.placeOrder(props.stock, shares, price, OrderTypes.StopBuy, position),
+          place: (price: number) => placeOrder(props.stock, shares, price, OrderTypes.StopBuy, position),
         });
         break;
       }
@@ -178,9 +166,9 @@ export function StockTicker(props: IProps): React.ReactElement {
     switch (orderType) {
       case SelectorOrderType.Market: {
         if (position === PositionTypes.Short) {
-          props.buyStockShort(stock, maxShares);
+          shortStock(stock, maxShares);
         } else {
-          props.buyStockLong(stock, maxShares);
+          buyStock(stock, maxShares);
         }
         props.rerenderAllTickers();
         break;
@@ -234,9 +222,9 @@ export function StockTicker(props: IProps): React.ReactElement {
     switch (orderType) {
       case SelectorOrderType.Market: {
         if (position === PositionTypes.Short) {
-          props.sellStockShort(props.stock, shares);
+          sellShort(props.stock, shares);
         } else {
-          props.sellStockLong(props.stock, shares);
+          sellStock(props.stock, shares);
         }
         props.rerenderAllTickers();
         break;
@@ -246,7 +234,7 @@ export function StockTicker(props: IProps): React.ReactElement {
         setModalProps({
           text: "Enter the price for your Limit Order",
           placeText: "Place Sell Limit Order",
-          place: (price: number) => props.placeOrder(props.stock, shares, price, OrderTypes.LimitSell, position),
+          place: (price: number) => placeOrder(props.stock, shares, price, OrderTypes.LimitSell, position),
         });
         break;
       }
@@ -255,7 +243,7 @@ export function StockTicker(props: IProps): React.ReactElement {
         setModalProps({
           text: "Enter the price for your Stop Order",
           placeText: "Place Sell Stop Order",
-          place: (price: number) => props.placeOrder(props.stock, shares, price, OrderTypes.StopSell, position),
+          place: (price: number) => placeOrder(props.stock, shares, price, OrderTypes.StopSell, position),
         });
         break;
       }
@@ -270,9 +258,9 @@ export function StockTicker(props: IProps): React.ReactElement {
     switch (orderType) {
       case SelectorOrderType.Market: {
         if (position === PositionTypes.Short) {
-          props.sellStockShort(stock, stock.playerShortShares);
+          sellShort(stock, stock.playerShortShares);
         } else {
-          props.sellStockLong(stock, stock.playerShares);
+          sellStock(stock, stock.playerShares);
         }
         props.rerenderAllTickers();
         break;

src/StockMarket/ui/StockTickers.tsx

@@ -10,29 +10,13 @@ import { StockTickersConfig, TickerDisplayMode } from "./StockTickersConfig";
 
 import { IStockMarket } from "../IStockMarket";
 import { Stock } from "../Stock";
-import { OrderTypes } from "../data/OrderTypes";
-import { PositionTypes } from "../data/PositionTypes";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { EventEmitter } from "../../utils/EventEmitter";
 
-type txFn = (stock: Stock, shares: number) => boolean;
-type placeOrderFn = (
-  stock: Stock,
-  shares: number,
-  price: number,
-  ordType: OrderTypes,
-  posType: PositionTypes,
-) => boolean;
-
 type IProps = {
-  buyStockLong: txFn;
-  buyStockShort: txFn;
   eventEmitterForReset?: EventEmitter<[]>;
   p: IPlayer;
-  placeOrder: placeOrderFn;
-  sellStockLong: txFn;
-  sellStockShort: txFn;
   stockMarket: IStockMarket;
 };
 
@@ -86,18 +70,7 @@ export function StockTickers(props: IProps): React.ReactElement {
       }
 
       tickers.push(
-        <StockTicker
+        <StockTicker key={val.symbol} orders={orders} p={props.p} rerenderAllTickers={rerender} stock={val} />,
-          buyStockLong={props.buyStockLong}
-          buyStockShort={props.buyStockShort}
-          key={val.symbol}
-          orders={orders}
-          p={props.p}
-          placeOrder={props.placeOrder}
-          rerenderAllTickers={rerender}
-          sellStockLong={props.sellStockLong}
-          sellStockShort={props.sellStockShort}
-          stock={val}
-        />,
       );
     }
   }

src/ui/GameRoot.tsx

@@ -17,8 +17,7 @@ import { prestigeAugmentation } from "../Prestige";
 import { dialogBoxCreate } from "./React/DialogBox";
 import { GetAllServers } from "../Server/AllServers";
 import { Factions } from "../Faction/Factions";
-import { buyStock, sellStock, shortStock, sellShort } from "../StockMarket/BuyingAndSelling";
+import { eventEmitterForUiReset, initStockMarketFn, StockMarket } from "../StockMarket/StockMarket";
-import { eventEmitterForUiReset, initStockMarketFn, placeOrder, StockMarket } from "../StockMarket/StockMarket";
 
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
@@ -438,14 +437,9 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
     case Page.StockMarket: {
       mainPage = (
         <StockMarketRoot
-          buyStockLong={buyStock}
-          buyStockShort={shortStock}
           eventEmitterForReset={eventEmitterForUiReset}
           initStockMarket={initStockMarketFn}
           p={player}
-          placeOrder={placeOrder}
-          sellStockLong={sellStock}
-          sellStockShort={sellShort}
           stockMarket={StockMarket}
         />
       );