Progess on Gab Deck

2020-12-08 23:57:51 -05:00
parent 998f00ae48
commit bb7348fc61
10 changed files with 127 additions and 67 deletions
--- a/app/javascript/gabsocial/features/deck.js
+++ b/app/javascript/gabsocial/features/deck.js
@@ -8,16 +8,20 @@ import {
  sortableElement,
 } from 'react-sortable-hoc'
 import { me, meUsername} from '../initial_state'
+import {
+  GAB_DECK_MAX_ITEMS,
+  MODAL_PRO_UPGRADE,
+} from '../constants'
 import {
  deckConnect,
  deckDisconnect,
  updateDeckColumnAtIndex,
 } from '../actions/deck'
-import {
-  saveSettings,
-} from '../actions/settings'
+import { saveSettings } from '../actions/settings'
+import { openModal } from '../actions/modal'
 import WrappedBundle from './ui/util/wrapped_bundle'
 import DeckColumn from '../components/deck_column'
+import Text from '../components/text'
 import {
  AccountTimeline,
  Compose,
@@ -27,6 +31,8 @@ import {
  HashtagTimeline,
  BookmarkedStatuses,
  ProTimeline,
+  News,
+  ExploreTimeline,
 } from './ui/util/async_components'

 class Deck extends React.PureComponent {
@@ -35,22 +41,21 @@ class Deck extends React.PureComponent {
    router: PropTypes.object,
  }

-  componentDidMount () {
-    this.props.connectDeck()
-  }
-
-  componentWillUnmount() {
-    this.props.disconnectDeck()
-  }
-
  componentDidMount () {
    this.props.dispatch(deckConnect())
+    console.log("this.props.isPro:", this.props)
+    if (!this.props.isPro) this.handleOnOpenProUpgradeModal()
  }

  componentWillUnmount() {
    this.props.dispatch(deckDisconnect())
  }

+  handleOnOpenProUpgradeModal = () => {
+    console.log("handleOnOpenProUpgradeModal")
+    this.props.dispatch(openModal(MODAL_PRO_UPGRADE))
+  }
+
  onSortEnd = ({oldIndex, newIndex}) => {
    this.props.dispatch(updateDeckColumnAtIndex(oldIndex, newIndex))
  }
@@ -66,7 +71,7 @@ class Deck extends React.PureComponent {
  }

  getDeckColumn = (deckColumn, index) => {
-    if (!deckColumn) return null
+    if (!deckColumn || !isPro) return null

    let Component = null
    let componentParams = {}
@@ -105,10 +110,22 @@ class Deck extends React.PureComponent {
        icon = 'pro'
        Component = ProTimeline
        break
+      case 'news':
+        title = 'News'
+        icon = 'news'
+        Component = News
+        componentParams = { isSmall: true }
+        break
+      case 'explore':
+        title = 'Explore'
+        icon = 'explore'
+        Component = ExploreTimeline
+        break
      default:
        break
    }

+    // : todo :
    if (!Component) {
      if (deckColumn.indexOf('user.') > -1)  {
        
@@ -116,6 +133,10 @@ class Deck extends React.PureComponent {
        
      } else if (deckColumn.indexOf('group.') > -1)  {
        
+      } else if (deckColumn.indexOf('news.') > -1)  {
+        
+      } else if (deckColumn.indexOf('hashtag.') > -1)  {
+        
      }
    }

@@ -135,12 +156,9 @@ class Deck extends React.PureComponent {
  }

  render () {
-    const { gabDeckOrder } = this.props
-
-    console.log("gabDeckOrder:", gabDeckOrder)
+    const { gabDeckOrder, isPro } = this.props

    const isEmpty = gabDeckOrder.size === 0
-    // : todo : max: 12

    return (
      <SortableContainer
@@ -150,17 +168,27 @@ class Deck extends React.PureComponent {
        shouldCancelStart={this.onShouldCancelStart}
      >
        {
-          isEmpty &&
+          (isEmpty || !isPro) &&
          <React.Fragment>
-            <DeckColumn title='Compose' icon='pencil'>
+            <DeckColumn title='Compose' icon='pencil' noButtons>
              <WrappedBundle component={Compose} />
            </DeckColumn>
+            {
+              !isPro &&
+              <DeckColumn title='Gab Deck for GabPRO' icon='pro' noButtons>
+                <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
+                  <Text>
+                    Gab Deck for GabPRO
+                  </Text>
+                </div>
+              </DeckColumn>
+            }
            <DeckColumn />
          </React.Fragment>
        }
        {
-          !isEmpty &&
-          gabDeckOrder.map((deckOption, i) => this.getDeckColumn(deckOption, i))
+          !isEmpty && isPro &&
+          gabDeckOrder.splice(0, GAB_DECK_MAX_ITEMS).map((deckOption, i) => this.getDeckColumn(deckOption, i))
        }
      </SortableContainer>
    )
@@ -181,10 +209,12 @@ const SortableContainer = sortableContainer(({children}) => (
 ))

 const mapStateToProps = (state) => ({
+  isPro: state.getIn(['accounts', me, 'is_pro']),
  gabDeckOrder: state.getIn(['settings', 'gabDeckOrder']),
 })

 Deck.propTypes = {
+  isPro: PropTypes.bool.isRequired,
  gabDeckOrder: ImmutablePropTypes.list,
 }

--- a/app/javascript/gabsocial/features/messages/components/chat_message_header.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_header.js
@@ -86,7 +86,7 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_OPTIONS, {
      chatConversationId,
      targetRef,
-      position: 'bottom',
+      position: 'left-end',
    }))
  },
 })
--- a/app/javascript/gabsocial/features/news.js
+++ b/app/javascript/gabsocial/features/news.js
@@ -11,8 +11,6 @@ import Button from '../components/button'
 import Text from '../components/text'
 import TrendsItem from '../components/trends_item'
 import PreviewCardItem from '../components/preview_card_item'
-import ResponsiveClassesComponent from './ui/util/responsive_classes_component'
-import Responsive from './ui/util/responsive_component'
 import WrappedBundle from './ui/util/wrapped_bundle'
 import {
  GabNewsPanel,
@@ -23,11 +21,15 @@ import {
  TrendsHeadlinesPanel,
  TrendsRSSPanel,
 } from './ui/util/async_components'
+import { getWindowDimension } from '../utils/is_mobile'
+
+const initialState = getWindowDimension()

 class News extends React.PureComponent {

  state = {
    lazyLoaded: false,
+    width: initialState.width,
  }

  componentDidMount() {
@@ -35,10 +37,22 @@ class News extends React.PureComponent {
    this.documentElement = document.scrollingElement || document.documentElement

    this.window.addEventListener('scroll', this.handleScroll)
+    
+    this.handleResize()
+    window.addEventListener('keyup', this.handleKeyUp, false)
+    window.addEventListener('resize', this.handleResize, false)
  }

  componentWillUnmount() {
    this.detachScrollListener()
+    window.removeEventListener('keyup', this.handleKeyUp)
+    window.removeEventListener('resize', this.handleResize, false)
+  }
+
+  handleResize = () => {
+    const { width } = getWindowDimension()
+
+    this.setState({ width })
  }

  detachScrollListener = () => {
@@ -57,56 +71,50 @@ class News extends React.PureComponent {
  }, 150, { trailing: true })

  render() {
-    const { children } = this.props
-    const { lazyLoaded } = this.state
+    const { children, isSmall } = this.props
+    const { lazyLoaded, width } = this.state

-    // const orderXS = ['headlines', 'breaking', 'trending_links', 'latest_from_gab', 'gab_news', 'trends_feeds']
+    const isXS = width <= BREAKPOINT_EXTRA_SMALL

-    return (
-      <div className={[_s.d, _s.w100PC].join(' ')}>
-
-        <ResponsiveClassesComponent
-          classNames={[_s.d, _s.flexRow, _s.w100PC, _s.overflowHidden].join(' ')}
-          classNamesXS={[_s.d, _s.pt15].join(' ')}
-        >
-        
-          <ResponsiveClassesComponent
-            classNames={[_s.d, _s.pr15, _s.w50PC].join(' ')}
-            classNamesXS={[_s.d, _s.w100PC].join(' ')}
-          >
-            { /* DESKTOP */ }
-            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              <WrappedBundle component={TrendsHeadlinesPanel} />
-              <WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
-              <WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
-            </Responsive>
-            { /* MOBILE */ }
-            <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+    if (isXS || isSmall) {
+      return (
+        <div className={[_s.d, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.pt15].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
              <WrappedBundle component={TrendsHeadlinesPanel} />
              <WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
              <WrappedBundle component={PopularLinksPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
              <WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
              <WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
              <WrappedBundle component={TrendsFeedsPanel} />
-            </Responsive>
-          </ResponsiveClassesComponent>
-          
-          
-          { /* DESKTOP */ }
-          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <div classNames={[_s.d, _s.w50PC].join(' ')}>
-              <WrappedBundle component={PopularLinksPanel} />
-              <WrappedBundle component={TrendsFeedsPanel} />
-              <WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
            </div>
-          </Responsive>
-
-        </ResponsiveClassesComponent>
+          </div>
+        </div>
+      )
+    }

+    return (
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.w100PC, _s.overflowHidden].join(' ')}>
+          <div className={[_s.d, _s.pr15, _s.w50PC].join(' ')}>
+            <WrappedBundle component={TrendsHeadlinesPanel} />
+            <WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
+            <WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+          </div>
+          <div classNames={[_s.d, _s.w50PC].join(' ')}>
+            <WrappedBundle component={PopularLinksPanel} />
+            <WrappedBundle component={TrendsFeedsPanel} />
+            <WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+          </div>
+        </div>
      </div>
    )
  }

 }

+News.propTypes = {
+  isSmall: PropTypes.bool,
+}
+
 export default News