Skip to content
This repository has been archived by the owner on Oct 29, 2024. It is now read-only.

Dependent Dropdown & Form Validation #61

Merged
merged 5 commits into from
Oct 4, 2022

Conversation

anujverma-eng
Copy link
Contributor

@anujverma-eng anujverma-eng commented Oct 4, 2022

Hi @roopeshsn, I have added the Dependent dropdown in ShippingScreen, and few
Changes I Made

  • used Ternary in useState Hook, as the first time the User Came, he has nothing in Cart, so this can generate a React Error **A component is changing an uncontrolled input to be controlled. !! **
  • Created an Array of Objects [ Locations ] as a separate module [ used in the ShippingScreen component].
  • we will Iterate through the Locations array, depending on the hierarchy (1st Lvl - Countries > 2nd Lvl - State > 3rd Lvl Cities ).
  • Once the User Selects the Countries, we are looping through the Locations array, and with the find method finding the Country and depends on the Country we assign the States to the State Dropdown, similarly for Cities depend on states.
  • In OrderModel I've changed the Pincode type to STRING. (this results in MongoDB Error)
    'No write concern mode named 'majority`' found in replica set configuration' error
    and this Error I've solved in the MONGODB_URI in .env File [ I removed the &w=majority part at the end of URI ]
    StackOverflow Answers
  • I've added the comments in code, wherever I've changed something

And Now,
Our Users Can Select the Cities, depending on State, depending on Country
and the Pincode we will be using as STRING only.
image
image
image

I hope this feature will enhance the UX a little more, although this is not so great feature, but will help to maintain the user experience more

Also pls merge the Updated request (Deleted Temporary Code Runner)

@anujverma-eng anujverma-eng marked this pull request as ready for review October 4, 2022 10:29
Copy link
Owner

@roopeshsn roopeshsn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work @anujverma-eng It seems you haven't formatted the code properly. Have you seen the prettier config file? There is a command to format files recursively. Take a look at the package.json file.

@anujverma-eng
Copy link
Contributor Author

anujverma-eng commented Oct 4, 2022

I've formatted the code accordingly in Both files

  1. ShippingScreen.js
  2. LocationsAvailable.js

image

@roopeshsn
Copy link
Owner

Everything works fine right from entering the address to placing the order.

@anujverma-eng
Copy link
Contributor Author

ok Great, so can we Close this Pull request?
Requesting you to Merge this commit to the main code.
Thanks

@roopeshsn roopeshsn merged commit b5f39ae into roopeshsn:master Oct 4, 2022
@roopeshsn roopeshsn added hacktoberfest-accepted Accepted PR for hactoberfest and removed in progress labels Oct 4, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
hacktoberfest-accepted Accepted PR for hactoberfest
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants