Progress

accounts approved, video player testing, bookmark collections

app/javascript/gabsocial/features/bookmark_collection_create.js

@@ -2,9 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
-import { changeListEditorTitle, submitListEditor } from '../actions/lists'
+import { createBookmarkCollection } from '../actions/bookmarks'
 import { closeModal } from '../actions/modal'
-import { MODAL_LIST_CREATE } from '../constants'
 import Button from '../components/button'
 import Input from '../components/input'
 import Form from '../components/form'
@@ -21,14 +20,13 @@ class BookmarkCollectionCreate extends React.PureComponent {
   }
 
   handleOnSubmit = () => {
-    this.props.onSubmit()
+    this.props.onSubmit(this.state.value)
   }
 
   render() {
-    const { disabled, isModal } = this.props
     const { value } = this.state
 
-    const isDisabled = !value || disabled
+    const isDisabled = !value
 
     return (
       <Form>
@@ -54,14 +52,10 @@ class BookmarkCollectionCreate extends React.PureComponent {
 
 }
 
-const mapStateToProps = (state) => ({
-  disabled: state.getIn(['listEditor', 'isSubmitting']),
-})
-
 const mapDispatchToProps = (dispatch, { isModal }) => ({
-  onSubmit() {
-    if (isModal) dispatch(closeModal(MODAL_LIST_CREATE))
-    dispatch(submitListEditor(true))
+  onSubmit(title) {
+    if (isModal) dispatch(closeModal())
+    dispatch(createBookmarkCollection(title))
   },
 })
 
@@ -70,4 +64,4 @@ BookmarkCollectionCreate.propTypes = {
   isModal: PropTypes.bool,
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(BookmarkCollectionCreate)
+export default connect(null, mapDispatchToProps)(BookmarkCollectionCreate)

app/javascript/gabsocial/features/bookmark_collection_edit.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import {
+  updateBookmarkCollection,
+  removeBookmarkCollection,
+} from '../actions/bookmarks'
+import { closeModal } from '../actions/modal'
+import Button from '../components/button'
+import Input from '../components/input'
+import Form from '../components/form'
+import Text from '../components/text'
+
+class BookmarkCollectionEdit extends React.PureComponent {
+
+  state = {
+    value: '',
+  }
+
+  componentDidMount() {
+    if (!this.props.bookmarkCollection) {
+      this.props.onFetchBookmarkCollection(this.props.bookmarkCollectionId)
+    }
+  }
+
+  onChange = (value) => {
+    this.setState({ value })
+  }
+
+  handleOnSubmit = () => {
+    this.props.onSubmit(this.state.value)
+  }
+
+  handleOnRemove = () => {
+    this.props.onRemove()
+  }
+
+  render() {
+    const { value } = this.state
+
+    const isDisabled = !value
+
+    return (
+      <Form>
+        <Input
+          title='Title'
+          placeholder='Bookmark collection title'
+          value={value}
+          onChange={this.onChange}
+        />
+
+        <Button
+          isDisabled={isDisabled}
+          onClick={this.handleOnSubmit}
+          className={[_s.mt10].join(' ')}
+        >
+          <Text color='inherit' align='center'>
+            Update
+          </Text>
+        </Button>
+
+        <Button
+          backgroundColor='danger'
+          color='white'
+          onClick={this.handleOnRemove}
+          className={[_s.mt10].join(' ')}
+        >
+          <Text color='inherit' align='center'>
+            Update
+          </Text>
+        </Button>
+      </Form>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, { bookmarkCollectionId }) => ({
+  bookmarkCollection: state.getIn(['bookmark_collections', bookmarkCollectionId]),
+})
+
+const mapDispatchToProps = (dispatch, { isModal, bookmarkCollectionId }) => ({
+  onSubmit(title) {
+    if (isModal) dispatch(closeModal())
+    dispatch(updateBookmarkCollection(title))
+  },
+  onRemove() {
+    if (isModal) dispatch(closeModal())
+    dispatch(removeBookmarkCollection(bookmarkCollectionId))
+  },
+})
+
+BookmarkCollectionEdit.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  isModal: PropTypes.bool,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BookmarkCollectionEdit)

app/javascript/gabsocial/features/bookmark_collections.js

@@ -29,19 +29,32 @@ class BookmarkCollections extends ImmutablePureComponent {
 
   render() {
     const {
+      isMyAccount,
       isLoading,
       isError,
       bookmarkCollections,
     } = this.props
 
+    if (!isMyAccount) {
+      return <ColumnIndicator type='missing' />
+    }
+
     if (isError) {
       return <ColumnIndicator type='error' message='Error fetching bookmark collections' />
     }
 
-    const listItems = [{ to: `/${meUsername}/bookmark_collections/bookmarks`, title: 'Bookmarks' }].concat(!!bookmarkCollections ? bookmarkCollections.map((s) => ({
-      to: s.get('to'),
-      title: s.get('title'),
-    })) : [])
+    console.log("bookmarkCollections:", bookmarkCollections)
+
+    let listItems = !!bookmarkCollections ? bookmarkCollections.map((b) => ({
+      to: `/${meUsername}/bookmark_collections/${b.get('id')}`,
+      title: b.get('title'),
+    })) : []
+    listItems = listItems.unshift({
+      to: `/${meUsername}/bookmark_collections/saved`,
+      title: 'Bookmarks',
+    })
+
+    console.log("listItems:", listItems)
 
     return (
       <Block>
@@ -69,10 +82,11 @@ class BookmarkCollections extends ImmutablePureComponent {
 
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, { params: { username } }) => ({
+  isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
   isError: state.getIn(['bookmark_collections', 'isError']),
   isLoading: state.getIn(['bookmark_collections', 'isLoading']),
-  shortcuts: state.getIn(['bookmark_collections', 'items']),
+  bookmarkCollections: state.getIn(['bookmark_collections', 'items']),
 })
 
 const mapDispatchToProps = (dispatch) => ({

app/javascript/gabsocial/features/bookmarked_statuses.js

@@ -9,6 +9,9 @@ import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from '../actions/bo
 import { meUsername } from '../initial_state'
 import StatusList from '../components/status_list'
 import ColumnIndicator from '../components/column_indicator'
+import Block from '../components/block'
+import Button from '../components/button'
+import Text from '../components/text'
 
 class BookmarkedStatuses extends ImmutablePureComponent {
 
@@ -32,15 +35,37 @@ class BookmarkedStatuses extends ImmutablePureComponent {
       return <ColumnIndicator type='missing' />
     }
 
+    console.log("statusIds:", statusIds)
+
     return (
-      <StatusList
-        statusIds={statusIds}
-        scrollKey='bookmarked_statuses'
-        hasMore={hasMore}
-        isLoading={isLoading}
-        onLoadMore={this.handleLoadMore}
-        emptyMessage={<FormattedMessage id='empty_column.bookmarked_statuses' defaultMessage="You don't have any bookmarked gabs yet. If you are GabPRO, when you bookmark one, it will show up here." />}
-      />
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <Block>
+          <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+              <Text size='extraLarge' weight='bold'>
+                Bookmarks:
+              </Text>
+              <Button
+                className={[_s.px10, _s.mlAuto].join(' ')}
+                onClick={this.handleOpenModal}
+                backgroundColor='tertiary'
+                color='tertiary'
+                icon='cog'
+              />
+            </div>
+          </div>
+        </Block>
+        <div className={[_s.d, _s.w100PC, _s.mt10].join(' ')}>
+          <StatusList
+            statusIds={statusIds}
+            scrollKey='bookmarked_statuses'
+            hasMore={hasMore}
+            isLoading={isLoading}
+            onLoadMore={this.handleLoadMore}
+            emptyMessage={<FormattedMessage id='empty_column.bookmarked_statuses' defaultMessage="You don't have any bookmarked gabs yet. If you are GabPRO, when you bookmark one, it will show up here." />}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -49,9 +74,9 @@ class BookmarkedStatuses extends ImmutablePureComponent {
 const mapStateToProps = (state, { params: { username, bookmarkCollectionId } }) => ({
   bookmarkCollectionId,
   isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
-  statusIds: state.getIn(['status_lists', 'bookmarks', 'items']),
-  isLoading: state.getIn(['status_lists', 'bookmarks', 'isLoading'], true),
-  hasMore: !!state.getIn(['status_lists', 'bookmarks', 'next']),
+  statusIds: state.getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'items']),
+  isLoading: state.getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'isLoading'], true),
+  hasMore: !!state.getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'next']),
 })
 
 BookmarkedStatuses.propTypes = {
@@ -59,6 +84,7 @@ BookmarkedStatuses.propTypes = {
   statusIds: ImmutablePropTypes.list.isRequired,
   hasMore: PropTypes.bool,
   isLoading: PropTypes.bool,
+  bookmarkCollectionId: PropTypes.string,
   isMyAccount: PropTypes.bool.isRequired,
 }
 

app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js

@@ -15,7 +15,7 @@ import Text from '../../../components/text'
 class ComposeFormSubmitButton extends React.PureComponent {
 
   handleSubmit = () => {
-
+    this.props.onSubmit()
   }
 
   render() {

app/javascript/gabsocial/features/deck.js

@@ -201,7 +201,7 @@ class Deck extends React.PureComponent {
             <DeckColumn title='Compose' icon='pencil' noButtons>
               <WrappedBundle component={Compose} />
             </DeckColumn>
-            {
+            { /** : todo : */
               !isPro &&
               <DeckColumn title='Gab Deck for GabPRO' icon='pro' noButtons>
                 <div className={[_s.d, _s.px15, _s.py15].join(' ')}>

app/javascript/gabsocial/features/introduction.js

@@ -113,6 +113,7 @@ class SlidePhotos extends ImmutablePureComponent {
                   id='display-name'
                   title='Display name'
                   placeholder='Add your name...'
+                  maxLength={30}
                   value={displayNameValue}
                   onChange={this.handleDisplayNameChange}
                   onBlur={this.handleDisplayNameBlur}

app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js

@@ -4,9 +4,15 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { connect } from 'react-redux'
 import Textarea from 'react-textarea-autosize'
-import { openModal } from '../../../actions/modal'
+import { openPopover } from '../../../actions/popover'
+import { modal } from '../../../actions/modal'
 import { sendChatMessage } from '../../../actions/chat_messages'
-import { CX } from '../../../constants'
+import { me } from '../../../initial_state'
+import {
+  CX,
+  MODAL_PRO_UPGRADE,
+  POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS,
+} from '../../../constants'
 import Button from '../../../components/button'
 import Icon from '../../../components/icon'
 import Input from '../../../components/input'
@@ -25,7 +31,11 @@ class ChatMessagesComposeForm extends React.PureComponent {
   }
 
   handleOnExpire = () => {
-    //
+    if (this.props.isPro) {
+      this.props.onShowExpirePopover(this.expiresBtn)
+    } else {
+      this.props.onShowProModal()
+    }
   }
 
   onChange = (e) => {
@@ -181,16 +191,33 @@ class ChatMessagesComposeForm extends React.PureComponent {
 
 }
 
-const mapDispatchToProps = (dispatch) => ({
+const mapStateToProps = (state) => ({
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+})
+
+const mapDispatchToProps = (dispatch, { chatConversationId }) => ({
   onSendChatMessage(text, chatConversationId) {
     dispatch(sendChatMessage(text, chatConversationId))
   },
+  onShowProModal() {
+    dispatch(openModal(MODAL_PRO_UPGRADE))
+  },
+  onShowExpirePopover(targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS, {
+      targetRef,
+      chatConversationId,
+      position: 'top',
+    }))
+  }
 })
 
 ChatMessagesComposeForm.propTypes = {
   chatConversationId: PropTypes.string,
   isXS: PropTypes.bool,
-  onSendMessage: PropTypes.func.isRequired,
+  isPro: PropTypes.bool,
+  onSendChatMessage: PropTypes.func.isRequired,
+  onShowExpirePopover: PropTypes.func.isRequired,
+  onShowProModal: PropTypes.func.isRequired,
 }
 
-export default connect(null, mapDispatchToProps)(ChatMessagesComposeForm)
+export default connect(mapStateToProps, mapDispatchToProps)(ChatMessagesComposeForm)

app/javascript/gabsocial/features/ui/ui.js

@@ -61,6 +61,7 @@ import {
   BlockedAccounts,
   BookmarkCollections,
   BookmarkCollectionCreate,
+  BookmarkCollectionEdit,
   BookmarkedStatuses,
   CaliforniaConsumerProtection,
   CaliforniaConsumerProtectionContact,
@@ -282,10 +283,11 @@ class SwitchingArea extends React.PureComponent {
         <WrappedRoute path='/:username/album_edit/:albumId' page={ModalPage} component={AlbumCreate} content={children} componentParams={{ title: 'Create Album', page: 'edit-album' }} />        
 
         <WrappedRoute path='/:username/likes' page={ProfilePage} component={LikedStatuses} content={children} />
-        <WrappedRoute path='/:username/bookmark_collections' page={ProfilePage} component={BookmarkCollections} content={children} />
         <WrappedRoute path='/:username/bookmark_collections/create' page={ModalPage} component={BookmarkCollectionCreate} content={children} componentParams={{ title: 'Create Bookmark Collection', page: 'create-bookmark-collection' }} />
         <WrappedRoute path='/:username/bookmark_collections/:bookmarkCollectionId' page={ProfilePage} component={BookmarkedStatuses} content={children} />
-
+        <WrappedRoute path='/:username/bookmark_collections/:bookmarkCollectionId/edit' page={ModalPage} component={BookmarkCollectionEdit} content={children} componentParams={{ title: 'Edit Bookmark Collection', page: 'edit-bookmark-collection' }} />
+        <WrappedRoute path='/:username/bookmark_collections' page={ProfilePage} component={BookmarkCollections} content={children} />
+        
         <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status', page: 'status' }} />
 
         <WrappedRoute path='/:username/posts/:statusId/reposts' publicRoute page={ModalPage} component={StatusReposts} content={children} componentParams={{ title: 'Reposts' }} />

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -11,6 +11,8 @@ export function BlockedAccounts() { return import(/* webpackChunkName: "features
 export function BookmarkCollections() { return import(/* webpackChunkName: "features/bookmark_collections" */'../../bookmark_collections') }
 export function BookmarkCollectionCreate() { return import(/* webpackChunkName: "features/bookmark_collection_create" */'../../bookmark_collection_create') }
 export function BookmarkCollectionCreateModal() { return import(/* webpackChunkName: "components/bookmark_collection_create_modal" */'../../../components/modal/bookmark_collection_create_modal') }
+export function BookmarkCollectionEdit() { return import(/* webpackChunkName: "features/bookmark_collection_edit" */'../../bookmark_collection_edit') }
+export function BookmarkCollectionEditModal() { return import(/* webpackChunkName: "components/bookmark_collection_edit_modal" */'../../../components/modal/bookmark_collection_edit_modal') }
 export function BookmarkedStatuses() { return import(/* webpackChunkName: "features/bookmarked_statuses" */'../../bookmarked_statuses') }
 export function BoostModal() { return import(/* webpackChunkName: "components/boost_modal" */'../../../components/modal/boost_modal') }
 export function CaliforniaConsumerProtection() { return import(/* webpackChunkName: "features/california_consumer_protection" */'../../about/california_consumer_protection') }
@@ -21,6 +23,7 @@ export function ChatConversationCreateModal() { return import(/* webpackChunkNam
 export function ChatConversationDeleteModal() { return import(/* webpackChunkName: "components/chat_conversation_delete_modal" */'../../../components/modal/chat_conversation_delete_modal') }
 export function ChatConversationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_options_popover" */'../../../components/popover/chat_conversation_options_popover') }
 export function ChatConversationRequests() { return import(/* webpackChunkName: "features/chat_conversation_requests" */'../../chat_conversation_requests') }
+export function ChatConversationExpirationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_expiration_options_popover" */'../../../components/popover/chat_conversation_expiration_options_popover') }
 export function ChatMessageOptionsPopover() { return import(/* webpackChunkName: "components/chat_message_options_popover" */'../../../components/popover/chat_message_options_popover') }
 export function CommentSortingOptionsPopover() { return import(/* webpackChunkName: "components/comment_sorting_options_popover" */'../../../components/popover/comment_sorting_options_popover') }
 export function CommunityTimeline() { return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline') }