Progress

app/javascript/gabsocial/components/modal/bookmark_collection_create_modal.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { defineMessages, injectIntl } from 'react-intl'
+import ModalLayout from './modal_layout'
+import BookmarkCollectionCreate from '../../features/bookmark_collection_create'
+
+class BookmarkCollectionCreateModal extends React.PureComponent {
+
+  render() {
+    const { onClose } = this.props
+
+    return (
+      <ModalLayout
+        title='Create Bookmark Collection'
+        width={500}
+        onClose={onClose}
+      >
+        <BookmarkCollectionCreate isModal />
+      </ModalLayout>
+    )
+  }
+
+}
+
+BookmarkCollectionCreateModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+}
+
+export default BookmarkCollectionCreateModal

app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js

@@ -1,88 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import { changeSetting, saveSettings } from '../../actions/settings'
-import ModalLayout from './modal_layout'
-import Button from '../button'
-import SettingSwitch from '../setting_switch'
-import Text from '../text'
-
-class CommunityTimelineSettingsModal extends ImmutablePureComponent {
-
-  handleSaveAndClose = () => {
-    this.props.onSave()
-  }
-
-  render() {
-    const {
-      intl,
-      settings,
-      onChange,
-      onClose,
-    } = this.props
-
-    return (
-      <ModalLayout
-        onClose={onClose}
-        width={320}
-        title={intl.formatMessage(messages.title)}
-      >
-      
-        <div className={[_s.d, _s.pb10].join(' ')}>
-          <SettingSwitch
-            prefix='community_timeline'
-            settings={settings}
-            settingPath={['shows', 'onlyMedia']}
-            onChange={onChange}
-            label={intl.formatMessage(messages.onlyMedia)}
-          />
-        </div>
-
-        <Button
-          backgroundColor='brand'
-          color='white'
-          className={_s.jcCenter}
-          onClick={this.handleSaveAndClose}
-        >
-          <Text color='inherit' weight='bold' align='center'>
-            {intl.formatMessage(messages.saveAndClose)}
-          </Text>
-        </Button>
-
-      </ModalLayout>
-    )
-  }
-}
-
-const messages = defineMessages({
-  title: { id: 'community_timeline_settings', defaultMessage: 'Community Feed Settings' },
-  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
-  onlyMedia: { id: 'community.column_settings.media_only', defaultMessage: 'Media Only' },
-})
-
-const mapStateToProps = (state) => ({
-  settings: state.getIn(['settings', 'community']),
-})
-
-const mapDispatchToProps = (dispatch, { onClose }) => ({
-  onChange(key, checked) {
-    dispatch(changeSetting(['community', ...key], checked))
-  },
-  onSave() {
-    dispatch(saveSettings())
-    onClose()
-  },
-})
-
-CommunityTimelineSettingsModal.propTypes = {
-  intl: PropTypes.object.isRequired,
-  settings: ImmutablePropTypes.map.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-}
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CommunityTimelineSettingsModal))

app/javascript/gabsocial/components/modal/deck_column_add_options_modal.js

@@ -1,36 +1,138 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
 import { connect } from 'react-redux'
 import { openModal } from '../../actions/modal'
+import { setDeckColumnAtIndex } from '../../actions/deck'
+import { getOrderedLists, getListOfGroups } from '../../selectors'
+import { fetchLists } from '../../actions/lists'
+import { fetchGroupsByTab } from '../../actions/groups'
 import { MODAL_DECK_COLUMN_ADD } from '../../constants'
 import Heading from '../heading'
 import Button from '../button'
 import Block from '../block'
+import Input from '../input'
+import List from '../list'
 
