From 86dd626a8ef5a67ff9260963d8057e5c7a1193d1 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 30 Oct 2020 16:25:33 -0500
Subject: [PATCH] Added action buttons to emptyMessage in AccountTimeline,
 ListsDirectory
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- action buttons to emptyMessage in AccountTimeline, ListsDirectory
---
 .../gabsocial/features/account_timeline.js    | 31 ++++++++++++++++--
 .../gabsocial/features/lists_directory.js     | 32 +++++++++++++++----
 .../gabsocial/pages/profile_page.js           |  6 +++-
 3 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/app/javascript/gabsocial/features/account_timeline.js b/app/javascript/gabsocial/features/account_timeline.js
index 59b03541..678826cc 100644
--- a/app/javascript/gabsocial/features/account_timeline.js
+++ b/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))
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/lists_directory.js b/app/javascript/gabsocial/features/lists_directory.js
index d08b3dfe..0ab737a8 100644
--- a/app/javascript/gabsocial/features/lists_directory.js
+++ b/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 { 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))
\ No newline at end of file
diff --git a/app/javascript/gabsocial/pages/profile_page.js b/app/javascript/gabsocial/pages/profile_page.js
index f8bbc92e..73749efd 100644
--- a/app/javascript/gabsocial/pages/profile_page.js
+++ b/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,