fix: geo location dropdown bugfixes in playground (#181)

* fix: geo location dropdown bugfixes in playground * feat: added 'PlaceholderMenuItem' component to display in case of no records for a dropdown list
razorpay · Nov 18, 2024 · 01188b3 · 01188b3
1 parent 03b688c
commit 01188b3
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 60 deletions.
diff --git a/packages/i18nify-playground/src/components/countryDropdown/index.jsx b/packages/i18nify-playground/src/components/countryDropdown/index.jsx
@@ -2,6 +2,8 @@ import { Box, MenuItem, Select, Typography } from '@mui/material';
 import { getAllCountries } from '@razorpay/i18nify-js';
 import React, { useEffect, useState } from 'react';
 
+import PlaceholderMenuItem from 'src/components/placeholderMenuItem';
+
 const CountryDropdown = ({
   label = 'Select Country',
   value,
@@ -38,21 +40,23 @@ const CountryDropdown = ({
           ...selectStyle,
         }}
       >
-        {countryList.map((country) => (
-          <MenuItem key={country.code} value={country.code}>
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                textOverflow: 'initial',
-              }}
-            >
-              <div width="30px">
-                {country.code} - {country.country_name}
-              </div>
-            </Box>
-          </MenuItem>
-        ))}
+        {countryList.length === 0 ?
+          <PlaceholderMenuItem /> :
+          countryList.map((country) => (
+            <MenuItem key={country.code} value={country.code}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  textOverflow: 'initial',
+                }}
+              >
+                <div width="30px">
+                  {country.code} - {country.country_name}
+                </div>
+              </Box>
+            </MenuItem>
+          ))}
       </Select>
     </>
   );

diff --git a/packages/i18nify-playground/src/components/placeholderMenuItem/index.js b/packages/i18nify-playground/src/components/placeholderMenuItem/index.js
@@ -0,0 +1 @@
+export { default } from './placeholderMenuItem';
diff --git a/packages/i18nify-playground/src/components/placeholderMenuItem/placeholderMenuItem.jsx b/packages/i18nify-playground/src/components/placeholderMenuItem/placeholderMenuItem.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { MenuItem } from '@mui/material';
+
+import { MENU_ITEM_PLACEHOLDER_CONTENT } from 'src/constants/geo';
+
+const PlaceholderMenuItem = (props) => {
+  const { content = MENU_ITEM_PLACEHOLDER_CONTENT } = props;
+  return <MenuItem disabled>{content}</MenuItem>;
+};
+
+export default PlaceholderMenuItem;
diff --git a/packages/i18nify-playground/src/components/stateDropdown/index.jsx b/packages/i18nify-playground/src/components/stateDropdown/index.jsx
@@ -1,6 +1,8 @@
 import { Box, MenuItem, Select, Typography } from '@mui/material';
 import React from 'react';
 
+import PlaceholderMenuItem from 'src/components/placeholderMenuItem';
+
 const StateDropdown = ({ label = 'Select State', list, onChange, value }) => {
   return (
     <>
@@ -16,21 +18,23 @@ const StateDropdown = ({ label = 'Select State', list, onChange, value }) => {
           mb: 4,
         }}
       >
-        {list.map((state) => (
-          <MenuItem key={state.code} value={state.code}>
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                textOverflow: 'initial',
-              }}
-            >
-              <div width="30px">
-                {state.code} - {state.name}
-              </div>
-            </Box>
-          </MenuItem>
-        ))}
+        {list.length === 0 ?
+          <PlaceholderMenuItem /> :
+          list.map((state) => (
+            <MenuItem key={state.code} value={state.code}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  textOverflow: 'initial',
+                }}
+              >
+                <div width="30px">
+                  {state.code} - {state.name}
+                </div>
+              </Box>
+            </MenuItem>
+          ))}
       </Select>
     </>
   );

diff --git a/packages/i18nify-playground/src/constants/geo/index.js b/packages/i18nify-playground/src/constants/geo/index.js
@@ -1 +1,2 @@
 export const ALLOWED_COUNTRIES = ['IN', 'MY', 'FR', 'DE', 'US'];
