Updated components to use BlockHeading

• Updated: - components to use BlockHeading
2020-08-06 23:14:13 -05:00 · 2020-08-06 23:14:13 -05:00 · 6328b21186
parent 083a864be3
commit 6328b21186
7 changed files with 110 additions and 113 deletions
--- a/app/javascript/gabsocial/features/blocked_accounts.js
+++ b/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(' ')}>
-          <Heading size='h2'>
-            {intl.formatMessage(messages.blocks)}
-          </Heading>
-        </div>
+        <BlockHeading title={intl.formatMessage(messages.blocks)} />
        <ScrollableList
          scrollKey='blocked_accounts'
          onLoadMore={this.handleLoadMore}
--- a/app/javascript/gabsocial/features/follow_requests.js
+++ b/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'
--- a/app/javascript/gabsocial/features/followers.js
+++ b/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(' ')}>
-          <Heading size='h2'>
-            {intl.formatMessage(messages.followers)}
-          </Heading>
-        </div>
-        <div className={[_s.default, _s.py10].join(' ')}>
-          <ScrollableList
-            scrollKey='followers'
-            hasMore={hasMore}
-            isLoading={isLoading}
-            showLoading={isLoading}
-            onLoadMore={this.handleLoadMore}
-            placeholderComponent={AccountPlaceholder}
-            placeholderCount={4}
-            emptyMessage={intl.formatMessage(messages.empty)}
-          >
-            {
-              account && accountIds && accountIds.map((id) => (
-                <Account key={`follower-${id}`} id={id} compact withBio />
-              ))
-            }
-          </ScrollableList>
-        </div>
+        <BlockHeading title={intl.formatMessage(messages.followers)} />
+        <ScrollableList
+          scrollKey='followers'
+          hasMore={hasMore}
+          isLoading={isLoading}
+          showLoading={isLoading}
+          onLoadMore={this.handleLoadMore}
+          placeholderComponent={AccountPlaceholder}
+          placeholderCount={4}
+          emptyMessage={intl.formatMessage(messages.empty)}
+        >
+          {
+            account && accountIds && accountIds.map((id) => (
+              <Account key={`follower-${id}`} id={id} compact withBio />
+            ))
+          }
+        </ScrollableList>
      </Block>
    )
  }
--- a/app/javascript/gabsocial/features/following.js
+++ b/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(' ')}>
-          <Heading size='h2'>
-            {intl.formatMessage(messages.follows)}
-          </Heading>
-        </div>
-        <div className={[_s.default, _s.py10].join(' ')}>
-          <ScrollableList
-            scrollKey='following'
-            hasMore={hasMore}
-            isLoading={isLoading}
-            showLoading={isLoading}
-            onLoadMore={this.handleLoadMore}
-            placeholderComponent={AccountPlaceholder}
-            placeholderCount={4}
-            emptyMessage={intl.formatMessage(messages.empty)}
-          >
-            {
-              account && accountIds && accountIds.map((id) => (
-                <Account key={`following-${id}`} id={id} compact withBio />
-              ))
-            }
-          </ScrollableList>
-        </div>
+        <BlockHeading title={intl.formatMessage(messages.follows)} />
+        <ScrollableList
+          scrollKey='following'
+          hasMore={hasMore}
+          isLoading={isLoading}
+          showLoading={isLoading}
+          onLoadMore={this.handleLoadMore}
+          placeholderComponent={AccountPlaceholder}
+          placeholderCount={4}
+          emptyMessage={intl.formatMessage(messages.empty)}
+        >
+          {
+            account && accountIds && accountIds.map((id) => (
+              <Account key={`following-${id}`} id={id} compact withBio />
+            ))
+          }
+        </ScrollableList>
      </Block>
    )
  }
--- a/app/javascript/gabsocial/features/group_members.js
+++ b/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 group = state.getIn(['groups', groupId])
+	const groupId = isObject(params) ? params['id'] : -1
+	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(' ')}>
-					<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-						<Heading size='h2'>Members</Heading>
-					</div>
-				</div>
+				<BlockHeading title='Group Members' />
+
 				{
 					/* : todo :
 					<div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
--- a/app/javascript/gabsocial/features/group_removed_accounts.js
+++ b/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 }) => ({
-	group: state.getIn(['groups', groupId]),
-	accountIds: state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'items']),
-	hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'next']),
+const mapStateToProps = (state, { params }) => {
+	const groupId = isObject(params) ? params['id'] : -1
+	const group = groupId === -1 ? null : state.getIn(['groups', groupId])
+
+	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
-				scrollKey='removed_accounts'
-				hasMore={hasMore}
-				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}
-							id={id}
-							actionIcon='subtract'
-							onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
-							actionTitle={intl.formatMessage(messages.remove)}
-						/>
-					))
-				}
-			</ScrollableList>
+			<Block>
+				<BlockHeading title='Removed Accounts' />
+				<ScrollableList
+					scrollKey='removed_accounts'
+					hasMore={hasMore}
+					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}
+								id={id}
+								actionIcon='subtract'
+								onActionClick={() => this.props.onRemoveRemovedAccount(group.get('id'), id)}
+								actionTitle={intl.formatMessage(messages.remove)}
+							/>
+						))
+					}
+				</ScrollableList>
+			</Block>
 		)
 	}

--- a/app/javascript/gabsocial/features/mutes.js
+++ b/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(' ')}>
-          <Heading size='h2'>
-            <FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />
-          </Heading>
-        </div>
+        <BlockHeading title={<FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />} />
        <ScrollableList
          scrollKey='mutes'
          onLoadMore={this.handleLoadMore}