-class DeckColumnAddOptionsModal extends React.PureComponent {
+class DeckColumnAddOptionsModal extends ImmutablePureComponent {
 
   state = {
-    selectedItem: null,
+    hashtagValue: '',
+    usernameValue: '',
+  }
+
+  componentDidMount() {
+    switch (this.props.column) {
+      case 'list':
+        this.props.onFetchLists()
+        break
+      case 'group':
+        this.props.onFetchMemberGroups()
+        break
+      default:
+        break
+    }
   }
 
   onClickClose = () => {
     this.props.onClose()
-    this.props.dispatch(openModal(MODAL_DECK_COLUMN_ADD))
+    this.props.onOpenDeckColumnAddModal()
   }
 
-  handleAdd = () => {
-    //
+  handleAdd = (id) => {
+    this.props.onSetDeckColumn(id)
+    this.props.onClose()
+  }
+
+  handleAddHashtag = () => {
+    this.handleAdd(`hashtag.${this.state.hashtagValue}`)
+    this.setState({ hashtagValue: '' })
+  }
+
+  onChangeHashtagValue = (hashtagValue) => {
+    this.setState({ hashtagValue })
+  }
+
+  onChangeUsernameValue = (usernameValue) => {
+    this.setState({ usernameValue })
+  }
+
+  getContentForColumn = () => {
+    const { column, lists, groups, accounts } = this.props
+    const { hashtagValue } = this.state
+
+    if (column === 'hashtag') {
+      return (
+        <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+          <Input
+            type='text'
+            value={hashtagValue}
+            placeholder='gabfam'
+            id='hashtag-deck'
+            title='Enter hashtag'
+            onChange={this.onChangeHashtagValue}
+          />
+        </div>
+      )
+    } else if (column === 'list') {
+      const listItems = lists.map((list) => ({
+        onClick: () => this.handleAdd(`list.${list.get('id')}`),
+        title: list.get('title'),
+      }))
+  
+      return (
+        <div className={[_s.d, _s.maxH340PX, _s.overflowYScroll].join(' ')}>
+          <List
+            scrollKey='lists-deck-add'
+            showLoading={lists.size === 0}
+            emptyMessage="You don't have any lists yet."
+            items={listItems}
+          />
+        </div>
+      )
+    } else if (column === 'group') {
+      const listItems = groups.map((group) => ({
+        onClick: () => this.handleAdd(`group.${group.get('id')}`),
+        title: group.get('title'),
+      }))
+  
+      return (
+        <div className={[_s.d, _s.maxH340PX, _s.overflowYScroll].join(' ')}>
+          <List
+            scrollKey='groups-deck-add'
+            showLoading={groups.size === 0}
+            emptyMessage="You are not a member of any groups yet."
+            items={listItems}
+          />
+        </div>
+      )
+    } else if (column === 'group') {
+      return (
+        <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+          <Input
+            type='text'
+            value={usernameValue}
+            placeholder=''
+            id='user-deck'
+            title='Enter username'
+            onChange={this.onChangeUsernameValue}
+          />
+        </div>
+      )
+    }
+
   }
 
   render() {
     const { column } = this.props
-    const { selectedItem } = this.state
-
-    // user, hashtag, list, groups
+    const { hashtagValue } = this.state
 
     if (!column) return <div />
     const title = `Select a ${column}`
 
+    const content = this.getContentForColumn()
+
     return (
       <div style={{width: '520px'}} className={[_s.d, _s.modal].join(' ')}>
         <Block>
@@ -49,16 +151,19 @@ class DeckColumnAddOptionsModal extends React.PureComponent {
               {title}
             </Heading>
             <div className={[_s.d, _s.w115PX, _s.aiEnd, _s.jcCenter, _s.mlAuto].join(' ')}>
-              <Button
-                isDisabled={!selectedItem}
-                onClick={this.handleAdd}
-              >
-                Add
-              </Button>
+              {
+                column === 'hashtag' &&
+                <Button
+                  isDisabled={!hashtagValue}
+                  onClick={this.handleAddHashtag}
+                >
+                  Add
+                </Button>
+              }
             </div>
           </div>
           <div className={[_s.d].join(' ')}>
-            test
+            {content}
           </div>
         </Block>
       </div>
@@ -67,9 +172,33 @@ class DeckColumnAddOptionsModal extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  lists: getOrderedLists(state),
+  groups: getListOfGroups(state, { type: 'member' }),
+  accounts: [],
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onFetchLists() {
+    dispatch(fetchLists())
+  },
+  onFetchMemberGroups() {
+    dispatch(fetchGroupsByTab('member'))
+  },
+  onSetDeckColumn(id) {
+    dispatch(setDeckColumnAtIndex(id))
+  },
+  onOpenDeckColumnAddModal() {
+    dispatch(openModal(MODAL_DECK_COLUMN_ADD))
+  },
+})
+
 DeckColumnAddOptionsModal.propTypes = {
+  groupIds: ImmutablePropTypes.list,
   onClose: PropTypes.func.isRequired,
+  onFetchLists: PropTypes.func.isRequired,
+  onSetDeckColumn: PropTypes.func.isRequired,
   column: PropTypes.string.isRequired,
 }
 
-export default connect()(DeckColumnAddOptionsModal)
+export default connect(mapStateToProps, mapDispatchToProps)(DeckColumnAddOptionsModal)

app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js

@@ -1,88 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import { changeSetting, saveSettings } from '../../actions/settings'
-import ModalLayout from './modal_layout'
-import Button from '../button'
-import SettingSwitch from '../setting_switch'
-import Text from '../text'
-
-class HashtagTimelineSettingsModal extends ImmutablePureComponent {
-
-  handleSaveAndClose = () => {
-    this.props.onSave()
-  }
-
-  render() {
-    const { intl, settings, onChange, onClose } = this.props
-
-    // : todo :
-
-    return (
-      <ModalLayout
-        width={320}
-        title={intl.formatMessage(messages.title)}
-        onClose={onClose}
-      >
-
-        <div className={[_s.d, _s.pb10].join(' ')}>
-          <SettingSwitch
-            prefix='community_timeline'
-            settings={settings}
-            settingPath={['shows', 'inSidebar']}
-            onChange={onChange}
-            label={intl.formatMessage(messages.showInSidebar)}
-          />
-        </div>
-
-        <Button
-          backgroundColor='brand'
-          color='white'
-          className={_s.jcCenter}
-          onClick={this.handleSaveAndClose}
-        >
-          <Text color='inherit' weight='bold' align='center'>
-            {intl.formatMessage(messages.saveAndClose)}
-          </Text>
-        </Button>
-
-      </ModalLayout>
-    )
-  }
-}
-
-const messages = defineMessages({
-  title: { id: 'hashtag_timeline_settings', defaultMessage: 'Hashtag Timeline Settings' },
-  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
-  onlyMedia: { id: 'community.column_settings.media_only', defaultMessage: 'Media Only' },
-  showInSidebar: { id: 'show_in_sidebar', defaultMessage: 'Show in Sidebar' },
-})
-
-const mapStateToProps = (state) => ({
-  settings: state.getIn(['settings', 'community']),
-})
-
-const mapDispatchToProps = (dispatch, { onClose }) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['community', ...key], checked))
-    },
-    onSave() {
-      dispatch(saveSettings())
-      onClose()
-    },
-  }
-}
-
-HasttagTimelineSettingsModal.propTypes = {
-  intl: PropTypes.object.isRequired,
-  settings: ImmutablePropTypes.map.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-}
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(HashtagTimelineSettingsModal))

