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