diff --git a/app/javascript/gabsocial/features/groups/sidebar_panel/index.js b/app/javascript/gabsocial/features/groups/sidebar_panel/index.js new file mode 100644 index 00000000..21880178 --- /dev/null +++ b/app/javascript/gabsocial/features/groups/sidebar_panel/index.js @@ -0,0 +1,45 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; +import Item from './item'; +import Icon from 'gabsocial/components/icon'; + +const messages = defineMessages({ + title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' }, +}); + +const mapStateToProps = (state, { id }) => ({ + groupIds: state.getIn(['group_lists', 'member']), +}); + +export default @connect(mapStateToProps) +@injectIntl +class GroupSidebarPanel extends ImmutablePureComponent { + static propTypes = { + groupIds: ImmutablePropTypes.list, + } + + render() { + const { intl, groupIds } = this.props; + + // Only when there are groups to show + if (groupIds.count() === 0) return null; + + return ( +
+
+ + {intl.formatMessage(messages.title)} +
+ +
+
+ {groupIds.map(groupId => )} +
+
+
+ ); + } +} \ No newline at end of file diff --git a/app/javascript/gabsocial/features/groups/sidebar_panel/item.js b/app/javascript/gabsocial/features/groups/sidebar_panel/item.js new file mode 100644 index 00000000..a4015c18 --- /dev/null +++ b/app/javascript/gabsocial/features/groups/sidebar_panel/item.js @@ -0,0 +1,45 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; +import { shortNumberFormat } from '../../../utils/numbers'; +import { connect } from 'react-redux'; + +const messages = defineMessages({ + new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' }, + no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' }, +}); + +const mapStateToProps = (state, { id }) => ({ + group: state.getIn(['groups', id]), + relationships: state.getIn(['group_relationships', id]), +}); + +export default @connect(mapStateToProps) +@injectIntl +class Item extends ImmutablePureComponent { + static propTypes = { + group: ImmutablePropTypes.map, + relationships: ImmutablePropTypes.map, + } + + render() { + const { intl, group, relationships } = this.props; + + // Wait for relationships + if (!relationships) return null; + + const unreadCount = relationships.get('unread_count'); + + return ( + +
{group.get('title')}
+
+ {unreadCount > 0 && {shortNumberFormat(unreadCount)} {intl.formatMessage(messages.new_statuses)}} + {unreadCount === 0 && {intl.formatMessage(messages.no_recent_activity)}} +
+ + ); + } +} \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/group_page.js b/app/javascript/gabsocial/pages/group_page.js index c664a135..a6d4e329 100644 --- a/app/javascript/gabsocial/pages/group_page.js +++ b/app/javascript/gabsocial/pages/group_page.js @@ -8,7 +8,8 @@ import LinkFooter from '../features/ui/components/link_footer'; import PromoPanel from '../features/ui/components/promo_panel'; import HeaderContainer from '../features/groups/timeline/containers/header_container'; import GroupPanel from '../features/groups/timeline/components/panel'; -import { fetchGroup } from '../actions/groups'; +import { fetchGroup, fetchGroups } from '../actions/groups'; +import GroupSidebarPanel from '../features/groups/sidebar_panel'; const mapStateToProps = (state, { params: { id } }) => ({ group: state.getIn(['groups', id]), @@ -27,6 +28,7 @@ class GroupPage extends ImmutablePureComponent { componentWillMount() { const { params: { id }, dispatch } = this.props; + dispatch(fetchGroups('member')); dispatch(fetchGroup(id)); } @@ -60,6 +62,7 @@ class GroupPage extends ImmutablePureComponent {
+
diff --git a/app/javascript/gabsocial/pages/groups_page.js b/app/javascript/gabsocial/pages/groups_page.js index 141a530f..2cbaa481 100644 --- a/app/javascript/gabsocial/pages/groups_page.js +++ b/app/javascript/gabsocial/pages/groups_page.js @@ -7,6 +7,7 @@ import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel'; import LinkFooter from '../features/ui/components/link_footer'; import PromoPanel from '../features/ui/components/promo_panel'; import UserPanel from '../features/ui/components/user_panel'; +import GroupSidebarPanel from '../features/groups/sidebar_panel'; const mapStateToProps = state => ({ account: state.getIn(['accounts', me]), @@ -42,6 +43,7 @@ class GroupsPage extends ImmutablePureComponent {
+
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index 9931e084..7b3c8c4e 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -27,6 +27,7 @@ @import 'gabsocial/components/group-card'; @import 'gabsocial/components/group-detail'; @import 'gabsocial/components/group-form'; +@import 'gabsocial/components/group-sidebar-panel'; @import 'gabsocial/polls'; @import 'gabsocial/introduction'; diff --git a/app/javascript/styles/gabsocial/components/group-sidebar-panel.scss b/app/javascript/styles/gabsocial/components/group-sidebar-panel.scss new file mode 100644 index 00000000..a812ac12 --- /dev/null +++ b/app/javascript/styles/gabsocial/components/group-sidebar-panel.scss @@ -0,0 +1,29 @@ +.group-sidebar-panel { + &__items { + padding: 0 15px 15px; + } + + &__item { + display: block; + color: $primary-text-color; + text-decoration: none; + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + + &__title { + font-weight: bold; + } + + &__meta { + font-size: 0.8em; + color: $gab-secondary-text; + + &__unread { + color: $gab-brand-default; + } + } + } +} \ No newline at end of file