diff options
Diffstat (limited to 'src/lib/address')
| -rw-r--r-- | src/lib/address/components/CreateAddress.jsx | 6 | ||||
| -rw-r--r-- | src/lib/address/components/EditAddress.jsx | 71 |
2 files changed, 72 insertions, 5 deletions
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 404143f9..5f041eb2 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -45,6 +45,7 @@ const CreateAddress = () => { addressMaps, selectedPosition, detailAddress, + setAddressMaps, } = useMaps(); useEffect(() => { @@ -56,6 +57,7 @@ const CreateAddress = () => { state.label.includes(detailAddress?.province) ); setValue('state', selectedState?.value); + setValue('street', detailAddress?.street); } }, [detailAddress, setValue]); @@ -70,10 +72,10 @@ const CreateAddress = () => { setState(dataState); }; loadState(); + setAddressMaps(''); }, []); const watchState = watch('state'); - console.log(watchState); useEffect(() => { setValue('city', ''); if (watchState) { @@ -228,7 +230,7 @@ const CreateAddress = () => { <label className='form-label mb-2'>PinPoint</label> {addressMaps ? ( <div className='flex gap-x-2 items-center'> - <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />{' '} + <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '} <span> {addressMaps} </span> </div> ) : ( diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 0b3b0aa3..7675db9d 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -42,19 +42,34 @@ const EditAddress = ({ id, defaultValues }) => { const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); const [pinedMaps, setPinedMaps] = useState(false); - const [tempAddress, setTempAddress] = useState(getValues('address_maps')); + const [tempAddress, setTempAddress] = useState(getValues('addressMap')); const { addressMaps, selectedPosition, detailAddress } = useMaps(); + console.log('ini adalah',); + useEffect(() => { if (addressMaps) { setTempAddress(addressMaps); - setValue('address_map', addressMaps); + setValue('addressMap', addressMaps); setValue('longtitude', selectedPosition.lng); setValue('latitude', selectedPosition.lat); } }, [addressMaps, selectedPosition, setValue]); useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + setValue('zip', detailAddress.postalCode); + const selectedState = states.find( + (state) => + detailAddress?.province.includes(state.label) || + state.label.includes(detailAddress?.province) + ); + setValue('state', selectedState?.value); + setValue('street', detailAddress?.route); + } + }, [detailAddress, setValue]); + + useEffect(() => { const loadProfile = async () => { const dataProfile = await addressApi({ id: auth.parentId }); setValue('industry', dataProfile.industryId); @@ -101,6 +116,21 @@ const EditAddress = ({ id, defaultValues }) => { } }, [watchState, setValue, getValues]); + useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + const selectedCities = cities.find( + (city) => + detailAddress?.district + .toLowerCase() + .includes(city.label.toLowerCase()) || + city.label + .toLowerCase() + .includes(detailAddress?.district.toLowerCase()) + ); + setValue('city', selectedCities?.value); + } + }, [cities, detailAddress, setValue]); + const watchCity = watch('city'); useEffect(() => { setValue('district', ''); @@ -122,6 +152,23 @@ const EditAddress = ({ id, defaultValues }) => { } }, [watchCity, setValue, getValues]); + useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + const selectedDistrict = districts.find( + (district) => + detailAddress.subDistrict + .toLowerCase() + .includes(district.label.toLowerCase()) || + district.label + .toLowerCase() + .includes(detailAddress.subDistrict.toLowerCase()) + ); + setValue('district', selectedDistrict?.value); + } + }, [districts, detailAddress, setValue]); + + + const watchDistrict = watch('district'); useEffect(() => { setValue('subDistrict', ''); @@ -145,6 +192,24 @@ const EditAddress = ({ id, defaultValues }) => { loadSubDistricts(); } }, [watchDistrict, setValue, getValues]); + + + useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + const selectedSubDistrict = subDistricts.find( + (district) => + detailAddress.village + .toLowerCase() + .includes(district.label.toLowerCase()) || + district.label + .toLowerCase() + .includes(detailAddress.village.toLowerCase()) + ); + + setValue('subDistrict', selectedSubDistrict?.value); + } + }, [subDistricts, detailAddress, setValue]); + const onSubmitHandler = async (values) => { const data = { ...values, @@ -228,7 +293,7 @@ const EditAddress = ({ id, defaultValues }) => { <label className='form-label mb-2'>PinPoint</label> {tempAddress ? ( <div className='flex gap-x-2 items-center'> - <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />{' '} + <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '} <span> {tempAddress} </span> </div> ) : ( |
