[CLIENT] create Profile page

[spencerlepine]

Overview

Create profile page to customize details, images, and preferences

Ticket

Trello Ticket: #102

Checklist

• [x] React Router to profile page
• [x] Write + Render static components
• [x] create static props in components
• [x] create state for forms/buttons in componets
• [x] create Profile context with static data
• [x] connect component to Context
• [x] Connect componts buttons to context
• [x] Connect Context to API
• [x] Work on User Interface / styling components
• [x] [OPTIONAL] Add screen shot to PR?

Wireframes

Features

Profile Page Features:

• User can visit their profile page
• User can view/update display name with text input, alphabet characters with 15 char limit
• User can view/update bio with text input, alphabet characters with 255 char limit
• User can view/update zodiac sign from dropdown selection
• User can view/update gender from dropdown
• User can view/update preference from dropdown
• User can view/update breed with text input
• User can view/update list of chosen zip codes, add/remove a zip code to the list
• OPTIONAL: User can view/update breed preferences

Profile Page Images Carousel Features:

• User can view a photo carousel
• Carousel will have up to 9 photos
• User can rearrange the order of the photos
• User can remove photo from the carousel
• User can upload new photo to the carousel (add button is displayed in LAST open carousel slot when less than 9 exist)
• User can upload a photo or type a URL in popup modal

Profile Page Preference Section Features:

• User can select preferred gender
• User can view to list of zip codes they are apart of
• User can add/remove to list of zip codes they are apart of