sort components into widgets and views

src/widgets/group-subs.jsx

@@ -0,0 +1,38 @@
+/* GroupSubs: a list of group subscribers currently online */
+
+import React from 'react';
+
+import LetterTile from './letter-tile.jsx';
+
+export default class GroupSubs extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      onlineSubs: props.subscribers || []
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    return {
+      onlineSubs: nextProps.subscribers ? nextProps.subscribers : []
+    };
+  }
+
+  render() {
+    var usersOnline = [];
+    this.state.onlineSubs.map((sub) => {
+      usersOnline.push(
+        <div className="avatar-box" key={sub.user}>
+          <LetterTile
+            topic={sub.user}
+            avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
+            title={sub.public ? sub.public.fn : null} />
+        </div>
+      );
+    });
+    return (
+      <div id="topic-users">{usersOnline}</div>
+    );
+  }
+};