Added pages and routes for Groups by tag and category

• Added:
- pages and routes for Groups by tag and category

app/controllers/api/v1/groups_controller.rb

@@ -7,7 +7,7 @@ class Api::V1::GroupsController < Api::BaseController
  before_action -> { doorkeeper_authorize! :write, :'write:groups' }, except: [:index, :show]
 
  before_action :require_user!, except: [:index, :show]
- before_action :set_group, except: [:index, :create]
+ before_action :set_group, except: [:index, :create, :by_category, :by_tag]
 
  def index
  case current_tab
@@ -34,6 +34,26 @@ class Api::V1::GroupsController < Api::BaseController
  render json: @groups, each_serializer: REST::GroupSerializer
  end
 
+ def by_category
+ if !current_user
+ render json: { error: 'This method requires an authenticated user' }, status: 422
+ end
+
+ @groups = []
+
+ render json: @groups, each_serializer: REST::GroupSerializer
+ end
+
+ def by_tag
+ if !current_user
+ render json: { error: 'This method requires an authenticated user' }, status: 422
+ end
+
+ @groups = []
+
+ render json: @groups, each_serializer: REST::GroupSerializer
+ end
+
  def current_tab 
  tab = 'featured'
  tab = params[:tab] if ['featured', 'member', 'admin', 'new'].include? params[:tab]

app/javascript/gabsocial/actions/groups.js

@@ -90,6 +90,14 @@ export const GROUP_UNPIN_STATUS_REQUEST = 'GROUP_UNPIN_STATUS_REQUEST'
 export const GROUP_UNPIN_STATUS_SUCCESS = 'GROUP_UNPIN_STATUS_SUCCESS'
 export const GROUP_UNPIN_STATUS_FAIL = 'GROUP_UNPIN_STATUS_FAIL'
 
+export const GROUPS_BY_CATEGORY_FETCH_REQUEST = 'GROUPS_BY_CATEGORY_FETCH_REQUEST'
+export const GROUPS_BY_CATEGORY_FETCH_SUCCESS = 'GROUPS_BY_CATEGORY_FETCH_SUCCESS'
+export const GROUPS_BY_CATEGORY_FETCH_FAIL = 'GROUPS_BY_CATEGORY_FETCH_FAIL'
+
+export const GROUPS_BY_TAG_FETCH_REQUEST = 'GROUPS_BY_TAG_FETCH_REQUEST'
+export const GROUPS_BY_TAG_FETCH_SUCCESS = 'GROUPS_BY_TAG_FETCH_SUCCESS'
+export const GROUPS_BY_TAG_FETCH_FAIL = 'GROUPS_BY_TAG_FETCH_FAIL'
+
 export const GROUP_TIMELINE_SORT = 'GROUP_TIMELINE_SORT'
 export const GROUP_TIMELINE_TOP_SORT = 'GROUP_TIMELINE_TOP_SORT'
 
@@ -210,6 +218,72 @@ export const fetchGroupsFail = (error, tab) => ({
  tab,
 });
 
