From df064938cc3f0b02ed4c2940da112f9ae14d619e Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Dec 12 2017 13:03:24 +0000
Subject: get basic allgroups page working


---

diff --git a/hubs/static/client/app/components/AllGroupsPage.js b/hubs/static/client/app/components/AllGroupsPage.js
new file mode 100644
index 0000000..280dc6b
--- /dev/null
+++ b/hubs/static/client/app/components/AllGroupsPage.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  defineMessages,
+  FormattedMessage,
+  } from 'react-intl';
+import PageStructure from './PageStructure';
+import { monogramColour } from '../core/utils';
+
+
+class AllGroupsPage extends React.Component {
+
+  render() {
+    return (
+      <PageStructure
+        cssClass="AllGroupsPage"
+        header={
+            <div className="row">
+              <div className="col-md-12">
+                {console.log(this.props.hubslist)}
+              </div>
+            </div>
+          }
+          content={
+            <div className="row">
+              <div className="col-md-12">
+                <div className="list-group">
+                {this.props.hubslist.hubs.map(function(hub, i) {
+                    return (
+                    <a className="list-group-item d-flex justify-content-between align-items-center"
+                       key={i}
+                       href={hub.hub_url}
+                       >
+                        <div className="d-flex">
+                        { !hub.config.avatar ?
+                            <div className={`monogram-avatar avatar bg-fedora-${monogramColour(hub.name)} text-fedora-${monogramColour(hub.name)}-dark`}>
+                                {hub.name.charAt(0).toUpperCase()}
+                            </div>
+                            :
+                            <img
+                                className="avatar"
+                                src={hub.config.avatar}
+                                width='60px'
+                                />
+                        }
+                            <div className="text-dark ml-2">
+                                <h3>{hub.name}</h3>
+                                <p>{hub.config.summary}</p>
+                            </div>
+                        </div>
+                        <div className="d-flex">
+                            <div className="mx-2 align-self-center">
+                                <div className="text-uppercase text-secondary"><small>Members</small></div>
+                                <div className="text-primary text-center">{hub.member_count}</div>
+                            </div>
+                            <div className="mx-2 align-self-center">
+                                <div className="text-uppercase text-secondary"><small>Subscribers</small></div>
+                                <div className="text-primary text-center">{hub.subscriber_count}</div>
+                            </div>
+                        </div>
+                    </a>
+                    );
+                })}
+                </div>
+              </div>
+            </div>
+          }
+        />
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+    return {
+      hubslist: state.hubslist,
+    }
+  };
+
+  export default connect(mapStateToProps)(AllGroupsPage);
diff --git a/hubs/static/client/app/core/Pages.js b/hubs/static/client/app/core/Pages.js
index 67aee23..632a13c 100644
--- a/hubs/static/client/app/core/Pages.js
+++ b/hubs/static/client/app/core/Pages.js
@@ -14,6 +14,11 @@ const Streams = makeLoadable(
   "Loading...",
   "Sorry, there was a problem loading the page."
 );
+//const Groups = makeLoadable(
+//  () => import(/* webpackChunkName: "page-allgroups" */ '../components/AllGroupsPage'),
+//  "Loading...",
+//  "Sorry, there was a problem loading the page."
+//);
+const Groups = require('../components/AllGroupsPage').default;
 
-
-export {Hub, Streams};
+export {Hub, Streams, Groups};
diff --git a/hubs/static/client/app/core/reducers/index.js b/hubs/static/client/app/core/reducers/index.js
index 61bb90e..acb6644 100644
--- a/hubs/static/client/app/core/reducers/index.js
+++ b/hubs/static/client/app/core/reducers/index.js
@@ -40,6 +40,7 @@ const rootReducer = combineReducers({
   globalConfig: noop,
   urls: noop,
   currentUser: userReducer,
+  hubslist: noop,
   ui,
   entities,
 });
diff --git a/hubs/static/css/style.css b/hubs/static/css/style.css
index dae5273..defa6b5 100644
--- a/hubs/static/css/style.css
+++ b/hubs/static/css/style.css
@@ -401,16 +401,16 @@ header h5.m-b-1 {
 }
 
 /*Move these color defs into fedora-bootstrap*/
-.bg-fedora-blue{background-color:#3c6eb4;}
-.bg-fedora-magenta{background-color: #db3279;}
-.bg-fedora-orange{background-color: #e59728;}
-.bg-fedora-green{background-color: #79db32;}
-.bg-fedora-purple{background-color: #a07cbc;}
-.text-fedora-blue-dark{color: #294a7a;}
-.text-fedora-magenta-dark{color: #9a1b51;}
-.text-fedora-orange-dark{color: #9a6213;}
-.text-fedora-green-dark{color: #488b18;}
-.text-fedora-purple-dark{color: #70488f;}
+.bg-fedora-blue{background-color:#3c6eb4!important;}
+.bg-fedora-magenta{background-color: #db3279!important;}
+.bg-fedora-orange{background-color: #e59728!important;}
+.bg-fedora-green{background-color: #79db32!important;}
+.bg-fedora-purple{background-color: #a07cbc!important;}
+.text-fedora-blue-dark{color: #294a7a!important;}
+.text-fedora-magenta-dark{color: #9a1b51!important;}
+.text-fedora-orange-dark{color: #9a6213!important;}
+.text-fedora-green-dark{color: #488b18!important;}
+.text-fedora-purple-dark{color: #70488f!important;}
 
 .typeahead, .twitter-typeahead {
   width: 100%!important;
diff --git a/hubs/views/root.py b/hubs/views/root.py
index cae9996..1a19b55 100644
--- a/hubs/views/root.py
+++ b/hubs/views/root.py
@@ -4,7 +4,9 @@ import flask
 import hubs.models
 
 from hubs.app import app, OIDC
-from hubs.utils.views import authenticated, is_safe_url, login_required
+from hubs.utils import hubname2monogramcolour
+from hubs.utils.views import (authenticated, is_safe_url,
+                              login_required, get_user_details)
 
 
 @app.route('/')
@@ -21,21 +23,48 @@ def index():
 @app.route('/groups/')
 @login_required
 def groups():
-    # Get the list of promoted and non-promoted group hubs from the DB
-    promoted_names = app.config.get('PROMOTED_GROUPS')
+    current_user = get_user_details()
+    urls = {
+        "allGroups": flask.url_for("groups"),
+    }
+    flash_messages = [
+        {"msg": msg[1], "type": msg[0]} for msg in
+        flask.get_flashed_messages(with_categories=True)
+        ]
+
     groups = hubs.models.Hub.all_group_hubs()
-    promoted = [g for g in groups if g.name in promoted_names]
-    secondary = [g for g in groups if g.name not in promoted_names]
+    hubslist = []
+    for group in groups:
+        hub = group.get_props()
+        hub["monogram_colour"] = hubname2monogramcolour(hub["name"])
+        hub["hub_url"] = flask.url_for('hub', name=hub["name"])
+
+        member_count = len(hub["users"]["member"])
+        owner_count = len(hub["users"]["owner"])
+        hub["member_count"] = member_count + owner_count
+
+        subscriber_count = len(hub["users"]["subscriber"])
+        hub["subscriber_count"] = subscriber_count
+
+        hubslist.append(hub)
 
     name_of_the_month = app.config.get('HUB_OF_THE_MONTH')
-    hub_of_the_month = hubs.models.Hub.by_name(name_of_the_month)
+    hub_of_the_month = hubs.models.Hub.by_name(name_of_the_month).get_props()
 
     return flask.render_template(
-        'groups.html',
-        promoted=promoted,
-        secondary=secondary,
-        hub_of_the_month=hub_of_the_month,
-    )
+        'react.html',
+        page_title="All Groups",
+        initial_state=dict(
+            ui=dict(
+                page="Groups",
+                flashMessages=flash_messages,
+            ),
+            urls=urls,
+            currentUser=current_user,
+            hubslist={"hubs": hubslist,
+                      "hub_of_the_month": hub_of_the_month}
+            ),
+        )
 
 
 @app.route('/login/', methods=('GET', 'POST'))

