Deal with errors, lack of groups, loading

src/components/views/groups/GroupUserSettings.js

@@ -30,37 +30,60 @@ export default React.createClass({
 
     getInitialState() {
         return {
-            err: null,
+            error: null,
             groups: null,
         };
     },
 
     componentWillMount: function() {
         this.context.matrixClient.getJoinedGroups().done((result) => {
-            this.setState({groups: result.groups, error: null});
+            this.setState({groups: result.groups || [], error: null});
         }, (err) => {
             console.error(err);
             this.setState({groups: null, error: err});
         });
     },
 
-    render() {
+    _renderGroupPublicity() {
-        const GroupPublicityToggle = sdk.getComponent('groups.GroupPublicityToggle');
+        let text = "";
-        const groupPublicityToggles = (this.state.groups || []).map((groupId, index) => {
+        let scrollbox = <div />;
-            return <GroupPublicityToggle key={index} groupId={groupId} />;
+        const groups = this.state.groups;
-        });
+
+        if (this.state.error) {
+            text = _t('Something went wrong when trying to get your communities.');
+        } else if (groups === null) {
+            text = _t('Loading...');
+        } else if (groups.length > 0) {
+            const GroupPublicityToggle = sdk.getComponent('groups.GroupPublicityToggle');
+            const groupPublicityToggles = groups.map((groupId, index) => {
+                return <GroupPublicityToggle key={index} groupId={groupId} />;
+            });
+            text = _t('Display your community flair in rooms configured to show it.');
+            scrollbox = <div className="mx_GroupUserSettings_groupPublicity_scrollbox">
+                <GeminiScrollbar>
+                    { groupPublicityToggles }
+                </GeminiScrollbar>
+            </div>;
+        } else {
+            text = _t("You're not currently a member of any communities.");
+        }
+
         return <div>
             <h3>{ _t('Flair') }</h3>
             <div className="mx_UserSettings_section">
                 <p>
-                    { _t('Display your community flair in rooms configured to show it.') }
+                    { text }
                 </p>
-                <div className="mx_GroupUserSettings_groupPublicity_scrollbox">
+                { scrollbox }
-                    <GeminiScrollbar>
-                        { groupPublicityToggles }
-                    </GeminiScrollbar>
-                </div>
             </div>
         </div>;
     },
+
+    render() {
+        const groupPublicity = this._renderGroupPublicity();
+
+        return <div>
+            { groupPublicity }
+        </div>;
+    },
 });

src/i18n/strings/en_EN.json

@@ -530,8 +530,10 @@
     "Visible to everyone": "Visible to everyone",
     "Only visible to community members": "Only visible to community members",
     "Filter community rooms": "Filter community rooms",
-    "Flair": "Flair",
+    "Something went wrong when trying to get your communities.": "Something went wrong when trying to get your communities.",
     "Display your community flair in rooms configured to show it.": "Display your community flair in rooms configured to show it.",
+    "You're not currently a member of any communities.": "You're not currently a member of any communities.",
+    "Flair": "Flair",
     "Unknown Address": "Unknown Address",
     "NOTE: Apps are not end-to-end encrypted": "NOTE: Apps are not end-to-end encrypted",
     "Do you want to load widget from URL:": "Do you want to load widget from URL:",
@@ -742,7 +744,6 @@
     "For security, this session has been signed out. Please sign in again.": "For security, this session has been signed out. Please sign in again.",
     "Logout": "Logout",
     "Your Communities": "Your Communities",
-    "You're not currently a member of any communities.": "You're not currently a member of any communities.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",