fix: geo location dropdown bugfixes in playground

razorpay · Oct 24, 2024 · efe9a60 · efe9a60
1 parent 03b688c
commit efe9a60
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/packages/i18nify-playground/src/pages/geo/getCities.jsx b/packages/i18nify-playground/src/pages/geo/getCities.jsx
@@ -38,6 +38,9 @@ export default function GetCities() {
 
   useEffect(() => {
     setStateInp('');
+    setStateList([]);
+    setCityInp('');
+    setCities([]);
     setCode('');
     getStates(countryInp).then((res) => {
       const states = Object.entries(res).map(([_code, state]) => ({
@@ -50,6 +53,8 @@ export default function GetCities() {
 
   useEffect(() => {
     if (!stateInp) return;
+    setCityInp('');
+    setCities([]);
     getCities(countryInp, stateInp).then((res) => {
       setCities(res);
       setCityInp(res[0].name);
@@ -106,7 +111,7 @@ export default function GetCities() {
           />
           <StateDropdown
             value={stateInp}
-            onChange={(e) => setStateInp(e)}
+            onChange={(state) => setStateInp(state)}
             list={stateList}
           />
 
@@ -119,6 +124,7 @@ export default function GetCities() {
               marginRight: 1,
               width: '100%',
             }}
+            onChange={(e) => setCityInp(e.target.value || '')}
           >
             {cities.map((city) => (
               <MenuItem key={city.name} value={city.name}>

diff --git a/packages/i18nify-playground/src/pages/geo/getStates.jsx b/packages/i18nify-playground/src/pages/geo/getStates.jsx
@@ -27,6 +27,8 @@ export default function GetStates() {
   }, []);
 
   useEffect(() => {
+    setStateVal('');
+    setStateList([]);
     getStates(countryInp).then((res) => {
       setCode(JSON.stringify(res, null, 2));
       const data = Object.keys(res).map((stateCode) => ({
@@ -80,13 +82,13 @@ export default function GetStates() {
           <CountryDropdown
             value={countryInp}
             list={countryList}
-            onChange={(e) => setCountryInp(e)}
+            onChange={(country) => setCountryInp(country)}
           />
           <StateDropdown
             label="List of States"
             value={stateVal}
             list={stateList}
-            onChange={(e) => setStateVal(e)}
+            onChange={(state) => setStateVal(state)}
           />
         </Grid>
         {!isMobile && (

diff --git a/packages/i18nify-playground/src/pages/geo/getZipcodes.jsx b/packages/i18nify-playground/src/pages/geo/getZipcodes.jsx
@@ -38,6 +38,9 @@ export default function GetZipcodes() {
 
   useEffect(() => {
     setStateInp('');
+    setStateList([]);
+    setZipcodeInp('');
+    setZipcodes([]);
     setCode('');
     getStates(countryInp).then((res) => {
       const states = Object.entries(res).map(([_code, state]) => ({
@@ -50,6 +53,8 @@ export default function GetZipcodes() {
 
   useEffect(() => {
     if (!stateInp) return;
+    setZipcodeInp('');
+    setZipcodes([]);
     getZipcodes(countryInp, stateInp).then((res) => {
       setZipcodes(res);
       setZipcodeInp(res[0]);
@@ -103,7 +108,7 @@ export default function GetZipcodes() {
           />
           <StateDropdown
             value={stateInp}
-            onChange={(e) => setStateInp(e)}
+            onChange={(state) => setStateInp(state)}
             list={stateList}
           />
 
@@ -116,6 +121,7 @@ export default function GetZipcodes() {
               marginRight: 1,
               width: '100%',
             }}
+            onChange={(e) => setZipcodeInp(e.target.value || '')}
           >
             {zipcodes.map((zipcode) => (
               <MenuItem key={zipcode} value={zipcode}>