From cd28d0fffcbfcfdf937ba37cd085883e53e49612 Mon Sep 17 00:00:00 2001
From: Nicholas Sorokin <nicholas.sorokin@hotmail.com>
Date: Sat, 17 Aug 2024 17:24:21 +0930
Subject: [PATCH 1/2] fix: sort cards by name in the select card form

Fixes #5
---
 src/components/form/SelectCardForm.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/form/SelectCardForm.tsx b/src/components/form/SelectCardForm.tsx
index f24adbd..60c02c5 100644
--- a/src/components/form/SelectCardForm.tsx
+++ b/src/components/form/SelectCardForm.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
-import { Card } from '../../context/universe/Card';
-import { Button } from '../common/Button';
-import { Select } from '../common/Select';
+import {useEffect, useState} from 'react';
+import {Card} from '../../context/universe/Card';
+import {Button} from '../common/Button';
+import {Select} from '../common/Select';
 
 export function SelectCardForm({
 	options,
@@ -13,6 +13,7 @@ export function SelectCardForm({
 	onSelectCard: (card: Card['name']) => void;
 }) {
 	const [cardName, setCardName] = useState(options[0]);
+	const orderedOptions = options.sort((a, b) => a.localeCompare(b));
 
 	useEffect(() => {
 		if (options.length === 0) {
@@ -38,7 +39,7 @@ export function SelectCardForm({
 					setCardName(e.target.value);
 				}}
 			>
-				{options.map((cardName) => (
+				{orderedOptions.map((cardName) => (
 					<option value={cardName} key={cardName}>
 						{cardName}
 					</option>

From e646c4896ff507ba6e837c36ecc08889d282b481 Mon Sep 17 00:00:00 2001
From: Nicholas Sorokin <nicholas.sorokin@hotmail.com>
Date: Sat, 17 Aug 2024 17:30:39 +0930
Subject: [PATCH 2/2] refactor: don't mutate props

---
 src/components/form/SelectCardForm.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/form/SelectCardForm.tsx b/src/components/form/SelectCardForm.tsx
index 60c02c5..ced1d2b 100644
--- a/src/components/form/SelectCardForm.tsx
+++ b/src/components/form/SelectCardForm.tsx
@@ -1,7 +1,7 @@
-import {useEffect, useState} from 'react';
-import {Card} from '../../context/universe/Card';
-import {Button} from '../common/Button';
-import {Select} from '../common/Select';
+import { useEffect, useMemo, useState } from 'react';
+import { Card } from '../../context/universe/Card';
+import { Button } from '../common/Button';
+import { Select } from '../common/Select';
 
 export function SelectCardForm({
 	options,
@@ -13,7 +13,10 @@ export function SelectCardForm({
 	onSelectCard: (card: Card['name']) => void;
 }) {
 	const [cardName, setCardName] = useState(options[0]);
-	const orderedOptions = options.sort((a, b) => a.localeCompare(b));
+	const orderedOptions = useMemo(
+		() => [...options].sort((a, b) => a.localeCompare(b)),
+		[options],
+	);
 
 	useEffect(() => {
 		if (options.length === 0) {