Progress on Gab Deck, Updates on Compose

• Progress on Gab Deck, Updates on Compose

app/javascript/gabsocial/features/deck.js

@@ -3,18 +3,30 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import {
+  sortableContainer,
+  sortableElement,
+} from 'react-sortable-hoc'
+import { me, meUsername} from '../initial_state'
 import {
   deckConnect,
   deckDisconnect,
+  updateDeckColumnAtIndex,
 } from '../actions/deck'
+import {
+  saveSettings,
+} from '../actions/settings'
 import WrappedBundle from './ui/util/wrapped_bundle'
 import DeckColumn from '../components/deck_column'
 import {
   AccountTimeline,
   Compose,
+  LikedStatuses,
   HomeTimeline,
   Notifications,
   HashtagTimeline,
+  BookmarkedStatuses,
+  ProTimeline,
 } from './ui/util/async_components'
 
 class Deck extends React.PureComponent {
@@ -39,36 +51,135 @@ class Deck extends React.PureComponent {
     this.props.dispatch(deckDisconnect())
   }
 
+  onSortEnd = ({oldIndex, newIndex}) => {
+    this.props.dispatch(updateDeckColumnAtIndex(oldIndex, newIndex))
+  }
+
+  onShouldCancelStart = (event) => {
+    if (event.target) {
+      if (!event.target.hasAttribute('data-sort-header')) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  getDeckColumn = (deckColumn, index) => {
+    if (!deckColumn) return null
+
+    let Component = null
+    let componentParams = {}
+    let title, icon = ''
+
+    switch (deckColumn) {
+      case 'notifications':
+        title = 'Notifications'
+        icon = 'notifications'
+        Component = Notifications
+        break
+      case 'home':
+        title = 'Home'
+        icon = 'home'
+        Component = HomeTimeline
+        break
+      case 'compose':
+        title = 'Compose'
+        icon = 'pencil'
+        Component = Compose
+        break
+      case 'likes':
+        title = 'Likes'
+        icon = 'like'
+        Component = LikedStatuses
+        componentParams = { params: { username: meUsername }}
+        break
+      case 'bookmarks':
+        title = 'Bookmarks'
+        icon = 'bookmark'
+        Component = BookmarkedStatuses
+        componentParams = { params: { username: meUsername }}
+        break
+      case 'pro':
+        title = 'Pro Timeline'
+        icon = 'pro'
+        Component = ProTimeline
+        break
+      default:
+        break
+    }
+
+    if (!Component) {
+      if (deckColumn.indexOf('user.') > -1)  {
+        
+      } else if (deckColumn.indexOf('list.') > -1)  {
+        
+      } else if (deckColumn.indexOf('group.') > -1)  {
+        
+      }
+    }
+
+    if (!Component) return null
+
+    return (
+      <SortableItem
+        key={`deck-column-${index}`}
+        index={index}
+        sortIndex={index}
+      >
+        <DeckColumn title={title} icon={icon} index={index}>
+          <WrappedBundle component={Component} componentParams={componentParams} />
+        </DeckColumn>
+      </SortableItem>
+    )
+  }
+
   render () {
     const { gabDeckOrder } = this.props
 
     console.log("gabDeckOrder:", gabDeckOrder)
 
+    const isEmpty = gabDeckOrder.size === 0
+    // : todo : max: 12
+
     return (
-      <div className={[_s.d, _s.flexRow].join(' ')}>
-        <DeckColumn title='Compose' icon='pencil'>
-          <WrappedBundle component={Compose} />
-        </DeckColumn>
-        <DeckColumn />
-        {/*<DeckColumn title='Home' icon='home'>
-          <WrappedBundle component={HomeTimeline} />
-        </DeckColumn>
-        <DeckColumn title='Notifications' icon='notifications'>
-          <WrappedBundle component={Notifications} />
-        </DeckColumn>
-        <DeckColumn title='Cashtag' icon='list' subtitle='$BTC'>
-          <WrappedBundle component={HashtagTimeline} componentParams={{ params: { id: 'btc' } }} />
-        </DeckColumn>
-        <DeckColumn title='Jonny' icon='group' subtitle='@admin'>
-          <WrappedBundle component={AccountTimeline} componentParams={{ account }} />
-        </DeckColumn>
-        </DeckColumn>*/}
-      </div>
+      <SortableContainer
+        axis='x'
+        lockAxis='x'
+        onSortEnd={this.onSortEnd}
+        shouldCancelStart={this.onShouldCancelStart}
+      >
+        {
+          isEmpty &&
+          <React.Fragment>
+            <DeckColumn title='Compose' icon='pencil'>
+              <WrappedBundle component={Compose} />
+            </DeckColumn>
+            <DeckColumn />
+          </React.Fragment>
+        }
+        {
+          !isEmpty &&
+          gabDeckOrder.map((deckOption, i) => this.getDeckColumn(deckOption, i))
+        }
+      </SortableContainer>
     )
   }
 
 }
 
+const SortableItem = sortableElement(({children}) => (
+  <div>
+    {children}
+  </div>
+))
+
+const SortableContainer = sortableContainer(({children}) => (
+  <div className={[_s.d, _s.flexRow, _s.listStyleNone].join(' ')}>
+    {children}
+  </div>
+))
+
 const mapStateToProps = (state) => ({
   gabDeckOrder: state.getIn(['settings', 'gabDeckOrder']),
 })