small change while selecting state and city

src/views/PrincipalDistributors/addPrincipalDistributor.js

@@ -46,19 +46,17 @@ const AddPrincipalDistributor = () => {
   const [selectedState, setSelectedState] = useState(null);
   const [selectedCity, setSelectedCity] = useState(null);
 
+   // Fetch all available states on mount
  useEffect(() => {
-    const fetchStates = async () => {
   const states = State.getStatesOfCountry("IN").map((state) => ({
     label: state.name,
     value: state.isoCode,
   }));
   setStateOptions(states);
-    };
-    fetchStates();
 }, []);
 
+// Fetch city options whenever selected state changes
 useEffect(() => {
-    const fetchCities = async () => {
   if (selectedState) {
     const cities = City.getCitiesOfState("IN", selectedState.value).map(
       (city) => ({
@@ -67,9 +65,9 @@ const AddPrincipalDistributor = () => {
       })
     );
     setCityOptions(cities);
+  } else {
+    setCityOptions([]); // Reset cities if no state selected
   }
-    };
-    fetchCities();
 }, [selectedState]);
 
   const handleInputChange = (e) => {
@@ -82,10 +80,21 @@ const AddPrincipalDistributor = () => {
 
   const handleStateChange = (event, newValue) => {
     setSelectedState(newValue);
+    setData((prev) => ({
+      ...prev,
+      state: newValue ? newValue.label : "",
+      city: "",
+    }));
+    setSelectedCity(null); // Clear city when state changes
+    setCityOptions([]); // Reset city options
   };
 
   const handleCityChange = (event, newValue) => {
     setSelectedCity(newValue);
+    setData((prev) => ({
+      ...prev,
+      city: newValue ? newValue.label : "",
+    }));
   };
 
   const handleFormSubmit = async (e) => {
@@ -97,8 +106,12 @@ const AddPrincipalDistributor = () => {
         !user.name ||
         !user.email ||
         !user.phone ||
-        !selectedState ||
+        !data.panNumber ||
-        !selectedCity ||
+        !data.tradeName ||
+        !data.gstNumber ||
+        !data.country ||
+        !data.state ||
+        !data.city ||
         !data.street ||
         !data.postalCode
       ) {
@@ -124,8 +137,10 @@ const AddPrincipalDistributor = () => {
             Name: user.name,
             phoneNumber: user.phone,
             isDefault: true,
-            state: selectedState.label, // Send selected state label
+            state: data.state,
-            city: selectedCity.label, // Send selected city label
+            city: data.city,
+            // state: selectedState.label, // Send selected state label
+            // city: selectedCity.label, // Send selected city label
           },
           {
             headers: {
@@ -421,7 +436,7 @@ const AddPrincipalDistributor = () => {
                   State*
                 </Typography>
               </Grid>
-              <Grid item xs={10}>
+              <Grid item xs={5}>
                 <Autocomplete
                   id="state"
                   options={stateOptions}
@@ -434,12 +449,24 @@ const AddPrincipalDistributor = () => {
                       fullWidth
                       variant="outlined"
                       label="Select State"
-                      error={!selectedState}
+                      // error={!selectedState}
-                      helperText={!selectedState ? "Select a state" : null}
+                      // helperText={!selectedState ? "Select a state" : null}
                     />
                   )}
                 />
               </Grid>
+              <Grid item xs={5}>
+                <TextField
+                  id="state"
+                  required
+                  type="text"
+                  fullWidth
+                  name="state"
+                  value={data.state}
+                  variant="outlined"
+                  onChange={handleDataChange}
+                />
+              </Grid>
             </Grid>
 
             {/* City */}
@@ -453,7 +480,7 @@ const AddPrincipalDistributor = () => {
                   City*
                 </Typography>
               </Grid>
-              <Grid item xs={10}>
+              <Grid item xs={5}>
                 <Autocomplete
                   id="city"
                   options={cityOptions}
@@ -466,12 +493,24 @@ const AddPrincipalDistributor = () => {
                       fullWidth
                       variant="outlined"
                        label="Select City"
-                      error={!selectedCity}
+                      // error={!selectedCity}
-                      helperText={!selectedCity ? "Select a city" : null}
+                      // helperText={!selectedCity ? "Select a city" : null}
                     />
                   )}
                 />
               </Grid>
+              <Grid item xs={5}>
+                <TextField
+                  id="city"
+                  required
+                  type="text"
+                  fullWidth
+                  name="city"
+                  value={data.city}
+                  variant="outlined"
+                  onChange={handleDataChange}
+                />
+              </Grid>
             </Grid>
 
             {/* Street */}

src/views/RetailDistributors/EditRetailDistributor.js

@@ -76,6 +76,8 @@ const EditRetailDistributor = () => {
   }, [selectedState]);
 
   const handleInputChange = (e) => {
+    // console.log(e.target.name, e.target.value);
+    // console.log(user);
     setUser({ ...user, [e.target.name]: e.target.value });
   };
 
@@ -571,11 +573,11 @@ const EditRetailDistributor = () => {
               </Grid>
               <Grid item xs={5}>
                 <TextField
-                  id="State"
+                  id="state"
                   required
                   type="text"
                   fullWidth
-                  name="State"
+                  name="state"
                   value={user.state}
                   variant="outlined"
                   onChange={handleInputChange}
@@ -609,11 +611,11 @@ const EditRetailDistributor = () => {
               </Grid>
               <Grid item xs={5}>
                 <TextField
-                  id="City"
+                  id="city"
                   required
                   type="text"
                   fullWidth
-                  name="City"
+                  name="city"
                   value={user.city}
                   variant="outlined"
                   onChange={handleInputChange}

src/views/RetailDistributors/addRetailDistributor.js

@@ -50,19 +50,17 @@ const AddRetailDistributor = () => {
   const [selectedCity, setSelectedCity] = useState(null);
   const [errors, setErrors] = useState({});
 
+ // Fetch all available states on mount
  useEffect(() => {
-    const fetchStates = async () => {
   const states = State.getStatesOfCountry("IN").map((state) => ({
     label: state.name,
     value: state.isoCode,
   }));
   setStateOptions(states);
-    };
-    fetchStates();
 }, []);
 
+// Fetch city options whenever selected state changes
 useEffect(() => {
-    const fetchCities = async () => {
   if (selectedState) {
     const cities = City.getCitiesOfState("IN", selectedState.value).map(
       (city) => ({
@@ -71,9 +69,9 @@ const AddRetailDistributor = () => {
       })
     );
     setCityOptions(cities);
+  } else {
+    setCityOptions([]); // Reset cities if no state selected
   }
-    };
-    fetchCities();
 }, [selectedState]);
 
   const handleInputChange = (e) => {
@@ -82,10 +80,21 @@ const AddRetailDistributor = () => {
 
   const handleStateChange = (event, newValue) => {
     setSelectedState(newValue);
+    setUser((prev) => ({
+      ...prev,
+      state: newValue ? newValue.label : "",
+      city: "",
+    }));
+    setSelectedCity(null); // Clear city when state changes
+    setCityOptions([]); // Reset city options
   };
 
   const handleCityChange = (event, newValue) => {
     setSelectedCity(newValue);
+    setUser((prev) => ({
+      ...prev,
+      city: newValue ? newValue.label : "",
+    }));
   };
 
   const handleFileChange = (e) => {
@@ -154,8 +163,8 @@ const AddRetailDistributor = () => {
       formData.append("email", user.email);
       formData.append("trade_name", user.trade_name);
       formData.append("address", user.address);
-      formData.append("state", selectedState.label);
+      formData.append("state", user.state);
-      formData.append("city", selectedCity.value);
+      formData.append("city", user.city);
       formData.append("district", user.district);
       formData.append("pincode", user.pincode);
       formData.append("mobile_number", user.mobile_number);
@@ -424,7 +433,7 @@ const AddRetailDistributor = () => {
                   State*
                 </Typography>
               </Grid>
-              <Grid item xs={10}>
+              <Grid item xs={5}>
                 <Autocomplete
                   options={stateOptions}
                   value={selectedState}
@@ -433,12 +442,24 @@ const AddRetailDistributor = () => {
                     <TextField
                       {...params}
                       id="state"
-                      required
+                      // required
                       variant="outlined"
                     />
                   )}
                 />
               </Grid>
+              <Grid item xs={5}>
+                <TextField
+                  id="state"
+                  required
+                  type="text"
+                  fullWidth
+                  name="state"
+                  value={user.state}
+                  variant="outlined"
+                  onChange={handleInputChange}
+                />
+              </Grid>
             </Grid>
 
             {/* City */}
@@ -452,7 +473,7 @@ const AddRetailDistributor = () => {
                   City*
                 </Typography>
               </Grid>
-              <Grid item xs={10}>
+              <Grid item xs={5}>
                 <Autocomplete
                   options={cityOptions}
                   value={selectedCity}
@@ -461,12 +482,24 @@ const AddRetailDistributor = () => {
                     <TextField
                       {...params}
                       id="city"
-                      required
+                      // required
                       variant="outlined"
                     />
                   )}
                 />
               </Grid>
+              <Grid item xs={5}>
+                <TextField
+                  id="city"
+                  required
+                  type="text"
+                  fullWidth
+                  name="city"
+                  value={user.city}
+                  variant="outlined"
+                  onChange={handleInputChange}
+                />
+              </Grid>
             </Grid>
 
             {/* District */}