gab-social/app/javascript/gabsocial/pages/home_page.js

132 lines
3.6 KiB
JavaScript
Raw Normal View History

2020-02-08 06:12:01 +00:00
import { Fragment } from 'react'
import throttle from 'lodash.throttle'
2020-03-24 04:39:12 +00:00
import { openModal } from '../actions/modal'
2020-04-16 07:00:43 +01:00
import { defineMessages, injectIntl } from 'react-intl'
2020-05-03 06:22:49 +01:00
import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
2020-05-14 07:03:22 +01:00
import { me } from '../initial_state'
2020-04-11 23:29:19 +01:00
import PageTitle from '../features/ui/util/page_title'
2020-04-04 00:18:26 +01:00
import GroupsPanel from '../components/panel/groups_panel'
import ListsPanel from '../components/panel/lists_panel'
2020-02-08 06:12:01 +00:00
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import ShopPanel from '../components/panel/shop_panel'
2020-02-08 06:12:01 +00:00
import ProgressPanel from '../components/panel/progress_panel'
2020-05-14 07:03:22 +01:00
import ProPanel from '../components/panel/pro_panel'
2020-02-19 23:57:07 +00:00
import UserPanel from '../components/panel/user_panel'
import TrendsPanel from '../components/panel/trends_panel'
2020-02-24 21:56:07 +00:00
import DefaultLayout from '../layouts/default_layout'
2020-02-08 06:12:01 +00:00
import TimelineComposeBlock from '../components/timeline_compose_block'
2020-02-19 23:57:07 +00:00
import Divider from '../components/divider'
2020-05-07 05:03:34 +01:00
import PullToRefresher from '../components/pull_to_refresher'
2020-04-16 07:00:43 +01:00
const messages = defineMessages({
home: { id: 'home', defaultMessage: 'Home' },
})
const mapStateToProps = (state) => ({
totalQueuedItemsCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
2020-05-14 07:03:22 +01:00
isPro: state.getIn(['accounts', me, 'is_pro']),
2020-04-16 07:00:43 +01:00
})
2020-03-24 04:39:12 +00:00
const mapDispatchToProps = (dispatch) => ({
onOpenHomePageSettingsModal() {
2020-05-03 06:22:49 +01:00
dispatch(openModal(MODAL_HOME_TIMELINE_SETTINGS))
2020-03-24 04:39:12 +00:00
},
})
2020-02-19 23:57:07 +00:00
2020-03-24 04:39:12 +00:00
export default
2020-04-16 07:00:43 +01:00
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
2020-03-24 04:39:12 +00:00
class HomePage extends PureComponent {
static propTypes = {
2020-04-16 07:00:43 +01:00
children: PropTypes.node.isRequired,
2020-05-03 06:22:49 +01:00
intl: PropTypes.object.isRequired,
2020-03-24 04:39:12 +00:00
onOpenHomePageSettingsModal: PropTypes.func.isRequired,
2020-05-03 06:22:49 +01:00
totalQueuedItemsCount: PropTypes.number.isRequired,
2020-05-14 07:03:22 +01:00
isPro: PropTypes.bool,
2020-03-12 16:09:15 +00:00
}
state = {
lazyLoaded: false,
}
2020-04-28 06:33:58 +01:00
componentDidMount() {
this.window = window
this.documentElement = document.scrollingElement || document.documentElement
2020-04-28 06:33:58 +01:00
this.window.addEventListener('scroll', this.handleScroll)
}
2020-04-28 06:33:58 +01:00
componentWillUnmount() {
this.detachScrollListener()
}
detachScrollListener = () => {
this.window.removeEventListener('scroll', this.handleScroll)
}
2020-04-28 06:33:58 +01:00
handleScroll = throttle(() => {
if (this.window) {
const { scrollTop } = this.documentElement
if (scrollTop > 25 && !this.state.lazyLoaded) {
this.setState({ lazyLoaded: true })
this.detachScrollListener()
}
}
}, 150, {
trailing: true,
})
2020-04-28 06:33:58 +01:00
2020-02-08 06:12:01 +00:00
render() {
2020-04-16 07:00:43 +01:00
const {
intl,
children,
totalQueuedItemsCount,
onOpenHomePageSettingsModal,
2020-05-14 07:03:22 +01:00
isPro,
2020-04-16 07:00:43 +01:00
} = this.props
const { lazyLoaded } = this.state
return (
2020-02-17 17:50:29 +00:00
<DefaultLayout
2020-04-16 07:00:43 +01:00
title={intl.formatMessage(messages.home)}
2020-02-19 23:57:07 +00:00
actions={[
2020-05-07 00:40:54 +01:00
{
icon: 'ellipsis',
onClick: onOpenHomePageSettingsModal,
},
2020-02-19 23:57:07 +00:00
]}
2020-02-17 17:50:29 +00:00
layout={(
<Fragment>
<UserPanel />
<ProgressPanel />
2020-05-14 07:03:22 +01:00
<ProPanel isPro={isPro} />
2020-02-19 23:57:07 +00:00
<TrendsPanel />
<ShopPanel isLazy shouldLoad={lazyLoaded} />
<ListsPanel isLazy shouldLoad={lazyLoaded} />
<WhoToFollowPanel isLazy shouldLoad={lazyLoaded} />
<GroupsPanel isLazy shouldLoad={lazyLoaded} />
2020-02-17 17:50:29 +00:00
<LinkFooter />
</Fragment>
)}
>
2020-05-03 06:22:49 +01:00
2020-04-16 07:00:43 +01:00
<PageTitle
path={intl.formatMessage(messages.home)}
badge={totalQueuedItemsCount}
/>
2020-05-03 06:22:49 +01:00
2020-05-07 05:03:34 +01:00
<PullToRefresher />
2020-02-28 15:20:47 +00:00
<TimelineComposeBlock autoFocus={false} />
2020-05-03 06:22:49 +01:00
2020-02-19 23:57:07 +00:00
<Divider />
2020-05-03 06:22:49 +01:00
2020-02-08 06:12:01 +00:00
{children}
2020-05-03 06:22:49 +01:00
2020-02-17 17:50:29 +00:00
</DefaultLayout>
)
}
}