Added GroupCategories page

• Added:
- GroupCategories page for selecting groups based on category

app/javascript/gabsocial/features/groups_categories.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
+import { fetchGroupCategories } from '../actions/group_categories'
+import slugify from '../utils/slugify'
+import Block from '../components/block'
+import BlockHeading from '../components/block_heading'
+import List from '../components/list'
+
+class GroupCategories extends ImmutablePureComponent {
+
+ componentDidMount() {
+ this.props.dispatch(fetchGroupCategories())
+ }
+
+ render() {
+ const { categories } = this.props
+
+ let categoriesOptions = []
+ if (categories) {
+ for (let i = 0; i < categories.count(); i++) {
+ const c = categories.get(i)
+ const title = c.get('text')
+ categoriesOptions.push({
+ title,
+ to: `/groups/browse/categories/${slugify(title)}`,
+ })
+ }
+ }
+
+ return (
+ <Block>
+ <BlockHeading title='Browse group categories' />
+ <List items={categoriesOptions} />
+ </Block>
+ )
+ }
+
+}
+
+const mapStateToProps = (state) => ({
+ categories: state.getIn(['group_categories', 'items']),
+})
+
+GroupCategories.propTypes = {
+ categories: ImmutablePropTypes.list.isRequired,
+}
+
+export default connect(mapStateToProps)(GroupCategories)
\ No newline at end of file

app/javascript/gabsocial/features/ui/ui.js

@@ -68,6 +68,7 @@ import {
  GroupMembers,
  GroupRemovedAccounts,
  GroupTimeline,
+ GroupsCategories,
  HashtagTimeline,
  HomeTimeline,
  Investors,
@@ -191,6 +192,7 @@ class SwitchingArea extends React.PureComponent {
  <WrappedRoute path='/groups/browse/featured' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
  <WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
  <WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
+ <WrappedRoute path='/groups/browse/categories' exact page={GroupsPage} component={GroupsCategories} content={children} componentParams={{ activeTab: 'categories' }} />
 
  <WrappedRoute path='/groups/create' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Create Group', page: 'create-group' }} />
  <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -47,8 +47,8 @@ export function GroupRemovedAccounts() { return import(/* webpackChunkName: "fea
 export function GroupTimeline() { return import(/* webpackChunkName: "features/group_timeline" */'../../group_timeline') }
 export function GroupTimelineSortOptionsPopover() { return import(/* webpackChunkName: "components/group_timeline_sort_options_popover" */'../../../components/popover/group_timeline_sort_options_popover') }
 export function GroupTimelineSortTopOptionsPopover() { return import(/* webpackChunkName: "components/group_timeline_sort_top_options_popover" */'../../../components/popover/group_timeline_sort_top_options_popover') }
-// export function GroupsCategories() { return import(/* webpackChunkName: "features/groups_categories" */'../../groups_categories.js') }
 // export function GroupCategory() { return import(/* webpackChunkName: "features/group_category" */'../../group_category') }
+export function GroupsCategories() { return import(/* webpackChunkName: "features/groups_categories" */'../../groups_categories') }
 export function HashtagTimeline() { return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline') }
 export function HashtagTimelineSettingsModal() { return import(/* webpackChunkName: "components/hashtag_timeline_settings_modal" */'../../../components/modal/hashtag_timeline_settings_modal') }
 export function HomeTimeline() { return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline') }

app/javascript/gabsocial/pages/groups_page.js

@@ -48,6 +48,10 @@ class GroupsPage extends React.PureComponent {
  title: intl.formatMessage(messages.new),
  to: '/groups/browse/new',
  },
+ {
+ title: intl.formatMessage(messages.categories),
+ to: '/groups/browse/categories',
+ },
  ] : []
 
  if (isPro) {
@@ -102,6 +106,7 @@ const messages = defineMessages({
  featured: { id: 'featured', defaultMessage: 'Featured Groups' },
  myGroupsTimeline: { id: 'my_groups_timeline', defaultMessage: 'Timeline' },
  myGroups: { id: 'my_groups', defaultMessage: 'My Groups' },
+ categories: { id: 'categories', defaultMessage: 'Categories' },
  admin: { id: 'admin', defaultMessage: 'Admin' },
 })