From df3fe4712a6b1884ab89008d5958a8f297323c6f Mon Sep 17 00:00:00 2001
From: fearandesire <63979371+fearandesire@users.noreply.github.com>
Date: Wed, 7 Jun 2023 18:52:43 -0400
Subject: [PATCH] feat: :sparkles: Add total salary of selected players for
 'Trading Block' page

Add two states to `TradingBlock.tsx`; One to track and ensure contracts aren't duplicated by storing the pid and contract in an array, and a second to keep the running total of selected contracts in numeric format.
The state `contractsSum` is rendered on top of the Trading Block table.
---
 src/ui/views/TradingBlock.tsx | 46 ++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/ui/views/TradingBlock.tsx b/src/ui/views/TradingBlock.tsx
index 58c54379c1..a8cea72a13 100644
--- a/src/ui/views/TradingBlock.tsx
+++ b/src/ui/views/TradingBlock.tsx
@@ -382,17 +382,26 @@ export const OfferTable = ({
 	);
 };
 
+type Contract = {
+	pid: number;
+	contract: number;
+};
+
 const TradingBlock = (props: View<"tradingBlock">) => {
 	const [state, setState] = useState<{
 		asking: boolean;
 		offers: OfferType[];
 		pids: number[];
 		dpids: number[];
+		selectedContracts: Contract[];
+		contractsSum: number;
 	}>({
 		asking: false,
 		offers: [],
 		pids: props.initialPid !== undefined ? [props.initialPid] : [],
 		dpids: props.initialDpid !== undefined ? [props.initialDpid] : [],
+		selectedContracts: [],
+		contractsSum: 0,
 	});
 
 	const handleChangeAsset = (type: "pids" | "dpids", id: number) => {
@@ -415,6 +424,32 @@ const TradingBlock = (props: View<"tradingBlock">) => {
 		});
 	};
 
+	/**
+	 * Tally the sum of selected contracts.
+	 *
+	 * @param {number} pid - The ID of the contract.
+	 * @param {number} contract - The value of the contract.
+	 */
+	const handleContractSum = (pid: number, contract: number) => {
+		setState(prevState => {
+			// Copy the selected contracts array.
+			const contracts = [...prevState.selectedContracts];
+			// Find the index of the contract.
+			const index = contracts.findIndex(c => c.pid === pid);
+			// If the contract is not found, add it to the array and tally it to the sum.
+			if (index === -1) {
+				contracts.push({ pid, contract });
+				prevState.contractsSum += contract;
+			} else {
+				// Otherwise, remove the contract from the array.
+				contracts.splice(index, 1);
+				prevState.contractsSum -= contract;
+			}
+			// Return the updated state
+			return { ...prevState, selectedContracts: contracts };
+		});
+	};
+
 	const handleClickAsk = async () => {
 		setState(prevState => ({
 			...prevState,
@@ -535,7 +570,10 @@ const TradingBlock = (props: View<"tradingBlock">) => {
 					type="checkbox"
 					checked={state.pids.includes(p.pid)}
 					disabled={p.untradable}
-					onChange={() => handleChangeAsset("pids", p.pid)}
+					onChange={() => {
+						handleChangeAsset("pids", p.pid);
+						handleContractSum(p.pid, p.contract.amount);
+					}}
 					title={p.untradableMsg}
 				/>,
 				wrappedPlayerNameLabels({
@@ -585,6 +623,12 @@ const TradingBlock = (props: View<"tradingBlock">) => {
 				trade proposals.
 			</p>
 
+			{/* Display total sum of selected contracts */}
+			<p>
+				<b>Total Salary: </b>
+				{helpers.formatCurrency(state.contractsSum, "M")}
+			</p>
+
 			<div className="row mb-3">
 				<div className="col-md-9">
 					<DataTable