Merge pull request #1013 from qnhn22/issue-906

changing what a unit represents can cause issue

src/client/app/components/unit/EditUnitModalComponent.tsx

@@ -19,6 +19,8 @@ import { TrueFalseType } from '../../types/items';
 import { notifyUser } from '../../utils/input'
 import { tooltipBaseStyle } from '../../styles/modalStyle';
 import { Dispatch } from 'types/redux/actions';
+import { useSelector } from 'react-redux';
+import { State } from 'types/redux/state';
 
 interface EditUnitModalComponentProps {
 	show: boolean;
@@ -53,6 +55,7 @@ export default function EditUnitModalComponent(props: EditUnitModalComponentProp
 	/* State */
 	// Handlers for each type of input change
 	const [state, setState] = useState(values);
+	const globalConversionsState = useSelector((state: State) => state.conversions.conversions);
 
 	const handleStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setState({ ...state, [e.target.name]: e.target.value });
@@ -162,6 +165,18 @@ export default function EditUnitModalComponent(props: EditUnitModalComponentProp
 		}
 	}
 
+	// Check if the unit is used in any conversion.
+	// 1. If the unit is used, the Unit Represent cannot be changed.
+	// 2. Otherwise, the Unit Represent can be changed.
+	const inConversions = () => {
+		for (const conversion of globalConversionsState) {
+			if (conversion.sourceId === state.id || conversion.destinationId === state.id) {
+				return true;
+			}
+		}
+		return false;
+	}
+
 	const tooltipStyle = {
 		...tooltipBaseStyle,
 		tooltipEditUnitView: 'help.admin.unitedit'
@@ -231,6 +246,7 @@ export default function EditUnitModalComponent(props: EditUnitModalComponentProp
 								name='unitRepresent'
 								type='select'
 								value={state.unitRepresent}
+								disabled={inConversions()}
 								onChange={e => handleStringChange(e)}>
 								{Object.keys(UnitRepresentType).map(key => {
 									return (<option value={key} key={key}>{translate(`UnitRepresentType.${key}`)}</option>)