Learning Path App - Update User Profile pages/service

[biozal]

As a developer, I need to reactor the Menu.tsx page in the Learning Path to abstract out the User Profile information into a separate component along with breaking down the page into a proper structure of small components, then allow the user to route to a new page to edit the user profile information and save that back to the database. The code changes should be posted a new PR to this repository:
https://github.com/couchbase-examples/ionic-cblite-learning-path

The following items need to be completed for this task to be completed:

1. The Menu.tsx isn't a menu page, it's a full page with a Split View and it has all the logic for both the left and right side of the Split View. This isn't following React best practices for small components and instead shoves everything into a single page. The page should be refactored in the following ways:

• The Menu.tsx is actual the main page of the application and should be refactored to be named "MainPage.tsx".
• The following code should be refactored out into separate components that are saved in a folder called components:
  • The code for displaying the header of the menu should be in a new component called "MenuHeader"
  • The code for displaying the user profile in the left side of the Split View should be refactored into a new component called "UserProfileMini"
  • The code for the actual menu items should be refactored into a new component called "NavigationMenu"
  • The code for routing should be refactored out to a higher level of the application instead of the menu.

2. The UserProfileMini component should be updated

• The component should pull the UserProfile from the UserProfile Provider/Context and display the proper information about the current logged in user include the profile picture provided from the database that is stored as a blob. If there is no blob image for the user, a default user provide images should be provided instead. A link should be provided for the user to update the user profile and set an image. This should route to the proper page for editing a User Profile.

3. The page for editing UserProfiles is called UpdateUserProfile, yet the pages for Editing other data don't follow the same convention (AuditEditor, ProjectEditor). Name the UpdateUserProfile Component to UserProfileEditor.

4. The page should provide the ability for the following functionality:

• It should be able to retrieve a UserProfile from the UserProfile Provider/Context for editing.

• It should use the Ionic plugin to get an image from the mobile device stored on the phone for setting to the user profile.

• It should allow the user to edit the following fields:

  • First Name
  • Last Name
  • Department
  • Job Title
  • User Profile Image

• When the user saves the user profile, it should call the user profile service and update the document using the rbac scope and userProfiles collection.

• The code that saves the user profile should use the similar example that is provided in the Android learning path to save these out using Key/Value pairs as this is an example on how to use KV with a mutable document to save the information to the database.

• If a Blob image is changed the database must run a compact to remove the pointers to the older blob images that are no longer referenced.

  5. Once the user profile is updated in the database AND is updated in the provider/context, the editor should forward the user back to the main page of the application. When the user displays the menu it should instantly see any changes that were made to the user profile show up in the UserProfileMini component.

A reminder that the code for this is used for the tutorial on how to use the following features of the CBL-Ionic framework:

• MutableDocuments API to set Key Value pairs to save information from the database
• Retrieve documents from a collection
• Create and update Blob information on a document
• Run compact on a database if the blob image is changed to properly remove any previous image pointers.

Please review the Android learning path to make sure you fully understand how the other learning paths provide the tutorial on this code:
https://developer.couchbase.com/android-kotlin-learning-key-value?learningPath=learn/android-kotlin-sync

A PR should be posted showing the editor UI and the changes should be fully tested to provide out functionality works.