ADD - Validation for duplicated unit names (#188)

Signed-off-by: RaenonX <[email protected]>

src/components/pages/gameData/nameRef/entry.tsx

@@ -14,9 +14,10 @@ import {ArrayDataFormOnChangedHandler} from '../../../elements/posts/form/array'
 type UnitNameRefEntryProps = {
   entry: UnitNameRefEntryApi,
   onChanged: ArrayDataFormOnChangedHandler<UnitNameRefEntryApi>,
+  isNameInvalid: boolean,
 }
 
-export const UnitNameRefEntry = ({entry, onChanged}: UnitNameRefEntryProps) => {
+export const UnitNameRefEntry = ({entry, onChanged, isNameInvalid}: UnitNameRefEntryProps) => {
   const {t, lang} = useI18n();
   const {unitInfoMap} = useUnitInfo();
 
@@ -25,15 +26,15 @@ export const UnitNameRefEntry = ({entry, onChanged}: UnitNameRefEntryProps) => {
   // This is the height of `form-control`
   const unitIconHeight = 'calc(1.5em + 0.75rem + 2px)';
 
-  const isValid = !!unitInfo;
+  const isNameInputAllowed = !!unitInfo;
 
   return (
     <div className="bg-black-32 rounded p-2">
       <Form.Row>
         <Col lg={2}>
           <Form.Label>{t((t) => t.game.nameRef.unitId)}</Form.Label>
           <Form.Control
-            isValid={isValid} isInvalid={!isValid}
+            isValid={isNameInputAllowed} isInvalid={!isNameInputAllowed}
             onChange={(e) => {
               if (Number(e.target.value) || !e.target.value) {
                 onChanged('unitId')(+e.target.value);
@@ -70,8 +71,8 @@ export const UnitNameRefEntry = ({entry, onChanged}: UnitNameRefEntryProps) => {
           <Form.Label>{t((t) => t.game.nameRef.desiredName)}</Form.Label>
           <Form.Control
             onChange={(e) => onChanged('name')(e.target.value)}
-            isInvalid={!entry.name}
-            disabled={!isValid}
+            isInvalid={!entry.name || isNameInvalid}
+            disabled={!isNameInputAllowed}
             value={entry.name}
           />
         </Col>

src/components/pages/gameData/nameRef/main.test.tsx

@@ -236,4 +236,17 @@ describe('Name reference management', () => {
     typeInput(unitIdInput, '10950101', {rerender});
     expect(updateButton).toBeEnabled();
   });
+
+  it('disables update if multiple units share the same name', async () => {
+    const {rerender} = renderReact(() => <UnitNameRefPage/>, {hasSession: true, user: {isAdmin: true}});
+
+    const unitNameInput = await screen.findByDisplayValue('Furis');
+    userEvent.clear(unitNameInput);
+    typeInput(unitNameInput, 'G!Leon', {rerender});
+
+    await waitFor(() => expect(unitNameInput).toHaveClass('is-invalid'));
+
+    const updateButton = screen.getByText(translationEN.misc.update);
+    expect(updateButton).toBeDisabled();
+  });
 });

src/components/pages/gameData/nameRef/manage.tsx

@@ -10,6 +10,7 @@ import {
   UnitNameRefEntry as UnitNameRefEntryApi, ApiResponseCodeUtil,
 } from '../../../../api-def/api';
 import {useI18n} from '../../../../i18n/hook';
+import {getElementCounter} from '../../../../utils/counter';
 import {overrideObject} from '../../../../utils/override';
 import {ApiRequestSender} from '../../../../utils/services/api/requestSender';
 import {useUnitInfo} from '../../../../utils/services/resources/unitInfo/hooks';
@@ -40,7 +41,13 @@ export const UnitNameRefManagement = ({refs, uid}: RefsManagementProps) => {
     isInit: true,
   });
   const {unitInfoMap} = useUnitInfo();
-  const isValid = refsStatus.refs.every((entry) => !!unitInfoMap.get(entry.unitId) && !!entry.name);
+
+  const nameCounter = getElementCounter(refsStatus.refs.map((ref) => ref.name));
+
+  const isValid = (
+    refsStatus.refs.every((entry) => !!unitInfoMap.get(entry.unitId) && !!entry.name) &&
+    [...nameCounter.values()].every((count) => count === 1)
+  );
   const isJustUpdated = !!refsStatus.updateStatus && ApiResponseCodeUtil.isSuccess(refsStatus.updateStatus);
 
   const generateNewElement: () => UnitNameRefEntryApi = () => ({
@@ -80,7 +87,12 @@ export const UnitNameRefManagement = ({refs, uid}: RefsManagementProps) => {
           [key]: newValue,
         })}
         generateNewElement={generateNewElement}
-        renderEntries={(element, onChange) => <UnitNameRefEntry entry={element} onChanged={onChange}/>}
+        renderEntries={(element, onChange) => (
+          <UnitNameRefEntry
+            entry={element} onChanged={onChange}
+            isNameInvalid={(nameCounter.get(element.name) || 0) > 1}
+          />
+        )}
       />
       <hr/>
       <Row className="float-right">