Progress

app/javascript/gabsocial/features/bookmark_collections.js

@@ -3,8 +3,18 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import {
+  MODAL_BOOKMARK_COLLECTION_CREATE,
+} from '../constants'
+import {
+  meUsername,
+} from '../initial_state'
 import { fetchBookmarkCollections } from '../actions/bookmarks'
+import { openModal } from '../actions/modal'
 import ColumnIndicator from '../components/column_indicator'
+import Block from '../components/block'
+import Button from '../components/button'
+import Text from '../components/text'
 import List from '../components/list'
 
 class BookmarkCollections extends ImmutablePureComponent {
@@ -13,6 +23,10 @@ class BookmarkCollections extends ImmutablePureComponent {
     this.props.onFetchBookmarkCollections()
   }
 
+  handleOpenModal = () => {
+    this.props.onOpenModal()
+  }
+
   render() {
     const {
       isLoading,
@@ -24,19 +38,32 @@ class BookmarkCollections extends ImmutablePureComponent {
       return <ColumnIndicator type='error' message='Error fetching bookmark collections' />
     }
 
-    const listItems = shortcuts.map((s) => ({
+    const listItems = [{ to: `/${meUsername}/bookmark_collections/bookmarks`, title: 'Bookmarks' }].concat(!!bookmarkCollections ? bookmarkCollections.map((s) => ({
       to: s.get('to'),
       title: s.get('title'),
-      image: s.get('image'),
-    }))
+    })) : [])
 
     return (
-      <List
-        scrollKey='bookmark-collections'
-        emptyMessage='You have no bookmark collections'
-        items={listItems}
-        showLoading={isLoading}
-      />
+      <Block>
+        <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+            <Text size='extraLarge' weight='bold'>Bookmark Collections</Text>
+            <Button
+              className={[_s.px10, _s.mlAuto].join(' ')}
+              onClick={this.handleOpenModal}
+              backgroundColor='tertiary'
+              color='tertiary'
+              icon='add'
+            />
+          </div>
+        </div>
+        <List
+          scrollKey='bookmark-collections'
+          emptyMessage='You have no bookmark collections'
+          items={listItems}
+          showLoading={isLoading}
+        />
+      </Block>
     )
   }
 
@@ -49,6 +76,9 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  onOpenModal() {
+    dispatch(openModal(MODAL_BOOKMARK_COLLECTION_CREATE))
+  },
   onFetchBookmarkCollections() {
     dispatch(fetchBookmarkCollections())
   },
@@ -58,6 +88,7 @@ BookmarkCollections.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   isError: PropTypes.bool.isRequired,
   onFetchBookmarkCollections: PropTypes.func.isRequired,
+  onOpenModal: PropTypes.func.isRequired,
   bookmarkCollections: ImmutablePropTypes.list,
 }