Merge pull request #610 from code4romania/fix/C4R-584

fix: [584] add correct mapping for organizationCities
code4romania · Aug 14, 2024 · bcabb10 · bcabb10
2 parents 075f533 + 8d87c2c
commit bcabb10
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 37 deletions.
diff --git a/frontend/src/pages/create-organziation/components/CreateOrganizationGeneral.tsx b/frontend/src/pages/create-organziation/components/CreateOrganizationGeneral.tsx
@@ -23,15 +23,14 @@ import {
 } from '../constants/CreateOrganization.constant';
 import GenericFormErrorMessage from '../../../components/generic-form-error-message/GenericFormErrorMessage';
 import PhoneNumberInput from '../../../components/IntlTelInput/PhoneNumberInput';
+import { County } from '../../../common/interfaces/county.interface';
 
 const CreateOrganizationGeneral = () => {
   const [readonly] = useState(false);
   const [county, setCounty] = useState<any>();
-  const [city, setCity] = useState<any>();
   const [organizationCounty, setOrganizationCounty] = useState<any>();
-  const [organizationCity, setOrganizationCity] = useState<any>();
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
-  const { cities, counties, issuers } = useNomenclature();
+  const { counties, issuers } = useNomenclature();
 
   const [organization, setOrganization, logo, setLogo, , , activeStepIndex, setActiveStepIndex] =
     useOutletContext<any>();
@@ -41,7 +40,8 @@ const CreateOrganizationGeneral = () => {
   const { t } = useTranslation(['general', 'common']);
 
   // queries
-  useCitiesQuery(county?.id);
+  const { data: cities } = useCitiesQuery(county?.id);
+  const { data: organizationCities } = useCitiesQuery(organizationCounty?.id);
   const { mutateAsync: validationMutate } = useCreateOrganizationRequestValidationMutation();
 
   const navigate = useNavigate();
@@ -119,27 +119,27 @@ const CreateOrganizationGeneral = () => {
     if (organization && organization.general) {
       reset(organization.general);
       setCounty(organization.general.county);
-      setCity(organization.general.city);
       setOrganizationCounty(organization.general.organizationCounty);
-      setOrganizationCity(organization.general.organizationCity);
     }
   }, [organization]);
 
-  useEffect(() => {
-    if (county && !readonly && !city) {
-      setValue('city', null);
+  const handleSetCounty = (newCounty: County) => {
+    if (county && newCounty.id === county.id) {
+      return;
     }
 
-    if (organizationCity && !readonly && !organizationCity) {
-      setValue('organizationCity', null);
-    }
-  }, [cities]);
+    setCounty(newCounty);
+    setValue('city', null);
+  }
 
-  useEffect(() => {
-    if (county && city && city.county.id !== county.id) {
-      setCity(null);
+  const handleSetOrganizationCounty = (newCounty: County) => {
+    if (organizationCounty && newCounty.id === organizationCounty.id) {
+      return;
     }
-  }, [county]);
+
+    setOrganizationCounty(newCounty);
+    setValue('organizationCity', null);
+  }
 
   const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
@@ -407,7 +407,7 @@ const CreateOrganizationGeneral = () => {
                         selected={value}
                         onChange={(e: any) => {
                           onChange(e);
-                          setCounty(e);
+                          handleSetCounty(e);
                         }}
                         readonly={readonly}
                       />
@@ -668,9 +668,7 @@ const CreateOrganizationGeneral = () => {
                         selected={value}
                         onChange={(e: any) => {
                           onChange(e);
-                          setOrganizationCounty(e);
-                          setValue('organizationCity', null);
-                          setOrganizationCity(null);
+                          handleSetOrganizationCounty(e)
                         }}
                         readonly={readonly}
                       />
@@ -688,7 +686,7 @@ const CreateOrganizationGeneral = () => {
                         config={{
                           id: 'create-organization-general__organization-city',
                           ...OrganizationGeneralConfig.organizationCity.config,
-                          collection: cities || [],
+                          collection: organizationCities || [],
                           displayedAttribute: 'name',
                         }}
                         error={errors[OrganizationGeneralConfig.organizationCity.key]?.message}

diff --git a/frontend/src/pages/organization/components/OrganizationGeneral/OrganizationGeneral.tsx b/frontend/src/pages/organization/components/OrganizationGeneral/OrganizationGeneral.tsx
@@ -21,13 +21,14 @@ import SectionHeader from '../../../../components/section-header/SectionHeader';
 import Select from '../../../../components/Select/Select';
 import Textarea from '../../../../components/Textarea/Textarea';
 import { useAuthContext } from '../../../../contexts/AuthContext';
-import { useCitiesQuery, useIssuersQuery } from '../../../../services/nomenclature/Nomenclature.queries';
+import { useCitiesQuery } from '../../../../services/nomenclature/Nomenclature.queries';
 import { useNomenclature, useSelectedOrganization } from '../../../../store/selectors';
 import { UserRole } from '../../../users/enums/UserRole.enum';
 import { OrganizationContext } from '../../interfaces/OrganizationContext';
 import { OrganizationGeneralConfig } from './OrganizationGeneralConfig';
 import FormInput from '../../../../components/form-input/FormInput';
 import PhoneNumberInput from '../../../../components/IntlTelInput/PhoneNumberInput';
+import { County } from '../../../../common/interfaces/county.interface';
 
 const OrganizationGeneral = () => {
   const [readonly, setReadonly] = useState(true);
@@ -111,20 +112,23 @@ const OrganizationGeneral = () => {
     watchCity,
   ]);
 
-  useEffect(() => {
-    if (county && !readonly) {
-      setValue('city', null);
+  const handleSetCounty = (newCounty: County) => {
+    if (newCounty.id === county.id) {
+      return;
     }
-  }, [cities]);
 
-  useEffect(() => {
-    if (organizationCounty && !readonly) {
-      const { organizationCity, organizationCounty: orgCounty } = getValues();
-      if (organizationCity?.countyId !== orgCounty.id) {
-        setValue('organizationCity', null);
-      }
+    setCounty(newCounty);
+    setValue('city', null);
+  }
+
+  const handleSetOrganizationCounty = (newCounty: County) => {
+    if (newCounty.id === organizationCounty.id) {
+      return;
     }
-  }, [organizationCities]);
+
+    setOrganizationCounty(newCounty);
+    setValue('organizationCity', null);
+  }
 
   const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
@@ -449,8 +453,7 @@ const OrganizationGeneral = () => {
                         selected={value}
                         onChange={(e: any) => {
                           onChange(e);
-                          setCounty(e);
-                          setValue('city', null, { shouldValidate: true });
+                          handleSetCounty(e);
                         }}
                         readonly={readonly}
                       />
@@ -723,7 +726,7 @@ const OrganizationGeneral = () => {
                         selected={value}
                         onChange={(e: any) => {
                           onChange(e);
-                          setOrganizationCounty(e);
+                          handleSetOrganizationCounty(e)
                         }}
                         readonly={readonly}
                       />