From 2332138fbd51361db78a6411808e0084c7560bb1 Mon Sep 17 00:00:00 2001
From: borisflagell <clement.delrue@gmail.com>
Date: Sat, 28 May 2022 03:15:23 +0200
Subject: [PATCH] Updated Modal to use new NumberInput Component

---
 .../ui/modals/BribeFactionModal.tsx           | 22 ++++----------
 .../ui/modals/BuybackSharesModal.tsx          | 15 +++-------
 src/Corporation/ui/modals/GoPublicModal.tsx   | 12 ++------
 .../ui/modals/IssueNewSharesModal.tsx         | 16 ++++------
 .../ui/modals/MakeProductModal.tsx            | 29 ++++---------------
 src/Corporation/ui/modals/SellSharesModal.tsx | 17 ++++-------
 6 files changed, 28 insertions(+), 83 deletions(-)

diff --git a/src/Corporation/ui/modals/BribeFactionModal.tsx b/src/Corporation/ui/modals/BribeFactionModal.tsx
index 106350cda..92a0fb6ef 100644
--- a/src/Corporation/ui/modals/BribeFactionModal.tsx
+++ b/src/Corporation/ui/modals/BribeFactionModal.tsx
@@ -9,7 +9,7 @@ import { useCorporation } from "../Context";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
-import TextField from "@mui/material/TextField";
+import { NumberInput } from "../../../ui/React/NumberInput";
 import Box from "@mui/material/Box";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 
@@ -27,12 +27,10 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
     return true;
   });
   const corp = useCorporation();
-  const [money, setMoney] = useState<number | null>(0);
-  const [stock, setStock] = useState<number | null>(0);
+  const [money, setMoney] = useState<number>(NaN);
+  const [stock, setStock] = useState<number>(NaN);
   const [selectedFaction, setSelectedFaction] = useState(factions.length > 0 ? factions[0] : "");
   const disabled =
-    money === null ||
-    stock === null ||
     (money === 0 && stock === 0) ||
     isNaN(money) ||
     isNaN(stock) ||
@@ -41,16 +39,6 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
     corp.funds < money ||
     stock > corp.numShares;
 
-  function onMoneyChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (isNaN(amt)) setMoney(null);
-    else setMoney(amt);
-  }
-
-  function onStockChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    setStock(parseFloat(event.target.value));
-  }
-
   function changeFaction(event: SelectChangeEvent<string>): void {
     setSelectedFaction(event.target.value);
   }
@@ -112,8 +100,8 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
         </Select>
       </Box>
       <Typography>{getRepText(money ? money : 0, stock ? stock : 0)}</Typography>
-      <TextField onChange={onMoneyChange} placeholder="Corporation funds" />
-      <TextField sx={{ mx: 1 }} onChange={onStockChange} placeholder="Stock Shares" />
+      <NumberInput onChange={setMoney} placeholder="Corporation funds" />
+      <NumberInput sx={{ mx: 1 }} onChange={setStock} placeholder="Stock Shares" />
       <Button disabled={disabled} sx={{ mx: 1 }} onClick={() => bribe(money ? money : 0, stock ? stock : 0)}>
         Bribe
       </Button>
diff --git a/src/Corporation/ui/modals/BuybackSharesModal.tsx b/src/Corporation/ui/modals/BuybackSharesModal.tsx
index 83e4c6d95..def744d65 100644
--- a/src/Corporation/ui/modals/BuybackSharesModal.tsx
+++ b/src/Corporation/ui/modals/BuybackSharesModal.tsx
@@ -5,7 +5,7 @@ import { use } from "../../../ui/Context";
 import { useCorporation } from "../Context";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
+import { NumberInput } from "../../../ui/React/NumberInput";
 import { BuyBackShares } from "../../Actions";
 import { dialogBoxCreate } from "../../../ui/React/DialogBox";
 import { KEY } from "../../../utils/helpers/keyCodes";
