logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

index.js (4111B)


  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import ImmutablePropTypes from 'react-immutable-proptypes';
  4. import PropTypes from 'prop-types';
  5. import { fetchAccount } from '../../actions/accounts';
  6. import { expandAccountMediaTimeline } from '../../actions/timelines';
  7. import LoadingIndicator from '../../components/loading_indicator';
  8. import Column from '../ui/components/column';
  9. import ColumnBackButton from '../../components/column_back_button';
  10. import ImmutablePureComponent from 'react-immutable-pure-component';
  11. import { getAccountGallery } from '../../selectors';
  12. import MediaItem from './components/media_item';
  13. import HeaderContainer from '../account_timeline/containers/header_container';
  14. import { ScrollContainer } from 'react-router-scroll-4';
  15. import LoadMore from '../../components/load_more';
  16. const mapStateToProps = (state, props) => ({
  17. medias: getAccountGallery(state, props.params.accountId),
  18. isLoading: state.getIn(['timelines', `account:${props.params.accountId}:media`, 'isLoading']),
  19. hasMore: state.getIn(['timelines', `account:${props.params.accountId}:media`, 'hasMore']),
  20. });
  21. class LoadMoreMedia extends ImmutablePureComponent {
  22. static propTypes = {
  23. maxId: PropTypes.string,
  24. onLoadMore: PropTypes.func.isRequired,
  25. };
  26. handleLoadMore = () => {
  27. this.props.onLoadMore(this.props.maxId);
  28. }
  29. render () {
  30. return (
  31. <LoadMore
  32. disabled={this.props.disabled}
  33. onLoadMore={this.handleLoadMore}
  34. />
  35. );
  36. }
  37. }
  38. @connect(mapStateToProps)
  39. export default class AccountGallery extends ImmutablePureComponent {
  40. static propTypes = {
  41. params: PropTypes.object.isRequired,
  42. dispatch: PropTypes.func.isRequired,
  43. medias: ImmutablePropTypes.list.isRequired,
  44. isLoading: PropTypes.bool,
  45. hasMore: PropTypes.bool,
  46. };
  47. componentDidMount () {
  48. this.props.dispatch(fetchAccount(this.props.params.accountId));
  49. this.props.dispatch(expandAccountMediaTimeline(this.props.params.accountId));
  50. }
  51. componentWillReceiveProps (nextProps) {
  52. if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
  53. this.props.dispatch(fetchAccount(nextProps.params.accountId));
  54. this.props.dispatch(expandAccountMediaTimeline(this.props.params.accountId));
  55. }
  56. }
  57. handleScrollToBottom = () => {
  58. if (this.props.hasMore) {
  59. this.handleLoadMore(this.props.medias.last().getIn(['status', 'id']));
  60. }
  61. }
  62. handleScroll = (e) => {
  63. const { scrollTop, scrollHeight, clientHeight } = e.target;
  64. const offset = scrollHeight - scrollTop - clientHeight;
  65. if (150 > offset && !this.props.isLoading) {
  66. this.handleScrollToBottom();
  67. }
  68. }
  69. handleLoadMore = maxId => {
  70. this.props.dispatch(expandAccountMediaTimeline(this.props.params.accountId, { maxId }));
  71. };
  72. handleLoadOlder = (e) => {
  73. e.preventDefault();
  74. this.handleScrollToBottom();
  75. }
  76. render () {
  77. const { medias, isLoading, hasMore } = this.props;
  78. let loadOlder = null;
  79. if (!medias && isLoading) {
  80. return (
  81. <Column>
  82. <LoadingIndicator />
  83. </Column>
  84. );
  85. }
  86. if (!isLoading && medias.size > 0 && hasMore) {
  87. loadOlder = <LoadMore onClick={this.handleLoadOlder} />;
  88. }
  89. return (
  90. <Column>
  91. <ColumnBackButton />
  92. <ScrollContainer scrollKey='account_gallery'>
  93. <div className='scrollable' onScroll={this.handleScroll}>
  94. <HeaderContainer accountId={this.props.params.accountId} />
  95. <div className='account-gallery__container'>
  96. {medias.map((media, index) => media === null ? (
  97. <LoadMoreMedia
  98. key={'more:' + medias.getIn(index + 1, 'id')}
  99. maxId={index > 0 ? medias.getIn(index - 1, 'id') : null}
  100. />
  101. ) : (
  102. <MediaItem
  103. key={media.get('id')}
  104. media={media}
  105. />
  106. ))}
  107. {loadOlder}
  108. </div>
  109. </div>
  110. </ScrollContainer>
  111. </Column>
  112. );
  113. }
  114. }