Added action buttons to emptyMessage in AccountTimeline, ListsDirectory

• Added:
- action buttons to emptyMessage in AccountTimeline, ListsDirectory

app/javascript/gabsocial/features/account_timeline.js

@@ -5,8 +5,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { List as ImmutableList } from 'immutable'
 import { injectIntl, defineMessages } from 'react-intl'
+import { MODAL_COMPOSE } from '../constants'
 import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../actions/timelines'
+import { openModal } from '../actions/modal'
 import StatusList from '../components/status_list'
+import Text from '../components/text'
+import Button from '../components/button'
 
 class AccountTimeline extends ImmutablePureComponent {
 
@@ -32,7 +36,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  handleLoadMore = maxId => {
+  handleLoadMore = (maxId) => {
     if (this.props.accountId && this.props.accountId !== -1) {
       this.props.dispatch(expandAccountTimeline(this.props.accountId, {
         maxId,
@@ -41,15 +45,35 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
+  handleOnOpenComposeModal = () => {
+    this.props.dispatch(openModal(MODAL_COMPOSE))
+  }
+
   render() {
     const {
       statusIds,
       featuredStatusIds,
       isLoading,
       hasMore,
-      intl
+      intl,
+      isMe,
     } = this.props
 
+    const emptyMessage = (
+      <div className={[_s.d, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <Text>{intl.formatMessage(messages.empty)}</Text>
+        {
+          isMe &&
+          <Button
+            className={[_s.d, _s.mt15].join(' ')}
+            onClick={this.handleOnOpenComposeModal}
+          >
+            Create a gab
+          </Button>
+        }
+      </div>
+    )
+
     return (
       <StatusList
         scrollKey='account_timeline'
@@ -58,7 +82,7 @@ class AccountTimeline extends ImmutablePureComponent {
         isLoading={isLoading}
         hasMore={hasMore}
         onLoadMore={this.handleLoadMore}
-        emptyMessage={intl.formatMessage(messages.empty)}
+        emptyMessage={emptyMessage}
       />
     )
   }
@@ -94,6 +118,7 @@ AccountTimeline.propTypes = {
   hasMore: PropTypes.bool,
   commentsOnly: PropTypes.bool,
   intl: PropTypes.object.isRequired,
+  isMe: PropTypes.bool.isRequired,
 }
 
 export default injectIntl(connect(mapStateToProps)(AccountTimeline))

app/javascript/gabsocial/features/lists_directory.js

@@ -6,7 +6,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
 import { getOrderedLists } from '../selectors'
 import { fetchLists } from '../actions/lists'
+import { openModal } from '../actions/modal'
+import { MODAL_LIST_CREATE } from '../constants'
 import List from '../components/list'
+import Text from '../components/text'
+import Button from '../components/button'
 
 class ListsDirectory extends ImmutablePureComponent {
 
@@ -20,11 +24,25 @@ class ListsDirectory extends ImmutablePureComponent {
       .catch(() => this.setState({ fetched: true }))
   }
 
+  handleOnOpenListCreateModal = () => {
+    this.props.onOpenListCreateModal()
+  }
+
   render() {
     const { intl, lists } = this.props 
     const { fetched } = this.state
 
-    const emptyMessage = intl.formatMessage(messages.empty)
+    const emptyMessage = (
+      <div className={[_s.d, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <Text>{intl.formatMessage(messages.empty)}</Text>
+        <Button
+          className={[_s.d, _s.mt15].join(' ')}
+          onClick={this.handleOnOpenListCreateModal}
+        >
+          Create a List
+        </Button>
+      </div>
+    )
 
     const listItems = lists.map(list => ({
       to: `/lists/${list.get('id')}`,
@@ -48,18 +66,20 @@ const messages = defineMessages({
   empty: { id: 'empty_column.lists', defaultMessage: 'You don\'t have any lists yet. When you create one, it will show up here.' },
 })
 
-const mapStateToProps = (state) => ({
-  lists: getOrderedLists(state),
-})
-
 const mapDispatchToProps = (dispatch) => ({
   onFetchLists: () => dispatch(fetchLists()),
+  onOpenListCreateModal: () => dispatch(openModal(MODAL_LIST_CREATE)),
+})
+
+const mapStateToProps = (state) => ({
+  lists: getOrderedLists(state),
 })
 
 ListsDirectory.propTypes = {
   intl: PropTypes.object.isRequired,
   lists: ImmutablePropTypes.list,
   onFetchLists: PropTypes.func.isRequired,
+  onOpenListCreateModal: PropTypes.func.isRequired,
 }
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ListsDirectory))

app/javascript/gabsocial/pages/profile_page.js

@@ -25,6 +25,7 @@ class ProfilePage extends ImmutablePureComponent {
       unavailable,
       noSidebar,
       isBlocked,
+      isMe,
       params: { username },
     } = this.props
 
@@ -44,6 +45,7 @@ class ProfilePage extends ImmutablePureComponent {
           !unavailable &&
           React.cloneElement(children, {
             account,
+            isMe,
           })
         }
         {
@@ -68,10 +70,12 @@ const mapStateToProps = (state, { params: { username } }) => {
   const isFollowing = state.getIn(['relationships', accountId, 'following'], false)
 
   const unavailable = (me === accountId) ? false : (isBlocked || (isLocked && !isFollowing))
+  const isMe = me === accountId
   
   const getAccount = makeGetAccount()
 
   return {
+    isMe,
     isBlocked,
     unavailable,
     account: accountId !== -1 ? getAccount(state, accountId) : null,