+export const MENU_ITEM_PLACEHOLDER_CONTENT = 'No data available';
diff --git a/packages/i18nify-playground/src/pages/geo/getCities.jsx b/packages/i18nify-playground/src/pages/geo/getCities.jsx
@@ -14,6 +14,7 @@ import { ALLOWED_COUNTRIES } from 'src/constants/geo';
 import CodeEditor from 'src/components/codeEditor';
 import CountryDropdown from 'src/components/countryDropdown';
 import StateDropdown from 'src/components/stateDropdown';
+import PlaceholderMenuItem from 'src/components/placeholderMenuItem';
 
 // ----------------------------------------------------------------------
 
@@ -38,6 +39,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 +54,8 @@ export default function GetCities() {
 
   useEffect(() => {
     if (!stateInp) return;
+    setCityInp('');
+    setCities([]);
     getCities(countryInp, stateInp).then((res) => {
       setCities(res);
       setCityInp(res[0].name);
@@ -106,7 +112,7 @@ export default function GetCities() {
           />
           <StateDropdown
             value={stateInp}
-            onChange={(e) => setStateInp(e)}
+            onChange={(state) => setStateInp(state)}
             list={stateList}
           />
 
@@ -119,20 +125,23 @@ export default function GetCities() {
               marginRight: 1,
               width: '100%',
             }}
+            onChange={(e) => setCityInp(e.target.value || '')}
           >
-            {cities.map((city) => (
-              <MenuItem key={city.name} value={city.name}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    textOverflow: 'initial',
-                  }}
-                >
-                  <div width="30px">{city.name}</div>
-                </Box>
-              </MenuItem>
-            ))}
+            {cities.length === 0 ?
+              <PlaceholderMenuItem /> :
+              cities.map((city) => (
+                <MenuItem key={city.name} value={city.name}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      textOverflow: 'initial',
+                    }}
+                  >
+                    <div width="30px">{city.name}</div>
+                  </Box>
+                </MenuItem>
+              ))}
           </Select>
         </Grid>
         {!isMobile && (

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
@@ -14,6 +14,7 @@ import { ALLOWED_COUNTRIES } from 'src/constants/geo';
 import CodeEditor from 'src/components/codeEditor';
 import CountryDropdown from 'src/components/countryDropdown';
 import StateDropdown from 'src/components/stateDropdown';
+import PlaceholderMenuItem from 'src/components/placeholderMenuItem';
 
 // ----------------------------------------------------------------------
 
@@ -38,6 +39,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 +54,8 @@ export default function GetZipcodes() {
 
   useEffect(() => {
     if (!stateInp) return;
+    setZipcodeInp('');
+    setZipcodes([]);
     getZipcodes(countryInp, stateInp).then((res) => {
       setZipcodes(res);
       setZipcodeInp(res[0]);
@@ -103,7 +109,7 @@ export default function GetZipcodes() {
           />
           <StateDropdown
             value={stateInp}
-            onChange={(e) => setStateInp(e)}
+            onChange={(state) => setStateInp(state)}
             list={stateList}
           />
 
@@ -116,20 +122,23 @@ export default function GetZipcodes() {
               marginRight: 1,
               width: '100%',
             }}
+            onChange={(e) => setZipcodeInp(e.target.value || '')}
           >
-            {zipcodes.map((zipcode) => (
-              <MenuItem key={zipcode} value={zipcode}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    textOverflow: 'initial',
-                  }}
-                >
-                  <div width="30px">{zipcode}</div>
-                </Box>
-              </MenuItem>
-            ))}
+            {zipcodes.length === 0 ?
+              <PlaceholderMenuItem /> :
+              zipcodes.map((zipcode) => (
+                <MenuItem key={zipcode} value={zipcode}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      textOverflow: 'initial',
+                    }}
+                  >
+                    <div width="30px">{zipcode}</div>
+                  </Box>
+                </MenuItem>
+              ))}
           </Select>
         </Grid>
         {!isMobile && (