feat: peers page

[fsdiogo]

Tasks:

• World map
• Peers table (react-virtualized)
• Dynamic locations in the map
• Flags in the table
• Merge feat: add peer locations bundle #702 first

Closes #700.

[hacdias]

The code looks good, but two notes:

1. It seems to bit a bit slow. Maybe the list could start with a maximum of 10 peers and then we'd have the option to show more?
2. I know my country/flag emojis are crap. Could you add a margin right here?

[fsdiogo]

@hacdias Slow when scrolling or fetching the flags? I'm using react-virtualized to only render the visible rows, but you can scroll to see more.

I can add the margin, but it was not supposed to appear US there, only flags 😅

[hacdias]

@fsdiogo it seems that Windows Flag emojis are just the country code sadly. Yesterday it seemed more slower. When I resize the page and scroll it seems a bit slow

[fsdiogo]

@hacdias ohh, so the flags aren't rendering on Windows? 😓

Can you test the following please (I don't have a windows machine):

In the src/peers/PeersTable/PeersTable.js, line 14, can you change that to:

{ rowData.flagCode ? <CountryFlag code={rowData.flagCode} svg /> : '🏳️‍🌈' }

That way we are force rendering the flags to SVG instead of emoji. Maybe it will work.

[hacdias]

@fsdiogo

Yes, that way they render:

Still, we need some margin there

[hacdias]

@fsdiogo merged #702

[fsdiogo]

@hacdias awesome, thanks!

It doesn't look as good as with the emojis though:

We have two options here:

1. Always render the flags as SVG
2. Use something like platform.js to detect if it's Windows, and render as SVG accordingly

What do you think?

[hacdias]

Yeah, the emojis are better even though they are platform dependent. You can render with SVGs on Windows or let it use the Windows "emojis". If we render SVGs conditionally, I don't think there's a need to add a dependency when we can just:

svg={window.navigator.appVersion.indexOf('Win') !== -1}

[hacdias]

Despite that comment bellow, the code LGTM and I think it can be merged 😄

[hacdias]

Why's New York here?

[fsdiogo]

Oops, that selector is not being used, I made a new below. I'll commit a fix.

[olizilla]

Minor, but I'd just use an inline style attributes for this as the value is duplicated in the definition of the table. I'd inline .MapContainer as well, just to keep all the definitions together.

[fsdiogo]

Agree, and that way we can delete those two CSS files 👍

[olizilla]

This looks great and works well ✨

I've added a minor comment, that I leave to you @fsdiogo to decide on.

In general, we're gonna have to figure our some tricks to make this not spin the fans on everyones machine. I know @hacdias is already looking into it.

[fsdiogo]

Can we merge this? 🚀

[hacdias]

@fsdiogo here we go 😄