Added GroupCategories page

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

app/javascript/gabsocial/features/groups_categories.js

@@ -0,0 +1,51 @@
+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)

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' },
 })