PR#492: get basic allgroups page working - fedora-hubs

fedora-hubs

#492 get basic allgroups page working

Closed 6 years ago by ryanlerch. Opened 6 years ago by ryanlerch.

ryanlerch/fedora-hubs all-groups into develop

get basic allgroups page working

Ryan Lerch • 6 years ago

df06493

hubs/static/client/app/components/AllGroupsPage.js

file added

+80

		`@@ -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);`

hubs/static/client/app/core/Pages.js

file modified

+7 -2

		`@@ -14,6 +14,11 @@`
		`"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};`

hubs/static/client/app/core/reducers/index.js

file modified

		`@@ -40,6 +40,7 @@`
		`globalConfig: noop,`
		`urls: noop,`
		`currentUser: userReducer,`
		`+ hubslist: noop,`
		`ui,`
		`entities,`
		`});`

hubs/static/css/style.css

file modified

+10 -10

		`@@ -401,16 +401,16 @@`
		`}`

		`/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;`

hubs/views/root.py

file modified

+40 -11

		`@@ -4,7 +4,9 @@`
		`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 @@`
		`@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'))`