Organize Components

[PullJosh]

This one's a biggie. The idea is to organize the client's components in a consistent manner. The big benefit here is that our directory structure now allows components to be nested with a clear hierarchy. I wanted to do this so that working on the two additional tabs of the right sidebar would be a clean and easy process.

This is a pretty massive change, which is why I'm not pushing straight to preact. I want your feedback first. With that in mind, here are the pros/cons of the new layout:

Pros:

• Easy to see which components use which. For instance, it is now clear that the Atom component is only used by ServerPool, and that Timeago is only used in Message.
• Greatly simplifies App.js Just take a look! The App component no longer houses tons of random details regarding the sidebars or main messages. The main sections of the app (the sidebars and main area) have each been made into their own component, which improves readability a lot. (It's possible that the "join server" modal could also be moved into the left sidebar component, although I decided that it might be out of the scope of this PR. Also, more importantly, I'm lazy.)
• Makes room for modular CSS To be clear: There are not currently plans to adopt a CSS-in-JS approach. However, as the application continues to grow, it's possible that we could want to do that in the future. If that ever becomes the case, the new directory structure makes this super easy: Just place a ComponentName.css file directly alongside each ComponentName.js file.
• Zero Ambiguity In the past, our directories were a bit haphazard, and it was difficult to know where to put new components. There were folders for each of the sidebars and the main area, but that was pretty much it. Now, there's no debate: If a component is used in only one other component, it becomes a direct child of its parent. If it's used by multiple, it goes in the deepest possible directory without any components needing to required through another. (For example, we wouldn't put Icon as a child of RightSidebar because it is also used by App, and we don't want to require('./RightSidebar/Icon/Icon') from App.js)

Cons:

• requireing becomes a bit more verbose With the new system, in which the component lives in a directory of its same name, you need to name the component twice when requireing. For instance, here is how App acquires RightSidebar:

  const RightSidebar = require('./RightSidebar/RightSidebar')

• Makes heavier use of context In general, using this.context goes against the classic React method of passing props to children. Pulling from the pool also means we have to force more manual updates on components. Honestly, this feels like a non-issue to me, but I wanted to include it for completeness.
• More difficult to quickly scan directories At least on my screen, I find it a little more difficult to quickly scan through the app as a whole due to all the extra directories. Whether or not this is an issue is pretty subjective, but one slight benefit is the ability to open/collapse nested components to only see what you need.

Let me know what you think! Personally, I love the new structure, but wouldn't be upset if anybody disagrees. It's definitely a large change, and I didn't really give any warning before this PR, so a small riot is only acceptable. :stuck_out_tongue:

[bates64]

Haven't yet looked at the code, but this looks awesome.

[PullJosh]

The code hasn't been changed much. It's mostly just modifying require locations and breaking App into separate components.

[bates64]

requireing becomes a bit more verbose With the new system, in which the component lives in a directory of its same name, you need to name the component twice when requireing.

Gonna take a look into resolving this - I've seen browserify plugins for it, I think. Or I can write one.

[PullJosh]

I've seen browserify plugins for it, I think. Or I can write one.

Woah! I had no idea there was so much you could do with those plugins! (It makes sense, I suppose, but I've never seen it done.)

Best of luck!

[bates64]

:tada:

You can now:

• Use require('./Component'), which will resolve to ./Component/Component.js
• Use require('/Modal'), which will resolve to /path/to/decent/packages/client/js/Modal/Modal.js