Create User Profile

[broach44]

User Story

As a user, I would like to be prompted when I first authenticate to create a profile with information about myself

AC

WHEN I authenticate THEN I should be prompted to create a profile automatically if a collection does not already exist for my user id

Dev Notes

• Create a function within App.js that will check both that a user is authed and whether a collection exists with the uid of the user that is currently signed in.
• If the collection does not exist they should be prompted to fill out their information in a modal form.
• Create a function that when the user clicks to save their information it will be added to the database and help start the customization process for the user. This can be accomplished by creating a conditional statement that will result in rendering either the route for the user's home page or the route to the new profile page
• Create a axios post function on the profileData.js that will send the information input back to the database and create a new entry.
• On the NewProfile component create a form with inputs for the following fields:
  1. First Name
  2. Last Name
  3. City
  4. State
  5. Country (only if needed)
• In order to keep data accurate and allow for mapping functionality later the city and state fields should be a "picker" style so the user can't enter locations that are not valid. Review the comment below to find documentation on pickers for React.
• For each of the above forms create a function that will collect the data and send it to state.
• Once all the data has been collected in state create the object and call the post function.
• Once they have created their user profile they would be routed to the user profile page

[broach44]

Use a picker for the country, region, selector. This should have the state and city's as options so the user is unable to enter something that is invalid. Use the reference here: https://www.npmjs.com/package/react-country-region-selector

[broach44]

Modal with Portal in React: https://www.freecodecamp.org/news/how-to-render-modals-in-react-bbe9685e947e/