+export const fetchGroupsByCategory = (category) => (dispatch, getState) => {
+ // Don't refetch or fetch when loading
+ const isLoading = getState().getIn(['group_lists', 'by_category', category, 'isLoading'], false)
+
+ if (isLoading) return
+
+ dispatch(fetchGroupsByCategoryRequest(category))
+
+ api(getState).get(`/api/v1/groups/_/category/${category}`)
+ .then(({ data }) => {
+ dispatch(fetchGroupsByCategorySuccess(data, category))
+ dispatch(fetchGroupRelationships(data.map(item => item.id)))
+ })
+ .catch((err) => dispatch(fetchGroupsByCategoryFail(err, category)))
+}
+
+export const fetchGroupsByCategoryRequest = (category) => ({
+ type: GROUPS_BY_CATEGORY_FETCH_REQUEST,
+ category,
+})
+
+export const fetchGroupsByCategorySuccess = (groups, category) => ({
+ type: GROUPS_BY_CATEGORY_FETCH_SUCCESS,
+ groups,
+ category,
+})
+
+export const fetchGroupsByCategoryFail = (error, category) => ({
+ type: GROUPS_BY_CATEGORY_FETCH_FAIL,
+ error,
+ category,
+})
+
+export const fetchGroupsByTag = (tag) => (dispatch, getState) => {
+ // Don't refetch or fetch when loading
+ const isLoading = getState().getIn(['group_lists', 'by_tag', tag, 'isLoading'], false)
+
+ if (isLoading) return
+
+ dispatch(fetchGroupsByTagRequest(tag))
+
+ api(getState).get(`/api/v1/groups/_/tag/${tag}`)
+ .then(({ data }) => {
+ dispatch(fetchGroupsByTagSuccess(data, tag))
+ dispatch(fetchGroupRelationships(data.map(item => item.id)))
+ })
+ .catch((err) => dispatch(fetchGroupsByTagFail(err, tag)))
+}
+
+export const fetchGroupsByTagRequest = (tag) => ({
+ type: GROUPS_BY_TAG_FETCH_REQUEST,
+ tag,
+})
+
+export const fetchGroupsByTagSuccess = (groups, tag) => ({
+ type: GROUPS_BY_TAG_FETCH_SUCCESS,
+ groups,
+ tag,
+})
+
+export const fetchGroupsByTagFail = (error, tag) => ({
+ type: GROUPS_BY_TAG_FETCH_FAIL,
+ error,
+ tag,
+})
+
 export function joinGroup(id) {
  return (dispatch, getState) => {
  if (!me) return;

app/javascript/gabsocial/features/group_category.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 { FormattedMessage } from 'react-intl'
+import slugify from '../utils/slugify'
+import unslugify from '../utils/unslugify'
+import { fetchGroupsByCategory } from '../actions/groups'
+import Block from '../components/block'
+import ColumnIndicator from '../components/column_indicator'
+import Heading from '../components/heading'
+import GroupListItem from '../components/group_list_item'
+
+class GroupCategory extends ImmutablePureComponent {
+
+ state = {
+ category: this.props.params.sluggedCategory,
+ }
+
+ componentDidUpdate(prevProps) {
+ if (this.props.params.sluggedCategory !== prevProps.params.sluggedCategory) {
+ this.handleLoad(this.props.params.sluggedCategory)
+ }
+ }
+
+ componentDidMount() {
+ this.handleLoad(this.props.params.sluggedCategory)
+ }
+
+ handleLoad = (sluggedCategory) => {
+ const category = unslugify(sluggedCategory)
+ this.setState({ category })
+ this.props.onFetchGroupsByCategory(category)
+ }
+
+ render() {
+ const {
+ isFetched,
+ isLoading,
+ groupIds,
+ } = this.props
+ const { category } = this.state
+
+ let errorMessage
+ if (!groupIds || (isFetched && groupIds.size === 0)) {
+ errorMessage = <ColumnIndicator type='error' message={<FormattedMessage id='groups.empty' defaultMessage='There are no groups to display' />} />
+ } else if (isLoading && groupIds.size === 0) {
+ errorMessage = <ColumnIndicator type='loading' />
+ } 
+ 
+ return (
+ <Block>
+ <div className={[_s.d, _s.flexRow, _s.px15, _s.pt10].join(' ')}>
+ <div className={[_s.d, _s.aiStart, _s.overflowHidden].join(' ')}>
+ <Heading size='h2'>
+ Groups by category: {category}
+ </Heading>
+ </div>
+ </div>
+ <div className={[_s.d, _s.py10, _s.w100PC].join(' ')}>
+ {
+ !errorMessage &&
+ groupIds.map((groupId, i) => (
+ <GroupListItem
+ isAddable
+ key={`group-collection-item-${i}`}
+ id={groupId}
+ isLast={groupIds.count() - 1 === i}
+ />
+ ))
+ }
+ { !!errorMessage && errorMessage}
+ </div>
+ </Block>
+ )
+ }
+
+}
+
+const mapStateToProps = (state, { params: { sluggedCategory } }) => {
+ const cleanSluggedCategory = slugify(sluggedCategory)
+
+ return {
+ groupIds: state.getIn(['group_lists', 'by_category', cleanSluggedCategory, 'items']),
+ isFetched: state.getIn(['group_lists', 'by_category', cleanSluggedCategory, 'isFetched']),
+ isLoading: state.getIn(['group_lists', 'by_category', cleanSluggedCategory, 'isLoading']),
+ }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+ onFetchGroupsByCategory: (category) => dispatch(fetchGroupsByCategory(category)),
+})
+
+GroupCategory.propTypes = {
+ groupIds: ImmutablePropTypes.list,
+ isFetched: PropTypes.bool.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ onFetchGroupsByCategory: PropTypes.func.isRequired,
+ sluggedCategory: PropTypes.string.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GroupCategory)
\ No newline at end of file

app/javascript/gabsocial/features/group_tag.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 { FormattedMessage } from 'react-intl'
+import slugify from '../utils/slugify'
+import unslugify from '../utils/unslugify'
+import { fetchGroupsByTag } from '../actions/groups'
+import Block from '../components/block'
+import ColumnIndicator from '../components/column_indicator'
+import Heading from '../components/heading'
+import GroupListItem from '../components/group_list_item'
+
+class GroupTag extends ImmutablePureComponent {
+
+ state = {
+ tag: this.props.params.sluggedTag,
+ }
+
+ componentDidUpdate(prevProps) {
+ if (this.props.params.sluggedTag !== prevProps.params.sluggedTag) {
+ this.handleLoad(this.props.params.sluggedTag)
+ }
+ }
+
+ componentDidMount() {
+ this.handleLoad(this.props.params.sluggedTag)
+ }
+
+ handleLoad = (sluggedTag) => {
+ const tag = unslugify(sluggedTag)
+ this.setState({ tag })
+ this.props.onFetchGroupsByTag(tag)
+ }
+
+ render() {
+ const {
+ isFetched,
+ isLoading,
+ groupIds,
+ } = this.props
+ const { tag } = this.state
+
+ let errorMessage
+ if (!groupIds || (isFetched && groupIds.size === 0)) {
+ errorMessage = <ColumnIndicator type='error' message={<FormattedMessage id='groups.empty' defaultMessage='There are no groups to display' />} />
+ } else if (isLoading && groupIds.size === 0) {
+ errorMessage = <ColumnIndicator type='loading' />
+ }
+ 
+ return (
+ <Block>
+ <div className={[_s.d, _s.flexRow, _s.px15, _s.pt10].join(' ')}>
+ <div className={[_s.d, _s.overflowHidden].join(' ')}>
+ <Heading size='h2'>
+ Groups by tag: {tag}
+ </Heading>
+ </div>
+ </div>
+ <div className={[_s.d, _s.py10, _s.w100PC].join(' ')}>
+ {
+ !errorMessage &&
+ groupIds.map((groupId, i) => (
+ <GroupListItem
+ isAddable
+ key={`group-collection-item-${i}`}
+ id={groupId}
+ isLast={groupIds.count() - 1 === i}
+ />
+ ))
+ }
+ { !!errorMessage && errorMessage}
+ </div>
+ </Block>
+ )
+ }
+
+}
+
+const mapStateToProps = (state, { params: { sluggedTag } }) => {
+ const cleanSluggedTag = slugify(sluggedTag)
+
+ return {
+ groupIds: state.getIn(['group_lists', 'by_tag', cleanSluggedTag, 'items']),
+ isFetched: state.getIn(['group_lists', 'by_tag', cleanSluggedTag, 'isFetched']),
+ isLoading: state.getIn(['group_lists', 'by_tag', cleanSluggedTag, 'isLoading']),
+ }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+ onFetchGroupsByTag: (tag) => dispatch(fetchGroupsByTag(tag)),
+})
+
+GroupTag.propTypes = {
+ groupIds: ImmutablePropTypes.list,
+ isFetched: PropTypes.bool.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ onFetchGroupsByTag: PropTypes.func.isRequired,
+ sluggedTag: PropTypes.string.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GroupTag)
\ No newline at end of file

