Progress

2020-04-28 01:33:58 -04:00
parent 763694b5ab
commit c3d0d8bde2
87 changed files with 1392 additions and 826 deletions
--- a/app/javascript/gabsocial/pages/community_page.js
+++ b/app/javascript/gabsocial/pages/community_page.js
@@ -7,7 +7,6 @@ import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
 import TrendsPanel from '../components/panel/trends_panel'
-import HashtagsPanel from '../components/panel/hashtags_panel'
 import DefaultLayout from '../layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
@@ -51,7 +50,6 @@ class CommunityPage extends PureComponent {
          <Fragment>
            <ProgressPanel />
            <TrendsPanel />
-            <HashtagsPanel />
            <WhoToFollowPanel />
            <GroupSidebarPanel />
            <LinkFooter />
--- a/app/javascript/gabsocial/pages/group_page.js
+++ b/app/javascript/gabsocial/pages/group_page.js
@@ -92,7 +92,7 @@ class GroupPage extends ImmutablePureComponent {
 					<Fragment>
 						<GroupInfoPanel group={group} />
 						<WhoToFollowPanel />
-						<GroupSidebarPanel slim />
+						<GroupSidebarPanel isSlim />
 						<LinkFooter />
 					</Fragment>
 				)}
--- a/app/javascript/gabsocial/pages/groups_page.js
+++ b/app/javascript/gabsocial/pages/groups_page.js
@@ -2,6 +2,7 @@ import { Fragment } from 'react'
 import { me } from '../initial_state'
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
+import { MODAL_GROUP_CREATE } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import GroupsPanel from '../components/panel/groups_panel'
@@ -22,7 +23,7 @@ const mapStateToProps = (state) => ({

 const mapDispatchToProps = (dispatch) => ({
  onOpenGroupCreateModal() {
-    dispatch(openModal('GROUP_CREATE'))
+    dispatch(openModal(MODAL_GROUP_CREATE))
  },
 })

@@ -81,6 +82,7 @@ class GroupsPage extends PureComponent {
        showBackBtn
        title={title}
        actions={actions}
+        tabs={tabs}
        layout={(
          <Fragment>
            <WhoToFollowPanel />
@@ -88,7 +90,6 @@ class GroupsPage extends PureComponent {
            <LinkFooter />
          </Fragment>
        )}
-        tabs={tabs}
      >
        <PageTitle path={title} />
        { children }
--- a/app/javascript/gabsocial/pages/hashtag_page.js
+++ b/app/javascript/gabsocial/pages/hashtag_page.js
@@ -6,7 +6,6 @@ import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
 import TrendsPanel from '../components/panel/trends_panel'
-import HashtagsPanel from '../components/panel/hashtags_panel'
 import DefaultLayout from '../layouts/default_layout'

 const messages = defineMessages({
@@ -53,7 +52,6 @@ class HashtagPage extends PureComponent {
          <Fragment>
            <ProgressPanel />
            <TrendsPanel />
-            <HashtagsPanel />
            <WhoToFollowPanel />
            <LinkFooter />
          </Fragment>
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -1,6 +1,8 @@
 import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
+import IntersectionObserverArticle from '../components/intersection_observer_article'
+import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
 import PageTitle from '../features/ui/util/page_title'
 import GroupsPanel from '../components/panel/groups_panel'
 import ListsPanel from '../components/panel/lists_panel'
@@ -9,7 +11,6 @@ import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
 import UserPanel from '../components/panel/user_panel'
 import TrendsPanel from '../components/panel/trends_panel'
-import HashtagsPanel from '../components/panel/hashtags_panel'
 import DefaultLayout from '../layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
@@ -40,6 +41,25 @@ class HomePage extends PureComponent {
    onOpenHomePageSettingsModal: PropTypes.func.isRequired,
  }

+  intersectionObserverWrapper = new IntersectionObserverWrapper()
+
+  componentDidMount() {
+    this.attachIntersectionObserver()
+  }
+
+  componentWillUnmount() {
+    this.detachIntersectionObserver()
+  }
+
+  attachIntersectionObserver() {
+    this.intersectionObserverWrapper.connect()
+  }
+
+  detachIntersectionObserver() {
+    this.intersectionObserverWrapper.disconnect()
+  }
+
+
  render() {
    const {
      intl,
@@ -62,10 +82,30 @@ class HomePage extends PureComponent {
            <UserPanel />
            <ProgressPanel />
            <TrendsPanel />
-            <ListsPanel />
-            <HashtagsPanel />
-            <WhoToFollowPanel />
-            <GroupsPanel />
+            <IntersectionObserverArticle
+              id={'home-sidebar-lists-panel'}
+              listLength={7}
+              index={4}
+              intersectionObserverWrapper={this.intersectionObserverWrapper}
+            >
+              <ListsPanel />
+            </IntersectionObserverArticle>
+            <IntersectionObserverArticle
+              id={'home-sidebar-wtf-panel'}
+              listLength={7}
+              index={5}
+              intersectionObserverWrapper={this.intersectionObserverWrapper}
+            >
+              <WhoToFollowPanel />
+            </IntersectionObserverArticle>
+            <IntersectionObserverArticle
+              id={'home-sidebar-groups-panel'}
+              listLength={7}
+              index={6}
+              intersectionObserverWrapper={this.intersectionObserverWrapper}
+            >
+              <GroupsPanel isLazy />
+            </IntersectionObserverArticle>
            <LinkFooter />
          </Fragment>
        )}
--- a/app/javascript/gabsocial/pages/list_page.js
+++ b/app/javascript/gabsocial/pages/list_page.js
@@ -3,6 +3,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
+import {
+  MODAL_LIST_EDITOR,
+  // MODAL_LIST_TIMELINE_SETTINGS,
+} from '../constants'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import DefaultLayout from '../layouts/default_layout'
@@ -18,15 +22,16 @@ const mapStateToProps = (state, props) => ({
  list: state.getIn(['lists', props.params.id]),
 })

-const mapDispatchToProps = (dispatch, { list }) => ({
-  onOpenListEditModal() {
-    dispatch(openModal('LIST_EDIT', {
-      list,
-    }))
-  },
-  onOpenListTimelineSettingsModal() {
-    dispatch(openModal('LIST_TIMELINE_SETTINGS'))
+const mapDispatchToProps = (dispatch) => ({
+  onOpenListEditModal(list) {
+    if (!list) return
+    const listId = list.get('id')
+    dispatch(openModal(MODAL_LIST_EDITOR, { listId }))
  },
+  // : todo :
+  // onOpenListTimelineSettingsModal() {
+  //   dispatch(openModal(MODAL_LIST_TIMELINE_SETTINGS))
+  // },
 })

 export default
@@ -39,42 +44,46 @@ class ListPage extends ImmutablePureComponent {
    list: ImmutablePropTypes.map,
    children: PropTypes.node.isRequired,
    onOpenListEditModal: PropTypes.func.isRequired,
-    onOpenListTimelineSettingsModal: PropTypes.func.isRequired,
+    // onOpenListTimelineSettingsModal: PropTypes.func.isRequired,
  }
  
+  handleOnOpenListEditModal = () => {
+    this.props.onOpenListEditModal(this.props.list)
+  }
+
  render() {
    const {
      intl,
      children,
      list,
      onOpenListEditModal,
-      onOpenListTimelineSettingsModal
+      // onOpenListTimelineSettingsModal
    } = this.props

    const title = !!list ? list.get('title') : ''

    return (
      <DefaultLayout
+        showBackBtn
        title={title}
        actions={[
          {
-            icon: 'list-edit',
-            onClick: onOpenListEditModal,
-          },
-          {
-            icon: 'ellipsis',
-            onClick: onOpenListTimelineSettingsModal,
+            icon: 'cog',
+            onClick: this.handleOnOpenListEditModal,
          },
+          // {
+          //   icon: 'ellipsis',
+          //   onClick: onOpenListTimelineSettingsModal,
+          // },
        ]}
        layout={(
          <Fragment>
-            <ListDetailsPanel />
+            <ListDetailsPanel list={list} onEdit={this.handleOnOpenListEditModal} />
            <TrendsPanel />
            <WhoToFollowPanel />
            <LinkFooter />
          </Fragment>
        )}
-        showBackBtn
      >
        <PageTitle path={[title, intl.formatMessage(messages.list)]} />
        { children }
--- a/app/javascript/gabsocial/pages/notifications_page.js
+++ b/app/javascript/gabsocial/pages/notifications_page.js
@@ -93,9 +93,11 @@ class NotificationsPage extends PureComponent {
    const tabs = filters.map((filter) => ({ 
      title: intl.formatMessage(messages[filter]),
      onClick: () => this.onChangeActiveFilter(filter),
-      active: selectedFilter === filter,
+      active: selectedFilter.toLowerCase() === filter.toLowerCase(),
    }))

+    console.log("selectedFilter, filter: ", tabs, selectedFilter)
+
    return (
      <DefaultLayout
        title={intl.formatMessage(messages.notifications)}
@@ -117,4 +119,4 @@ class NotificationsPage extends PureComponent {
      </DefaultLayout>
    )
  }
-}
+}{}
--- a/app/javascript/gabsocial/pages/shortcuts_page.js
+++ b/app/javascript/gabsocial/pages/shortcuts_page.js
@@ -6,7 +6,6 @@ import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
 import UserPanel from '../components/panel/user_panel'
 import TrendsPanel from '../components/panel/trends_panel'
-import HashtagsPanel from '../components/panel/hashtags_panel'
 import DefaultLayout from '../layouts/default_layout'

 export default
@@ -24,7 +23,6 @@ class ShortcutsPage extends PureComponent {
            <UserPanel />
            <ProgressPanel />
            <TrendsPanel />
-            <HashtagsPanel />
            <WhoToFollowPanel />
            <GroupSidebarPanel />
            <LinkFooter />