Updated components to use BlockHeading

• Updated:
- components to use BlockHeading

app/javascript/gabsocial/features/blocked_accounts.js

@@ -6,7 +6,7 @@ import { me } from '../initial_state'
 import { fetchBlocks, expandBlocks } from '../actions/blocks'
 import Account from '../components/account'
 import Block from '../components/block'
-import Heading from '../components/heading'
+import BlockHeading from '../components/block_heading'
 import ScrollableList from '../components/scrollable_list'
 
 const messages = defineMessages({
@@ -59,11 +59,7 @@ class Blocks extends ImmutablePureComponent {
 
     return (
       <Block>
-        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
+        <BlockHeading title={intl.formatMessage(messages.blocks)} />
-          <Heading size='h2'>
-            {intl.formatMessage(messages.blocks)}
-          </Heading>
-        </div>
         <ScrollableList
           scrollKey='blocked_accounts'
           onLoadMore={this.handleLoadMore}

app/javascript/gabsocial/features/follow_requests.js

@@ -55,7 +55,7 @@ class FollowRequests extends ImmutablePureComponent {
     } = this.props
 
     const unlockedPrependMessage = locked ? null : (
-      <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+      <div className={[_s.default, _s.px15, _s.py15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <Text>
           <FormattedMessage
             id='follow_requests.unlocked_explanation'

app/javascript/gabsocial/features/followers.js

@@ -9,7 +9,7 @@ import {
 import Account from '../components/account'
 import ScrollableList from '../components/scrollable_list'
 import Block from '../components/block'
-import Heading from '../components/heading'
+import BlockHeading from '../components/block_heading'
 import AccountPlaceholder from '../components/placeholder/account_placeholder'
 
 const mapStateToProps = (state, { account }) => {
@@ -76,29 +76,23 @@ class Followers extends ImmutablePureComponent {
 
     return (
       <Block>
-        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
+        <BlockHeading title={intl.formatMessage(messages.followers)} />
-          <Heading size='h2'>
+        <ScrollableList
-            {intl.formatMessage(messages.followers)}
+          scrollKey='followers'
-          </Heading>
+          hasMore={hasMore}
-        </div>
+          isLoading={isLoading}
-        <div className={[_s.default, _s.py10].join(' ')}>
+          showLoading={isLoading}
-          <ScrollableList
+          onLoadMore={this.handleLoadMore}
-            scrollKey='followers'
+          placeholderComponent={AccountPlaceholder}
-            hasMore={hasMore}
+          placeholderCount={4}
-            isLoading={isLoading}
+          emptyMessage={intl.formatMessage(messages.empty)}
-            showLoading={isLoading}
+        >
-            onLoadMore={this.handleLoadMore}
+          {
-            placeholderComponent={AccountPlaceholder}
+            account && accountIds && accountIds.map((id) => (
-            placeholderCount={4}
+              <Account key={`follower-${id}`} id={id} compact withBio />
-            emptyMessage={intl.formatMessage(messages.empty)}
+            ))
-          >
+          }
-            {
+        </ScrollableList>
-              account && accountIds && accountIds.map((id) => (
-                <Account key={`follower-${id}`} id={id} compact withBio />
-              ))
-            }
-          </ScrollableList>
-        </div>
       </Block>
     )
   }

app/javascript/gabsocial/features/following.js

@@ -9,7 +9,7 @@ import {
 import Account from '../components/account'
 import ScrollableList from '../components/scrollable_list'
 import Block from '../components/block'
-import Heading from '../components/heading'
+import BlockHeading from '../components/block_heading'
 import AccountPlaceholder from '../components/placeholder/account_placeholder'
 
 const mapStateToProps = (state, { account }) => {
@@ -76,29 +76,23 @@ class Following extends ImmutablePureComponent {
 
     return (
       <Block>
-        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
+        <BlockHeading title={intl.formatMessage(messages.follows)} />
-          <Heading size='h2'>
+        <ScrollableList
-            {intl.formatMessage(messages.follows)}
+          scrollKey='following'
-          </Heading>
+          hasMore={hasMore}
-        </div>
+          isLoading={isLoading}
-        <div className={[_s.default, _s.py10].join(' ')}>
+          showLoading={isLoading}
-          <ScrollableList
+          onLoadMore={this.handleLoadMore}
-            scrollKey='following'
+          placeholderComponent={AccountPlaceholder}
-            hasMore={hasMore}
+          placeholderCount={4}
-            isLoading={isLoading}
+          emptyMessage={intl.formatMessage(messages.empty)}
-            showLoading={isLoading}
+        >
-            onLoadMore={this.handleLoadMore}
+          {
-            placeholderComponent={AccountPlaceholder}
+            account && accountIds && accountIds.map((id) => (
-            placeholderCount={4}
+              <Account key={`following-${id}`} id={id} compact withBio />
-            emptyMessage={intl.formatMessage(messages.empty)}
+            ))
-          >
+          }
-            {
+        </ScrollableList>
-              account && accountIds && accountIds.map((id) => (
-                <Account key={`following-${id}`} id={id} compact withBio />
-              ))
-            }
-          </ScrollableList>
-        </div>
       </Block>
     )
   }

app/javascript/gabsocial/features/group_members.js

@@ -4,7 +4,6 @@ import debounce from 'lodash.debounce'
 import isObject from 'lodash.isobject'
 import { FormattedMessage } from 'react-intl'
 import {
-	fetchGroup,
 	fetchMembers,
 	expandMembers,
 } from '../actions/groups'
@@ -12,13 +11,13 @@ import { openPopover } from '../actions/popover'
 import Account from '../components/account'
 import ColumnIndicator from '../components/column_indicator'
 import Block from '../components/block'
-import Heading from '../components/heading'
+import BlockHeading from '../components/block_heading'
 import Input from '../components/input'
 import ScrollableList from '../components/scrollable_list'
 
 const mapStateToProps = (state, { params }) => {
-	const groupId = isObject(params) ? params['id'] : null
+	const groupId = isObject(params) ? params['id'] : -1
-	const group = state.getIn(['groups', groupId])
+	const group = groupId === -1 ? null : state.getIn(['groups', groupId])
 
 	return {
 		group,
@@ -30,9 +29,6 @@ const mapStateToProps = (state, { params }) => {
 }
 
 const mapDispatchToProps = (dispatch) => ({
-	onFetchGroup(groupId) {
-		dispatch(fetchGroup(groupId))
-	},
 	onFetchMembers(groupId) {
 		dispatch(fetchMembers(groupId))
 	},
@@ -59,20 +55,10 @@ class GroupMembers extends ImmutablePureComponent {
 		accountIds: ImmutablePropTypes.list,
 		hasMore: PropTypes.bool,
 		onExpandMembers: PropTypes.func.isRequired,
-		onFetchGroup: PropTypes.func.isRequired,
 		onFetchMembers: PropTypes.func.isRequired,
 		onOpenGroupMemberOptions: PropTypes.func.isRequired,
 	}
 
-	componentDidMount() {
-		const { group, groupId } = this.props
-
-		if (!group && groupId) {
-			console.log("componentDidMount:", groupId)
-			this.props.onFetchGroup(groupId)
-		}
-	}
-
 	componentWillMount() {
 		const { groupId } = this.props
 
@@ -109,11 +95,8 @@ class GroupMembers extends ImmutablePureComponent {
 			
 		return (
 			<Block>
-				<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+				<BlockHeading title='Group Members' />
-					<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+
-						<Heading size='h2'>Members</Heading>
-					</div>
-				</div>
 				{
 					/* : todo :
 					<div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>

app/javascript/gabsocial/features/group_removed_accounts.js

@@ -1,6 +1,8 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
 import debounce from 'lodash.debounce'
+import isObject from 'lodash.isobject'
 import {
 	fetchRemovedAccounts,
 	expandRemovedAccounts,
@@ -8,70 +10,102 @@ import {
 } from '../actions/groups'
 import { FormattedMessage } from 'react-intl'
 import Account from '../components/account'
+import Block from '../components/block'
+import BlockHeading from '../components/block_heading'
+import ColumnIndicator from '../components/column_indicator'
 import ScrollableList from '../components/scrollable_list'
-import { defineMessages, injectIntl } from 'react-intl'
 
 const messages = defineMessages({
 	remove: { id: 'groups.removed_accounts', defaultMessage: 'Allow joining' },
 })
 
-const mapStateToProps = (state, { groupId }) => ({
+const mapStateToProps = (state, { params }) => {
-	group: state.getIn(['groups', groupId]),
+	const groupId = isObject(params) ? params['id'] : -1
-	accountIds: state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'items']),
+	const group = groupId === -1 ? null : state.getIn(['groups', groupId])
-	hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'next']),
+
+	return {
+		group,
+		groupId,
+		accountIds: state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'items']),
+		hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'next']),
+	}
+}
+
+const mapDispatchToProps = (dispatch) => ({
+	onFetchRemovedAccounts(groupId) {
+		dispatch(fetchRemovedAccounts(groupId))
+	},
+	onExpandRemovedAccounts(groupId) {
+		dispatch(expandRemovedAccounts(groupId))
+	},
+	onRemoveRemovedAccount(groupId, accountId) {
+		dispatch(removeRemovedAccount(groupId, accountId))
+	},
 })
 
 export default
-@connect(mapStateToProps)
 @injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
 class GroupRemovedAccounts extends ImmutablePureComponent {
 
 	static propTypes = {
 		groupId: PropTypes.string.isRequired,
-		dispatch: PropTypes.func.isRequired,
 		accountIds: ImmutablePropTypes.list,
 		hasMore: PropTypes.bool,
+		onFetchRemovedAccounts: PropTypes.func.isRequired,
+		onExpandRemovedAccounts: PropTypes.func.isRequired,
+		onRemoveRemovedAccount: PropTypes.func.isRequired,
 	}
 
 	componentWillMount() {
 		const { groupId } = this.props
 
-		this.props.dispatch(fetchRemovedAccounts(groupId))
+		this.props.onFetchRemovedAccounts(groupId)
 	}
 
 	componentWillReceiveProps(nextProps) {
 		if (nextProps.groupId !== this.props.groupId) {
-			this.props.dispatch(fetchRemovedAccounts(nextProps.groupId))
+			this.props.onFetchRemovedAccounts(nextProps.groupId)
 		}
 	}
 
 	handleLoadMore = debounce(() => {
-		this.props.dispatch(expandRemovedAccounts(this.props.groupId))
+		this.props.onExpandRemovedAccounts(this.props.groupId)
 	}, 300, { leading: true })
 
 	render() {
-		const { accountIds, hasMore, group, intl } = this.props
+		const {
+			accountIds,
+			hasMore,
+			group,
+			intl,
+		} = this.props
+
+		if (!group) return <ColumnIndicator type='loading' />
 
 		return (
-			<ScrollableList
+			<Block>
-				scrollKey='removed_accounts'
+				<BlockHeading title='Removed Accounts' />
-				hasMore={hasMore}
+				<ScrollableList
-				showLoading={(!group || !accountIds)}
+					scrollKey='removed_accounts'
-				onLoadMore={this.handleLoadMore}
+					hasMore={hasMore}
-				emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
+					showLoading={(!group || !accountIds)}
-			>
+					onLoadMore={this.handleLoadMore}
-				{
+					emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
-					accountIds && accountIds.map((id) => (
+				>
-						<Account
+					{
-							key={id}
+						accountIds && accountIds.map((id) => (
-							id={id}
+							<Account
-							actionIcon='subtract'
+								key={id}
-							onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
+								id={id}
-							actionTitle={intl.formatMessage(messages.remove)}
+								actionIcon='subtract'
-						/>
+								onActionClick={() => this.props.onRemoveRemovedAccount(group.get('id'), id)}
-					))
+								actionTitle={intl.formatMessage(messages.remove)}
-				}
+							/>
-			</ScrollableList>
+						))
+					}
+				</ScrollableList>
+			</Block>
 		)
 	}
 

app/javascript/gabsocial/features/mutes.js

@@ -6,7 +6,7 @@ import { me } from '../initial_state'
 import { fetchMutes, expandMutes } from '../actions/mutes'
 import Account from '../components/account'
 import Block from '../components/block'
-import Heading from '../components/heading'
+import BlockHeading from '../components/block_heading'
 import ScrollableList from '../components/scrollable_list'
 
 const mapStateToProps = (state) => ({
@@ -50,11 +50,7 @@ class Mutes extends ImmutablePureComponent {
 
     return (
       <Block>
-        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
+        <BlockHeading title={<FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />} />
-          <Heading size='h2'>
-            <FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />
-          </Heading>
-        </div>
         <ScrollableList
           scrollKey='mutes'
           onLoadMore={this.handleLoadMore}