2. As a user, I want to be able to navigate within the app #42

mikeramz86 · 2019-12-20T21:27:37Z

✅ react-router-dom has been added as a project dependency

✅ Click a link within the app to show a different view in the app

We looked at our old projects to figure out how to create a new component

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

At first, we manage to create a link that appeared on the main screen however unsuccessful to create a new screen
Nikema, then took time to review more of her notes and researched a better a solution
She created a new commit and we synced to go over the new code lines

Questions:

Nikema: How to set up the Router so that the Home Page is the App.js and have the link to switch to a new view?
Is there a better solution/more efficient solution for this?
Mike: Do we need switch or react-router-dom?

#24

larsbrekken · 2019-12-20T22:45:33Z

I see that at some point you renamed the hello.js file, but looks like maybe that rename didn't fully make it into git? Did you miss a git add or similar?

As I was typing this I just remembered that git is not especially great at renaming files if all you are changing is the casing (e.g. from hello to Hello).

One solution here may be to change the file name entirely, maybe give that a shot?

larsbrekken · 2019-12-20T22:47:39Z

Note the lowercase hello vs the uppcase Hello:

stevelikesmusic

This is some nice work @mikeramz86 @prophen—great first PR 👏👏👏

I got the feature running locally after changing the casing of src/hello.js.

Very nice to see the commits broken up as you did. @prophen that last commit message was ✨ 🚀 ❤️

stevelikesmusic · 2019-12-21T12:57:48Z

src/App.js

    </div>
  );
 }

 export default App;
+
+/*


Great to see your thought process @mikeramz86! I think comments like this are better in the ticket or the PR description. In general, it's fine to have a the occasional TODO comment like // TODO: Redesign Hello Component

But I wouldn't leave a bigger TODO List in comments like this.

stevelikesmusic · 2019-12-21T12:58:09Z

src/AppRouter.js

+import { Route, Switch } from 'react-router-dom';
+import Hello from './Hello';
+import HelloAgain from './HelloAgain';
+// import App from './App';


You can delete this line 🔥

stevelikesmusic · 2019-12-21T13:05:47Z

src/AppRouter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import Hello from './hello';
+import Hello from './Hello';


Nice catch with the name capitalization. Like @larsbrekken mentioned, we'll need to change the name of the file as well now from src/hello.js to src/Hello.js

stevelikesmusic · 2019-12-21T13:07:07Z

src/index.js

@@ -1,12 +1,24 @@
+// import React from 'react';


This can all get removed 🔥

stevelikesmusic

This is some nice work @mikeramz86 @prophen—great first PR 👏👏👏

I got the feature running locally after changing the casing of src/hello.js.

Very nice to see the commits broken up as you did. @prophen that last commit message was ✨ 🚀 ❤️

stevelikesmusic

My comment posted twice

stacietaylorcima · 2019-12-22T01:51:06Z

src/HelloAgain.js

+
+function HelloAgain() {
+  return (
+    <div>


Not a blocker by any means, but for better accessibility, you might consider using semantic HTML here as a div essentially has no meaning. I might suggest using main here in this case. You also could use a React Fragment if you ever come across a case where you need to wrap elements for some reason but they don't really fit with any of the semantic tags.

…able to render new page

- Removed the boilerplate React homepage - Created a separate component, for each page we link to. Hello.js and HelloAgain.js - Renamed the hello.js to Hello.js I think the issue was that we were trying to route to the same component that the Router was wrapped around. I don't know if my implementation is the most correct solution, but a way around that problem was to give our home page '/' it's own component (Hello.js) to render the new view separate from App.js.

This commit merges in the firebase configuration that was recently merged with master. This will allow us to toggle between a list view and an add-item view.

mikeramz86 requested review from larsbrekken and shedwyn December 20, 2019 21:27

larsbrekken requested a review from stevelikesmusic December 20, 2019 22:36

stevelikesmusic reviewed Dec 21, 2019

View reviewed changes

stacietaylorcima reviewed Dec 22, 2019

View reviewed changes

Nikema Prophet and others added 6 commits December 22, 2019 09:58

Create the feature branch for story two

d91c5be

Add react-router-dom as a dependency

c7af605

added hellojs and approuter.js - was able to switch components but un…

5944e43

…able to render new page

Create a new component for each page, Make hello.js the homepage

0e607a5

Pull/merge with recent firebase updates

f5b174f

This commit merges in the firebase configuration that was recently merged with master. This will allow us to toggle between a list view and an add-item view.

stacietaylorcima force-pushed the mr-np-add-router branch from d951103 to f5b174f Compare December 22, 2019 18:12

stacietaylorcima merged commit 2f5acd4 into master Dec 22, 2019

stacietaylorcima mentioned this pull request Dec 23, 2019

2. As a user, I want to be able to navigate within the app #24

Closed

segdeha deleted the mr-np-add-router branch December 24, 2019 02:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2. As a user, I want to be able to navigate within the app #42

2. As a user, I want to be able to navigate within the app #42

mikeramz86 commented Dec 20, 2019 •

edited by stevelikesmusic

Loading

larsbrekken commented Dec 20, 2019 •

edited

Loading

larsbrekken commented Dec 20, 2019 •

edited

Loading

stevelikesmusic left a comment

stevelikesmusic Dec 21, 2019

stevelikesmusic Dec 21, 2019

stevelikesmusic Dec 21, 2019

stevelikesmusic Dec 21, 2019

stevelikesmusic left a comment

stevelikesmusic left a comment •

edited

Loading

stacietaylorcima Dec 22, 2019

2. As a user, I want to be able to navigate within the app #42

2. As a user, I want to be able to navigate within the app #42

Conversation

mikeramz86 commented Dec 20, 2019 • edited by stevelikesmusic Loading

larsbrekken commented Dec 20, 2019 • edited Loading

larsbrekken commented Dec 20, 2019 • edited Loading

stevelikesmusic left a comment

Choose a reason for hiding this comment

stevelikesmusic Dec 21, 2019

Choose a reason for hiding this comment

stevelikesmusic Dec 21, 2019

Choose a reason for hiding this comment

stevelikesmusic Dec 21, 2019

Choose a reason for hiding this comment

stevelikesmusic Dec 21, 2019

Choose a reason for hiding this comment

stevelikesmusic left a comment

Choose a reason for hiding this comment

stevelikesmusic left a comment • edited Loading

Choose a reason for hiding this comment

stacietaylorcima Dec 22, 2019

Choose a reason for hiding this comment

mikeramz86 commented Dec 20, 2019 •

edited by stevelikesmusic

Loading

larsbrekken commented Dec 20, 2019 •

edited

Loading

larsbrekken commented Dec 20, 2019 •

edited

Loading

stevelikesmusic left a comment •

edited

Loading