Add routing

[satishkunisi]

• Includes react-router
• Moves the logic in Quack component into a new Chat component so the router can transition to and from the main chat window
• Adds an About component to demonstrate how the router works (it also forced me to fix the CSS). If it's superfluous I can remove it.

[satishkunisi]

I had to remove these listeners to prevent a React error when trying to unmount the component (while changing routes / switching component views). We do need to do some work to fix the 'two children with the same key warnings' (related to: #53)

[jacknoble]

Ah, thats cool that React throws an error when that happens. Should be done anyway. Do you know why there is a 'two children with the same key warning'? Also, should we remove all the other listeners this way?

[satishkunisi]

Browse to About then back to Chat and check out the console. If you log
MessageStore.all() you'll see dups.

On Fri, Apr 3, 2015 at 6:33 PM, Jack Noble notifications@github.com wrote:

In js/components/channel_messages.jsx
#60 (comment):

@@ -36,6 +36,7 @@ var ChannelMessages = React.createClass({
},

componentWillUnmount: function() {

• MessageStore.removeListener('change', this._messageStoreChange);

Ah, thats cool that React throws an error when that happens. Should be
done anyway. Do you know why there is a 'two children with the same key
warning'?

—
Reply to this email directly or view it on GitHub
https://github.com/rorysaur/quack/pull/60/files#r27765333.

[satishkunisi]

Sorry I misread your comment. I'm a little hazy on Flux still, so I don't exactly why it's happening. I know it has something to do with the way we're loading messages into the store. My initial assumption is that when the component was unmounted then mounted again the store would just reinitialize and fetch all the messages from Firebase but that wasn't happening...

[satishkunisi]

More here: #21

[rorysaur]

looks good to me 👍 and +1 for semantic HTML 😹 😹 i think @jacknoble should take a look tooo ⛽

[rorysaur]

oh and can you add a little note in the readme ("Dependencies") whenever you add a dependency?

[jacknoble]

🍊 🎤 🎡 Looks good!

[jacknoble]

@satishkunisi What do you think about the router? Is it something we should use heavily or just occasionally?

[satishkunisi]

Well not for channels, but we'll need routes for login and I remember Rory mentioning another component that might need a separate route.

[rorysaur]

i said router for channels just for practice, but if there are other things we could do with the router then it doesn't matter.

[rorysaur]

settings menu, things like that.

[jacknoble]

Right, so it makes sense to practice/ becoming familiar with it. I'm personally sort of suspicious of the javascript router thing in general, it seems like it adds a layer of complexity to things without bringing much benefit. I'm trying to get a sense of whether react makes it simpler/safer such that it would be good to use on other projects.

[rorysaur]

i get the impression that routes in react aren't as dominant of a class as they are in the big frameworks..