Activity.js

import React, { Component } from 'react';
import {
  View,
  Text,
  ScrollView,
  Image,
  ActivityIndicator,
  RefreshControl,
  Platform,
  Alert,
  FlatList,
  ToastAndroid
} from 'react-native';
import { connect } from 'remx';
import Modal from 'react-native-modalbox';
import { PegiHeaderTitle } from 'pegimane-ui';
import MainComponent from '../../component/MainComponent';
import LinkList from './component/LinkList';
import * as activityAction from '../../../../store/activities/activityAction';
import * as activityStore from '../../../../store/activities/activityStore';
import * as userStore from '../../../../store/users/userStore';
import RenderActivityItem from './component/ActivityItem';
import { SharedElementTransition } from 'react-native-navigation';
import { PegiUI } from 'pegimane-ui';

var icon_image = PegiUI.icon_image;
var icon_video = PegiUI.icon_video;
var icon_pin_map = PegiUI.icon_pin_map;
var icon_quote = PegiUI.icon_quote;

class MenuScreen extends MainComponent {
  constructor(props) {
    super(props);
    this.state = {
      activities: {},
      loadActivity: true,
      bottomIndicator: false,
      activityCategory: '',
      page: 1
    };
  }

  componentWillMount() {
    this.pullActivities();
  }

  _openModal = () => {
    this.refs.modal_filter.open();
  };

  _onRefresh = () => {
    activityStore.setters.setPage(1);
    activityStore.setters.emptyActivities();
    this.setState(
      {
        activityCategory: '',
        loadActivity: true
      },
      () => {
        this.pullActivities();
      }
    );
  };

  _getMoreActivity = () => {
    this.setState(
      {
        loadActivity: true
      },
      () => {
        this.pullActivities();
      }
    );
  };

  pullActivitiesByCategory = category => {
    activityStore.setters.setPage(1);
    activityStore.setters.emptyActivities();
    this.setState(
      {
        activityCategory: category,
        loadActivity: true
      },
      () => {
        this.refs.modal_filter.close();
        setTimeout(() => {
          this.pullActivities();
        }, 10);
      }
    );
  };

  pullActivities = () => {
    if (this.props.activityEnd) {
      console.log('habis');
      return;
    }

    activityAction.getAcitivy(12, this.state.activityCategory).then(res => {
      if (res && !res.success) {
        if (Platform.OS == 'android') {
          ToastAndroid.show(`${res.message} !`, ToastAndroid.SHORT);
          return;
        }
        Alert.alert('Ups...', res.message);
      } else {
        this.setState({
          loadActivity: false
        });
      }
    });
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.activities !== nextProps.activities) {
      this.setState({
        activities: nextProps.activities
      });
      return true;
    }
    if (nextProps.activityEnd) {
      return true;
    }
    if (this.state.loadActivity !== nextState.loadActivity) {
      return true;
    }
    return false;
  }

  renderActivities = ({ item, index }) => {
    return (
      <SharedElementTransition sharedElementId={`SET${index}`}>
        <RenderActivityItem
          icon_image={icon_image}
          icon_video={icon_video}
          icon_pin_map={icon_pin_map}
          icon_quote={icon_quote}
          onPress={this._goToActivityDetail}
          imagePress={this._goToActivityDetail}
          navigator={this.props.navigator}
          index={index}
          data={item}
          userId={this.props.user.user_socmed_id}
        />
      </SharedElementTransition>
    );
  };

  _goToActivityDetail = (index, title) => {
    activityAction.getActivityByIndex(index).then(() => {
      this.props.navigator.push({
        screen: 'pegimane.ActivitydetailScreen',
        title: Platform.OS == 'android' ? title : '',
        backButtonTitle: '',
        passProps: {
          index: index
        },
        sharedElements: [`activity${index}`]
      });
    });
  };

  _keyExtractor = (item, index) => index;

  _renderHeader = () => (
    <PegiHeaderTitle
      title={'Activity'}
      showIcon={true}
      icon={require('../../../../assets/icons/filter.png')}
      iconPress={this._openModal}
    />
  );

  _onVisibleItemsChange = item => {
    var page = 12 * this.state.page - 2;
    if (item.lastIndex == page) {
      this._getMoreActivity();
    }
  };

  _renderFooter = () => {
    if (!this.state.loadActivity && this.props.activityEnd) return null;
    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1
        }}
      >
        <ActivityIndicator animating color={'#c9102f'} />
      </View>
    );
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView
          style={{ flex: 1 }}
          onMomentumScrollEnd={this._getMoreActivity}
        >
          {this._renderHeader()}
          <FlatList
            data={this.state.activities}
            extraData={{
              activity: this.props.activityUpdated
            }}
            renderItem={this.renderActivities}
            refreshing={this.state.loadActivity}
            keyExtractor={this._keyExtractor}
            onRefresh={this._onRefresh}
            // onEndReached={this._getMoreActivity}
          />
        </ScrollView>
      </View>
    );
  }
}

function mapStateToProps(ownProps) {
  return {
    user: userStore.getters.getDetail(),
    activities: activityStore.getters.getLists(),
    activityEnd: activityStore.getters.isEndPage(),
    activityUpdated: activityStore.getters.isUpdated()
  };
}
export default connect(mapStateToProps)(MenuScreen);