app/javascript/gabsocial/features/groups_collection.js

@@ -42,10 +42,10 @@ class GroupsCollection extends ImmutablePureComponent {
  isFetched,
  } = this.props
 
- if (isLoading && groupIds.size === 0) {
- return <ColumnIndicator type='loading' />
- } else if (isFetched && groupIds.size === 0) {
+ if (!groupIds || (isFetched && groupIds.size === 0)) {
  return <ColumnIndicator type='error' message={intl.formatMessage(messages.empty)} />
+ } else if (isLoading && groupIds.size === 0) {
+ return <ColumnIndicator type='loading' />
  }
 
  const isAddable = ['featured', 'new'].indexOf(activeTab) > -1

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

@@ -70,6 +70,8 @@ import {
  GroupRemovedAccounts,
  GroupTimeline,
  GroupsCategories,
+ GroupCategory,
+ GroupTag,
  HashtagTimeline,
  HomeTimeline,
  Investors,
@@ -197,6 +199,8 @@ class SwitchingArea extends React.PureComponent {
  <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/browse/categories/:sluggedCategory' exact page={GroupsPage} component={GroupCategory} content={children} componentParams={{ activeTab: 'categories' }} />
+ <WrappedRoute path='/groups/browse/tags/:sluggedTag' exact page={GroupsPage} component={GroupTag} content={children} />
 
  <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,9 @@ 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 GroupCategory() { return import(/* webpackChunkName: "features/group_category" */'../../group_category') }
 export function GroupsCategories() { return import(/* webpackChunkName: "features/groups_categories" */'../../groups_categories') }
+export function GroupCategory() { return import(/* webpackChunkName: "features/group_category" */'../../group_category') }
+export function GroupTag() { return import(/* webpackChunkName: "features/group_tag" */'../../group_tag') }
 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/reducers/group_lists.js

@@ -10,12 +10,19 @@ import {
  GROUP_CHECK_PASSWORD_REQUEST,
  GROUP_CHECK_PASSWORD_SUCCESS,
  GROUP_CHECK_PASSWORD_FAIL,
+ GROUPS_BY_CATEGORY_FETCH_REQUEST,
+ GROUPS_BY_CATEGORY_FETCH_SUCCESS,
+ GROUPS_BY_CATEGORY_FETCH_FAIL,
+ GROUPS_BY_TAG_FETCH_REQUEST,
+ GROUPS_BY_TAG_FETCH_SUCCESS,
+ GROUPS_BY_TAG_FETCH_FAIL,
 } from '../actions/groups'
 import {
  GROUP_TIMELINE_SORTING_TYPE_TOP,
  GROUP_TIMELINE_SORTING_TYPE_NEWEST,
  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
 } from '../constants'
+import slugify from '../utils/slugify'
 
 const tabs = ['new', 'featured', 'member', 'admin']
 
@@ -43,6 +50,8 @@ const initialState = ImmutableMap({
  isLoading: false,
  items: ImmutableList(),
  }),
+ by_category: ImmutableMap(),
+ by_tag: ImmutableMap(),
 })
 
 export default function groupLists(state = initialState, action) {
@@ -111,7 +120,33 @@ export default function groupLists(state = initialState, action) {
  mutable.setIn(['passwordCheck', 'isLoading'], false)
  })
 
+ case GROUPS_BY_CATEGORY_FETCH_REQUEST:
+ return state.setIn(['by_category', slugify(action.category), 'isLoading'], true)
+ case GROUPS_BY_CATEGORY_FETCH_SUCCESS:
+ return state.setIn(['by_category', slugify(action.category)], ImmutableMap({
+ items: ImmutableList(action.groups.map(item => item.id)),
+ isLoading: false,
+ }))
+ case GROUPS_BY_CATEGORY_FETCH_FAIL:
+ return state.setIn(['by_category', slugify(action.category)], ImmutableMap({
+ items: ImmutableList(),
+ isLoading: false,
+ }))
+
+ case GROUPS_BY_TAG_FETCH_REQUEST:
+ return state.setIn(['by_tag', slugify(action.tag), 'isLoading'], true)
+ case GROUPS_BY_TAG_FETCH_SUCCESS:
+ return state.setIn(['by_tag', slugify(action.tag)], ImmutableMap({
+ items: ImmutableList(action.groups.map(item => item.id)),
+ isLoading: false,
+ }))
+ case GROUPS_BY_TAG_FETCH_FAIL:
+ return state.setIn(['by_tag', slugify(action.tag)], ImmutableMap({
+ items: ImmutableList(),
+ isLoading: false,
+ }))
  default:
  return state
  }
 }
+

app/javascript/gabsocial/utils/unslugify.js

+// https://github.com/danny-wood/unslugify/blob/master/index.js
+export default function unslugify(text) {
+ const result = `${text}`.replace(/\-/g, " ");
+ return result.replace(/\w\S*/g, function (txt) {
+ return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+ });
+}

config/routes.rb

@@ -437,6 +437,9 @@ Rails.application.routes.draw do
  post '/statuses/:status_id/approve', to: 'groups#approve_status'
  end
 
+ get '/category/:category', to: 'groups#by_category'
+ get '/tag/:tag', to: 'groups#by_tag'
+
  resources :relationships, only: :index, controller: 'groups/relationships'
  resource :accounts, only: [:show, :create, :update, :destroy], controller: 'groups/accounts'
  resource :removed_accounts, only: [:show, :create, :destroy], controller: 'groups/removed_accounts'