bugfix required state on update alamat

1 files changed, 43 insertions, 8 deletions

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index e315affe..9d70e8fc 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -12,6 +12,7 @@ import { toast } from 'react-hot-toast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Menu from '@/lib/auth/components/Menu';
 import useAddresses from '../hooks/useAddresses';
+import stateApi from '../api/stateApi';
 
 const CreateAddress = () => {
   const auth = useAuth();
@@ -28,23 +29,40 @@ const CreateAddress = () => {
     defaultValues,
   });
   const { addresses = [] } = useAddresses(); // Ensure addresses is an array
+  const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
   const [subDistricts, setSubDistricts] = useState([]);
   const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
 
   useEffect(() => {
-    const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
-        value: city.id,
-        label: city.name,
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
       }));
-      setCities(dataCities);
+      setState(dataState);
     };
-    loadCities();
+    loadState();
   }, []);
 
+  const watchState = watch('state');
+  useEffect(() => {
+    setValue('city', '');
+    if (watchState) {
+      const loadCities = async () => {
+        let dataCities = await cityApi({stateId: watchState});
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchState, setValue]);
+
   useEffect(() => {
     if (addresses) {
       let hasContactAddress = false;
@@ -100,6 +118,7 @@ const CreateAddress = () => {
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
+      state_id: values.state,
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
@@ -205,12 +224,26 @@ const CreateAddress = () => {
             </div>
 
             <div>
+              <label className='form-label mb-2'>Provinsi</label>
+              <Controller
+                name='state'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={states} />
+                )}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.state?.message}
+              </div>
+            </div>
+
+            <div>
               <label className='form-label mb-2'>Kota</label>
               <Controller
                 name='city'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={cities} />
+                  <HookFormSelect {...props} options={cities}  disabled={!watchState}/>
                 )}
               />
               <div className='text-caption-2 text-danger-500 mt-1'>
@@ -270,6 +303,7 @@ const validationSchema = Yup.object().shape({
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
   district: Yup.string().required('Harus di-pilih'),
 });
@@ -280,6 +314,7 @@ const defaultValues = {
   email: '',
   mobile: '',
   street: '',
+  state: '',
   city: '',
   district: '',
   subDistrict: '',