@@ -21,13 +21,7 @@ interface IProps {
 export function BuybackSharesModal(props: IProps): React.ReactElement {
   const player = use.Player();
   const corp = useCorporation();
-  const [shares, setShares] = useState<number | null>(null);
-
-  function changeShares(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (event.target.value === "" || isNaN(amt)) setShares(null);
-    else setShares(amt);
-  }
+  const [shares, setShares] = useState<number>(NaN);
 
   const currentStockPrice = corp.sharePrice;
   const buybackPrice = currentStockPrice * 1.1;
@@ -88,11 +82,10 @@ export function BuybackSharesModal(props: IProps): React.ReactElement {
       </Typography>
       <CostIndicator />
       <br />
-      <TextField
+      <NumberInput
         autoFocus={true}
-        type="string"
         placeholder="Shares to buyback"
-        onChange={changeShares}
+        onChange={setShares}
         onKeyDown={onKeyDown}
       />
       <Button disabled={disabled} onClick={buy}>
diff --git a/src/Corporation/ui/modals/GoPublicModal.tsx b/src/Corporation/ui/modals/GoPublicModal.tsx
index d15531f37..07a64f4dc 100644
--- a/src/Corporation/ui/modals/GoPublicModal.tsx
+++ b/src/Corporation/ui/modals/GoPublicModal.tsx
@@ -5,7 +5,7 @@ import { numeralWrapper } from "../../../ui/numeralFormat";
 import { useCorporation } from "../Context";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
+import { NumberInput } from "../../../ui/React/NumberInput";
 import Box from "@mui/material/Box";
 import { KEY } from "../../../utils/helpers/keyCodes";
 
@@ -18,7 +18,7 @@ interface IProps {
 // Create a popup that lets the player manage exports
 export function GoPublicModal(props: IProps): React.ReactElement {
   const corp = useCorporation();
-  const [shares, setShares] = useState<number>(0);
+  const [shares, setShares] = useState<number>(NaN);
   const initialSharePrice = corp.determineValuation() / corp.totalShares;
 
   function goPublic(): void {
@@ -48,12 +48,6 @@ export function GoPublicModal(props: IProps): React.ReactElement {
     if (event.key === KEY.ENTER) goPublic();
   }
 
-  function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (event.target.value === "" || isNaN(amt)) setShares(NaN);
-    else setShares(amt);
-  }
-
   return (
     <Modal open={props.open} onClose={props.onClose}>
       <Typography>
@@ -65,7 +59,7 @@ export function GoPublicModal(props: IProps): React.ReactElement {
         You have a total of {numeralWrapper.format(corp.numShares, "0.000a")} of shares that you can issue.
       </Typography>
       <Box display="flex" alignItems="center">
-        <TextField onChange={onChange} autoFocus type="string" placeholder="Shares to issue" onKeyDown={onKeyDown} />
+        <NumberInput onChange={setShares} autoFocus placeholder="Shares to issue" onKeyDown={onKeyDown} />
         <Button disabled={shares < 0 || shares > corp.numShares} sx={{ mx: 1 }} onClick={goPublic}>
           Go Public
         </Button>
diff --git a/src/Corporation/ui/modals/IssueNewSharesModal.tsx b/src/Corporation/ui/modals/IssueNewSharesModal.tsx
index dab41e4d3..d4a3c50c2 100644
--- a/src/Corporation/ui/modals/IssueNewSharesModal.tsx
+++ b/src/Corporation/ui/modals/IssueNewSharesModal.tsx
@@ -6,7 +6,7 @@ import { getRandomInt } from "../../../utils/helpers/getRandomInt";
 import { CorporationConstants } from "../../data/Constants";
 import { useCorporation } from "../Context";
 import Typography from "@mui/material/Typography";
-import TextField from "@mui/material/TextField";
+import { NumberInput } from "../../../ui/React/NumberInput";
 import Button from "@mui/material/Button";
 import { KEY } from "../../../utils/helpers/keyCodes";
 
@@ -54,15 +54,15 @@ interface IProps {
 // This is created when the player clicks the "Issue New Shares" buttons in the overview panel
 export function IssueNewSharesModal(props: IProps): React.ReactElement {
   const corp = useCorporation();
-  const [shares, setShares] = useState<number | null>(null);
+  const [shares, setShares] = useState<number>(NaN);
   const maxNewSharesUnrounded = Math.round(corp.totalShares * 0.2);
   const maxNewShares = maxNewSharesUnrounded - (maxNewSharesUnrounded % 1e6);
 
   const newShares = Math.round((shares || 0) / 10e6) * 10e6;
-  const disabled = shares === null || isNaN(newShares) || newShares < 10e6 || newShares > maxNewShares;
+  const disabled = isNaN(shares) || isNaN(newShares) || newShares < 10e6 || newShares > maxNewShares;
 
   function issueNewShares(): void {
-    if (shares === null) return;
+    if (isNaN(shares)) return;
     if (disabled) return;
 
     const newSharePrice = Math.round(corp.sharePrice * 0.9);
@@ -97,12 +97,6 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
     if (event.key === KEY.ENTER) issueNewShares();
   }
 
-  function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (event.target.value === "" || isNaN(amt)) setShares(null);
-    else setShares(amt);
-  }
-
   return (
     <Modal open={props.open} onClose={props.onClose}>
       <Typography>
@@ -125,7 +119,7 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
         you cannot buy them back.
       </Typography>
       <EffectText shares={shares} />
-      <TextField autoFocus placeholder="# New Shares" onChange={onChange} onKeyDown={onKeyDown} />
+      <NumberInput autoFocus placeholder="# New Shares" onChange={setShares} onKeyDown={onKeyDown} />
       <Button disabled={disabled} onClick={issueNewShares} sx={{ mx: 1 }}>
         Issue New Shares
       </Button>
diff --git a/src/Corporation/ui/modals/MakeProductModal.tsx b/src/Corporation/ui/modals/MakeProductModal.tsx
index 8c43f03d5..13e8b0da3 100644
--- a/src/Corporation/ui/modals/MakeProductModal.tsx
+++ b/src/Corporation/ui/modals/MakeProductModal.tsx
@@ -10,7 +10,7 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { KEY } from "../../../utils/helpers/keyCodes";
-import { numeralWrapper } from "../../../ui/numeralFormat";
+import { NumberInput } from "../../../ui/React/NumberInput";
 
 interface IProps {
   open: boolean;
@@ -35,8 +35,8 @@ export function MakeProductModal(props: IProps): React.ReactElement {
   const allCities = Object.keys(division.offices).filter((cityName: string) => division.offices[cityName] !== 0);
   const [city, setCity] = useState(allCities.length > 0 ? allCities[0] : "");
   const [name, setName] = useState("");
-  const [design, setDesign] = useState<number | null>(null);
-  const [marketing, setMarketing] = useState<number | null>(null);
+  const [design, setDesign] = useState<number>(NaN);
+  const [marketing, setMarketing] = useState<number>(NaN);
   if (division.hasMaximumNumberProducts()) return <></>;
 
   let createProductPopupText = <></>;
@@ -139,7 +139,7 @@ export function MakeProductModal(props: IProps): React.ReactElement {
   );
 
   function makeProduct(): void {
-    if (design === null || marketing === null) return;
+    if (isNaN(design) || isNaN(marketing)) return;
     try {
       MakeProduct(corp, division, city, name, design, marketing);
     } catch (err) {
@@ -156,18 +156,6 @@ export function MakeProductModal(props: IProps): React.ReactElement {
     setName(event.target.value);
   }
 
-  function onDesignChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (event.target.value === "" || isNaN(amt)) setDesign(null);
-    else setDesign(amt);
-  }
-
-  function onMarketingChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (event.target.value === "" || isNaN(amt)) setMarketing(null);
-    else setMarketing(amt);
-  }
-
   function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
     if (event.key === KEY.ENTER) makeProduct();
   }
@@ -184,13 +172,8 @@ export function MakeProductModal(props: IProps): React.ReactElement {
       </Select>
       <TextField onChange={onProductNameChange} placeholder={productPlaceholder(division.type)} />
       <br />
-      <TextField onChange={onDesignChange} autoFocus={true} type="string" placeholder={"Design investment"} />
-      <TextField
-        onChange={onMarketingChange}
-        onKeyDown={onKeyDown}
-        type="string"
-        placeholder={"Marketing investment"}
-      />
+      <NumberInput onChange={setDesign} autoFocus={true} placeholder={"Design investment"} />
+      <NumberInput onChange={setMarketing} onKeyDown={onKeyDown} placeholder={"Marketing investment"} />
       <Button onClick={makeProduct}>Develop Product</Button>
     </Modal>
   );
diff --git a/src/Corporation/ui/modals/SellSharesModal.tsx b/src/Corporation/ui/modals/SellSharesModal.tsx
index f5eba53aa..5a414d0d7 100644
--- a/src/Corporation/ui/modals/SellSharesModal.tsx
+++ b/src/Corporation/ui/modals/SellSharesModal.tsx
@@ -6,11 +6,11 @@ import { use } from "../../../ui/Context";
 import { useCorporation } from "../Context";
 import { ICorporation } from "../../ICorporation";
 import Typography from "@mui/material/Typography";
-import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import { Money } from "../../../ui/React/Money";
 import { SellShares } from "../../Actions";
 import { KEY } from "../../../utils/helpers/keyCodes";
+import { NumberInput } from "../../../ui/React/NumberInput";
 interface IProps {
   open: boolean;
   onClose: () => void;
@@ -22,15 +22,9 @@ interface IProps {
 export function SellSharesModal(props: IProps): React.ReactElement {
   const player = use.Player();
   const corp = useCorporation();
-  const [shares, setShares] = useState<number | null>(null);
+  const [shares, setShares] = useState<number>(NaN);
 
-  const disabled = shares === null || isNaN(shares) || shares <= 0 || shares > corp.numShares;
-
-  function changeShares(event: React.ChangeEvent<HTMLInputElement>): void {
-    const amt = numeralWrapper.parseMoney(event.target.value);
-    if (event.target.value === "" || isNaN(amt)) setShares(null);
-    else setShares(amt);
-  }
+  const disabled = isNaN(shares) || shares <= 0 || shares > corp.numShares;
 
   function ProfitIndicator(props: { shares: number | null; corp: ICorporation }): React.ReactElement {
     if (props.shares === null) return <></>;
@@ -89,12 +83,11 @@ export function SellSharesModal(props: IProps): React.ReactElement {
         The current price of your company's stock is {numeralWrapper.formatMoney(corp.sharePrice)}
       </Typography>
       <br />
-      <TextField
+      <NumberInput
         variant="standard"
         autoFocus
-        type="string"
         placeholder="Shares to sell"
-        onChange={changeShares}
+        onChange={setShares}
         onKeyDown={onKeyDown}
       />
       <Button disabled={disabled} onClick={sell} sx={{ mx: 1 }}>