Upgrade to react-router v4

[mattkrick]

No description provided.

[mattkrick]

For us:

• We are now officially React 16 ready!
• grabs PropTypes from prop-types instead of react
• uses webpack's import instead of the old System.import
• HMR EVERYWHERE. I can't explain how nice this is. it means you never, ever have to hit the refresh button (until it tells you to, like when you delete components & junk).

For users:

• code splits all routes DRYly (eg socket & DragDropContext are only imported once for all peer routes). This is huge, because it means I don't have to modify a component just because it's a peer to another route. For the user, it means only a piece of the screen will flicker, not the whole thing.
• Caches the Landing page for SSR: Our current strategy has always been to send the client to the landing page & then send them wherever they want after they've been authed. Now we make that explicit instead of hiding it behind a matcher (which would not have worked, anyways, since routes are code split). This is the best of both worlds-- SEO & fast loading for first time visitors, and greatly reduced server load because each worker only creates the HTML once.
• fixes the /login problem where it wouldn't go away & sometimes not redirect. now, all state is kept inside nextUrl and Boolean(nextUrl) === /login clean!

@jordanh @ackernaut ready for your 👀 . I'd like to get this merged quick & get the ugly git tree that i made behind us.

[mattkrick]

fix-it list:

• untested routes that previously used requireAuth & implicitly used the user that it gave them. (eg welcome container is borked)

[heks]

@mattkrick

I use this app as a boilerplate and I am also in process of upgrading to react-router v4 but i noticed in Bundle.js file
componentWillReceiveProps(nextProps) { const {mod} = this.props; if (mod.toString() !== nextProps.mod.toString()) { console.log("load mod"); this.loadMod(nextProps); } }
The code should be like that (with the added "toString()") otherwise the equality check fails. (at least thats what happens on my app)

[mattkrick]

@heks thanks for dropping by!
That's very interesting, you're absolutely right... I suppose it makes sense since when the parent component rerenders it re-instantiates the function.
The question is, why are those simple rerouting component getting rerendered?
The answer is because this.props.match.params is getting a new object every time!
Why? ¯_(ツ)_/¯ maybe a bug in react-router v4

I'll submit an issue with rrv4 & see if there's a good reason for it. thank you!

If you'd still like to use referential integrity instead of a string conversion, you've got 2 options:

1. move the function instantiation outside the render cycle (eg mod={foo})
2. add a shouldComponentUpdate that returns false for rerouting components.

[mattkrick]

aand the culprit:
remix-run/react-router#5099

[heks]

@mattkrick

Sweet thanks for this. Also found this similar implementation:

https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194

[jordanh]

@heks what are you building? Anything fun?? Curious minds want to know...

[heks]

Here is a link, http://olyftia.com

System to run olympic weightlifting meets, its a small sport but been doing it since I was young. Been trying to keep up with this projects build/boilerplate.

[mattkrick]

oh thats neat!
if you're ever in san diego drop on by Fortius, we put on a handful of oly meets throughout the year.
(we're also hiring another remote developer to work on this repo, if you're interested in that, too).

[ackernaut]

@heks Olyftia looks pretty slick (and I dig the logo)! Is this a personal project or is there a team behind it?

[heks]

@ackernaut No just me going at it solo. Logo meant to resemble a a bar with weights on the end
like this: O---A lol but yeah small project trying to grow it, one thing that I am having trouble with is synching a clock through socketcuster on every screen/computer. People are experiencing disconnections / not synching properly on all internet connections, using this lib. to ping and detect latency https://github.com/enmasseio/timesync but not enough. etc. etc., if you have any ideas on how to make this better I am open to ideas, I know @mattkrick is a great dev & probably others in here too.

@mattkrick Yeah will check it out if I'm in San Diego (I usually go to SF) looks like a solid gym I started doing CF also past year and like it a lot, seems like there's a good app idea in running the CF competitions & the regional qualifiers, I just don't really know the scoring system and rules. Also, remote dev sounds interesting I might be interested in that, I am based out of Chicago email me (github profile)

[ackernaut]

@heks yeah, I saw that shape in the logo—playful! For all things socketcluster etc. you’re talking to the right guy with @mattkrick —I’m more of a front-end developer and UI designer on our team.

[mattkrick]

@heks client clocks are tricky. we were thinking about building them into socketcluster but it was deemed out of scope. timesync looks good, although i've never used it. you've got the right idea though. essentially, what i'd do is establish latency by sending 1 frame round trip. then, send down the message to start in 3 seconds. subtract the latency from that 3 seconds & begin a clock on the client. having the clocks be client driven is kinda scary, but better when connectivity is an issue. plus, you can always send a "done" message later to make sure no client cheated. The same technique (I assume) is used in video games. Imagine a shooter game and the round starts in 3 seconds. if you lag at the beginning, it'll still show that countdown smoothly.