Port Reward & Trade to hooks

serprex · Jun 13, 2023 · e2958f7 · e2958f7
1 parent 853617d
commit e2958f7
Show file tree

Hide file tree

Showing 2 changed files with 251 additions and 288 deletions.
diff --git a/src/views/Reward.jsx b/src/views/Reward.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { useMemo, useState } from 'react';
 
 import Cards from '../Cards.js';
 import * as etgutil from '../etgutil.js';
@@ -7,30 +7,27 @@ import * as Components from '../Components/index.jsx';
 import * as sock from '../sock.jsx';
 import * as store from '../store.jsx';
 
-export default class Reward extends Component {
-	constructor(props) {
-		super(props);
-		let reward = props.type,
-			rewardList;
+export default function Reward(props) {
+	const reward = props.type;
+	const rewardList = useMemo(() => {
 		if (typeof reward === 'string') {
 			const shiny = reward.charAt(0) === '!';
 			if (shiny) reward = reward.slice(1);
 			const upped = reward.slice(0, 5) === 'upped';
 			const rarity = userutil.rewardwords[upped ? reward.slice(5) : reward];
-			rewardList = Cards.filter(upped, x => x.rarity === rarity).map(
+			return Cards.filter(upped, x => x.rarity === rarity).map(
 				card => card.asShiny(shiny).code,
 			);
 		} else if (reward instanceof Array) {
-			rewardList = reward;
+			return reward;
+		} else {
+			return null;
 		}
-		this.state = {
-			rewardList,
-			chosenReward: null,
-		};
-	}
+	}, [reward]);
+	const [chosenReward, setChosenReward] = useState(null);
 
-	componentDidMount() {
-		if (this.state.rewardList) {
+	useEffect(() => {
+		if (rewardList) {
 			store.store.dispatch(
 				store.setCmds({
 					codedone: data => {
@@ -48,81 +45,69 @@ export default class Reward extends Component {
 				}),
 			);
 		} else {
-			store.store.dispatch(
-				store.chatMsg('Unknown reward ${this.props.type}', 'System'),
-			);
+			store.store.dispatch(store.chatMsg('Unknown reward ${reward}', 'System'));
 			store.store.dispatch(store.doNav(import('./MainMenu.jsx')));
 		}
-	}
+	}, [reward]);
 
-	render() {
-		const props = this.props,
-			reward = props.type,
-			numberofcopies = props.amount ?? 1,
-			code = props.code;
-		return (
-			this.state.rewardList && (
-				<>
-					<input
-						type="button"
-						value="Done"
-						onClick={() => {
-							if (this.state.chosenReward) {
-								if (code === undefined) {
-									sock.userExec('addboundcards', {
-										c:
-											etgutil.encodeCount(numberofcopies) +
-											this.state.chosenReward.toString(32),
-									});
-									store.store.dispatch(store.doNav(import('./MainMenu.jsx')));
-								} else {
-									sock.userEmit('codesubmit2', {
-										code: code,
-										card: this.state.chosenReward,
-									});
-								}
+	const numberofcopies = props.amount ?? 1,
+		code = props.code;
+	return (
+		rewardList && (
+			<>
+				<input
+					type="button"
+					value="Done"
+					onClick={() => {
+						if (chosenReward) {
+							if (code === undefined) {
+								sock.userExec('addboundcards', {
+									c:
+										etgutil.encodeCount(numberofcopies) +
+										chosenReward.toString(32),
+								});
+								store.store.dispatch(store.doNav(import('./MainMenu.jsx')));
 							} else {
-								store.store.dispatch(
-									store.chatMsg('Choose a reward', 'System'),
-								);
+								sock.userEmit('codesubmit2', {
+									code: code,
+									card: chosenReward,
+								});
 							}
-						}}
+						} else {
+							store.store.dispatch(store.chatMsg('Choose a reward', 'System'));
+						}
+					}}
+					style={{
+						position: 'absolute',
+						left: '10px',
+						top: '40px',
+					}}
+				/>
+				{numberofcopies > 1 && (
+					<div
 						style={{
 							position: 'absolute',
-							left: '10px',
-							top: '40px',
+							left: '20px',
+							top: '100px',
+						}}>
+						You will get {numberofcopies} copies of the card you choose
+					</div>
+				)}
+				{!!code && <Components.ExitBtn x={10} y={10} />}
+				{rewardList.map((reward, i) => (
+					<Components.CardImage
+						key={i}
+						style={{
+							position: 'absolute',
+							left: `${100 + ((i / 12) | 0) * 108}px`,
+							top: `${272 + (i % 12) * 20}px`,
 						}}
+						card={Cards.Codes[reward]}
+						onClick={() => setChosenReward(reward)}
 					/>
-					{numberofcopies > 1 && (
-						<div
-							style={{
-								position: 'absolute',
-								left: '20px',
-								top: '100px',
-							}}>
-							You will get {numberofcopies} copies of the card you choose
-						</div>
-					)}
-					{!!code && <Components.ExitBtn x={10} y={10} />}
-					{this.state.rewardList.map((reward, i) => (
-						<Components.CardImage
-							key={i}
-							style={{
-								position: 'absolute',
-								left: `${100 + ((i / 12) | 0) * 108}px`,
-								top: `${272 + (i % 12) * 20}px`,
-							}}
-							card={Cards.Codes[reward]}
-							onClick={() => this.setState({ chosenReward: reward })}
-						/>
-					))}
-					<Components.Card
-						x={233}
-						y={10}
-						card={Cards.Codes[this.state.chosenReward]}
-					/>
-				</>
-			)
-		);
-	}
+				))}
+				<Components.Card x={233} y={10} card={Cards.Codes[chosenReward]} />
+			</>
+		)
+	);
 }