Sk pja react router dom

[SaraSweetie]

Description

Utilizing react-router-dom for managing the page views. This app currently has two page views: the default shopping list, and /add to add an item to the shopping list. The currently selected page is indicated by a change in the button color and the browser's URL.

Related Issue

closes #4

Acceptance Criteria

• react-router-dom has been added as a project dependency
• 2 tabs are present and persistent at the bottom of the app: one for the “list” view, the other for the “add an item” view
• Whichever tab is selected should indicate somehow that it is selected
• When a link is clicked, the browser URL updates to represent the current view

Type of Changes

	Type
	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
✓	🔗 Update dependencies
	📜 Docs

Updates

Before

Starter UI from create-react-app. This code was removed.

After

• Two page views. Shopping List is the default /, and Add Item /add
• The active page is highlighted in the UI and indicated in the URL.

Testing Steps / QA Criteria

1. From your terminal, pull down the branch by using git pull origin sk-pja-react-router-dom and git checkout sk-pja-react-router-dom to switch to the branch.
2. Type npm install to add the dependencies, then npm start to run the app.
3. Use the buttons to switch the page view.
4. The button for the currently viewed page will be highlighted and indicated in the URL. The default page is Shopping List, and Add Item will be indicated with /add in the URL.

[skillitzimberg]

I think react-router-dom should be installed in this branch rather than having the reviewer install it. That might be why the checks are failing. Netlify doesn't know to install it unless it's already been added to the package.json.

[SaraSweetie]

@skillitzimberg Thanks! This was very helpful and I realized what I did wrong. The package.json files are now updated.

[stevelikesmusic]

Did you npm install react-router-dom @SaraSweetie to install the library?

[SaraSweetie]

@stevelikesmusic Yes. That is how I installed the react-router-dom library.

[skillitzimberg]

Based on how I read the AC I thought that your PR had met the requirements. But I think that I'm not interpreting the last criterium the way it was intended.

When a link is clicked, the browser URL updates to represent the current view.

It might be a good idea to check in with mentors to clear up any confusion around this.

[skillitzimberg]

Looks good! There are a couple of minor clean up details. I left comments on/near the affected lines.

[espain16]

There is an unused border property in your class selector called 'selected'.

[skillitzimberg]

Looks good. Approved.