belindas-closet-android_2_97_navigation-bar

[Annelisebx]

Resolves Issue 97

As a developer, I did the following:

• create a top navigation bar displaying tabs that separate the products by product type
• each tab is a 'category' of items
• the tab should be visible from all product screens (in-progress)

We also want to include unit tests if and when possible to make sure we're getting full coverage of our code. This will simulate a real world environment where tests are extremely important.

Unit Test Example

[taylorpapke]

@Annelisebx I've updated and added a comment to user story #74 as I realized it needed some more context. Yes, what you have implemented is the right idea but I do have a couple comments:

1. After seeing how the tabs look and appear to function, I think we should move to a dropdown that lists the categories since there will be 15 or so categories.
2. The dropdown can come in a later PR. For now, I think we should be concerned with just creating a navigation bar with the back button, whatever other button (edit, etc.) the page has and we could simple have a button labeled "products" that can redirect to the home page with all categories until we can set it up as a dropdown with the different categories routing to those specific product categories.
   I also think you should reach out to @kkennedy-gh because he is essentially working on the same thing and has come up with a good strategy for completing this rather daunting task.

[taylorpapke]

This is the right idea but I'd like to have the back and edit buttons still functional and in their proper place (not overlapping). I think we should move from the tabs to a dropdown menu but we can simply just have a "products" button for the sake of this PR and have it redirect to the home page.

[Annelisebx]

@taylorpapke Hi Taylor,

1. I understand what you are saying about drop down/drawers opposed to tabs. I have removed those.
2. The navigation bar function and layout makes sense. One question: Which screens does this need to be on? It is currently on the IndividualProduct page. The back arrow should go back to the the 'Home' screen? This is currently the only screen that shows a list of products, correct?

Thank you for all this input.

[taylorpapke]

@taylorpapke Hi Taylor,

1. I understand what you are saying about drop down/drawers opposed to tabs. I have removed those.
2. The navigation bar function and layout makes sense. One question: Which screens does this need to be on? It is currently on the IndividualProduct page. The back arrow should go back to the the 'Home' screen? This is currently the only screen that shows a list of products, correct?

Thank you for all this input.

@Annelisebx

• This navigation bar should be on each page. @kkennedy-gh has come up with a good strategy on implementing this on nsc-events so I would recommend looking at nsc-events-android and reaching out to him about how he is going about placing the nav bar on each page in separate issues/PR's.
• The back arrow should always route back to the page that you came from so individual product page should go back to the product page. Product page should go back to the home page. Home page shows a list of product categories. Product page shows a list of products from a product category.

[tinpham5614]

I just want to add a YouTube tutorial as a reference for Scaffold, Top App Bar, ArrowBack, etc.
You can modify other actions to suit the requirements
https://www.youtube.com/watch?v=EqCvUETekjk&t=352s

[Annelisebx]

This is my understanding of the flow and what I am trying to implement through a TopAppBar.

Updated:

• added 'Menu' icon to ProductDetails

Next:

• Get menu to open and list product categories

[taylorpapke]

Hi @Annelisebx,
I like the diagram you provided and what you have done with the nav bar. I now realize that the scope of this user story is quite large given the fact that it affects every pages structure. I’ve decided to narrow the scope for this user story (see the updated version and comment here. Just do the same thing that you have done here for the rest of the pages and don’t worry about any functionality for the product menu icon. I will need to get more info from the client on how they want this to function. This will allow me a visual aid to try to gather more requirements from them. I will create a new user story in our next sprint to deal with functionality.

Let's just fix the merge conflicts and this should be good for this screen.

[taylorpapke]

helpful doc for merge conflicts: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-on-github

[Robel-003]

Just need to resolve some conflicts in the main file and you should be good.

[Annelisebx]

Resolved conflicts in Main on Home.kt file

[brinkbrink]

Let us know if you need any support with the merge conflict! GitHub docs all about merge conflicts.

[Annelisebx]

@brinkbrink @taylorpapke @Robel-003
Merge conflicts resolved. Ready for review.

• Menu icon added to both ProductDetail.kt and IndividualProduct.kt.
• Icon is placed to right of edit button and not overlapping.
• No functionality yet. All other pages/screens remain the same.

[TuongPhamM]

I see you added Menu button which changes drawerStates. Should it ideally be a one-time use button since it only changes state to Open?

[Annelisebx]

I see you added Menu button which changes drawerStates. Should it ideally be a one-time use button since it only changes state to Open?
@TroyFPV48
I think it would ideally change back to closed when clicked out of it. However, this button has no functionality right now. We are going to create a new issue/user story for adding content once confirmed with client what is wanted in the menu.

[taylorpapke]

@Annelisebx It looks great on the pages where there is a nav bar but there are images overlapping on the home page and the back button has disappeared from all other pages:



I think we should try to retain the integrity and functionality of the app in its best state as we move forward, even if we intend to replace those areas with something else in future PR's.

[taylorpapke]

1. change home page back to what it currently is in main.
2. change the pages without nav bar to include back buttons where they currently are in main.

perhaps go back to a prior commit or start a new pr from main and copy/paste the changes you want?

[Annelisebx]

@brinkbrink Was this merged already? I don't think we wanted to merge it because I accidentally changed the Home page (and others unintentionally)

If it has been merged and changed, I will open a new issue/PR for fixing back to what @taylorpapke commented above:

• Restore Home page
• Add back arrow to all other screens

[brinkbrink]

@brinkbrink Was this merged already? I don't think we wanted to merge it because I accidentally changed the Home page (and others unintentionally)

If it has been merged and changed, I will open a new issue/PR for fixing back to what @taylorpapke commented above:

• Restore Home page
• Add back arrow to all other screens

Hello @Annelisebx I reverted this and it is now open here at #136. I saw two approving reviews so I merged. Didn't read the comments because I noticed your request on Slack:

"Can I please get 2 reviews on my PR 114 so I can merge? I went over issue and branch today with BC in class and he said to merge and complete and finish remaining on new issue/branch, thank you!"

[Annelisebx]

@brinkbrink thank you!! Sorry, that was last night before the reviews which caught the error. I will try to fix ASAP.