app/javascript/gabsocial/components/modal/modal_root.js

@@ -8,11 +8,12 @@ import ModalBase from './modal_base'
 import BundleErrorModal from './bundle_error_modal'
 import LoadingModal from './loading_modal'
 import {
+  MODAL_ALBUM_CREATE,
   MODAL_BLOCK_ACCOUNT,
+  MODAL_BOOKMARK_COLLECTION_CREATE,
   MODAL_BOOST,
   MODAL_CHAT_CONVERSATION_CREATE,
   MODAL_CHAT_CONVERSATION_DELETE,
-  MODAL_COMMUNITY_TIMELINE_SETTINGS,
   MODAL_COMPOSE,
   MODAL_CONFIRM,
   MODAL_DECK_COLUMN_ADD,
@@ -24,7 +25,6 @@ import {
   MODAL_GROUP_CREATE,
   MODAL_GROUP_DELETE,
   MODAL_GROUP_PASSWORD,
-  MODAL_HASHTAG_TIMELINE_SETTINGS,
   MODAL_HOME_TIMELINE_SETTINGS,
   MODAL_HOTKEYS,
   MODAL_LIST_ADD_USER,
@@ -44,11 +44,12 @@ import {
   MODAL_VIDEO,
 } from '../../constants'
 import {
+  AlbumCreateModal,
   BlockAccountModal,
+  BookmarkCollectionCreateModal,
   BoostModal,
   ChatConversationCreateModal,
   ChatConversationDeleteModal,
-  CommunityTimelineSettingsModal,
   ComposeModal,
   ConfirmationModal,
   DeckColumnAddModal,
@@ -62,7 +63,6 @@ import {
   GroupMembersModal,
   GroupPasswordModal,
   GroupRemovedAccountsModal,
-  HashtagTimelineSettingsModal,
   HomeTimelineSettingsModal,
   HotkeysModal,
   ListAddUserModal,
@@ -83,11 +83,12 @@ import {
 } from '../../features/ui/util/async_components'
 
 const MODAL_COMPONENTS = {
+  [MODAL_ALBUM_CREATE]: AlbumCreateModal,
   [MODAL_BLOCK_ACCOUNT]: BlockAccountModal,
+  [MODAL_BOOKMARK_COLLECTION_CREATE]: BookmarkCollectionCreateModal,
   [MODAL_BOOST]: BoostModal,
   [MODAL_CHAT_CONVERSATION_CREATE]: ChatConversationCreateModal,
   [MODAL_CHAT_CONVERSATION_DELETE]: ChatConversationDeleteModal,
-  [MODAL_COMMUNITY_TIMELINE_SETTINGS]: CommunityTimelineSettingsModal,
   [MODAL_COMPOSE]: ComposeModal,
   [MODAL_CONFIRM]: ConfirmationModal,
   [MODAL_DECK_COLUMN_ADD]: DeckColumnAddModal,
@@ -99,7 +100,6 @@ const MODAL_COMPONENTS = {
   [MODAL_GROUP_CREATE]: GroupCreateModal,
   [MODAL_GROUP_DELETE]: GroupDeleteModal,
   [MODAL_GROUP_PASSWORD]: GroupPasswordModal,
-  [MODAL_HASHTAG_TIMELINE_SETTINGS]: HashtagTimelineSettingsModal,
   [MODAL_HOME_TIMELINE_SETTINGS]: HomeTimelineSettingsModal,
   [MODAL_HOTKEYS]: HotkeysModal,
   [MODAL_LIST_ADD_USER]: ListAddUserModal,