API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 16th, 2019
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 15.11 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2. import { KeyboardAvoidingView,Animated,RefreshControl, View,TouchableOpacity,Text, StyleSheet,Platform } from 'react-native';
  3. import { client } from '../../../utils/StreamConnect';
  4. import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'
  5. import {
  6.   SinglePost,
  7.   Activity,
  8. } from 'react-native-activity-feed';
  9. import RepostList from '../component/RepostList';
  10. import _ from 'lodash';
  11. import AppConfig from '../../../AppConfig';
  12. import StreamAppClient from '../component/StreamAppClient';
  13. import { ReactionToggleLike } from '../component/ReactionToggleLike';
  14. import { ReactionToggleHeart } from '../component/ReactionToggleHeart';
  15. import { ReactionComment } from '../component/ReactionComment';
  16. import CommentBoxCustom from '../component/CommentBoxCustom';
  17. import ContentActivity from '../component/ContentActivity';
  18. import CommentItemCustom from '../component/CommentItemCustom';
  19. import LogicMessage from '../../../logic_app/LogicMessage';
  20. import ApiUrl from '../../../api'
  21. import TokenStream from '../storage/TokenStream';
  22. import HeaherActivity from '../component/HeaherActivity';
  23. import { Actions } from 'react-native-router-flux';
  24. import MyStatusBar from '../../../components/MyStatusBar';
  25. import { HEIGHT_DEFAULT_NAVBAR, SCREEN } from '../../../utils/UtilDeviceInfo';
  26. import localization from '../../../localization';
  27. import FastImage from 'react-native-fast-image';
  28. import Modal from 'react-native-modal';
  29. import ModalContent from '../component/ModalContent';
  30. import CommentList from '../component/Reaction/CommentList';
  31. import Modalize from 'react-native-modalize';
  32. import ModalContentToggle from '../component/Modal/ModalContentToggle'
  33. import LoadMoreButton from '../component/Reaction/LoadMoreButton';
  34. import TotalToggle from '../component/TotalToggle';
  35.  
  36. export default class SinglePostScreen extends React.PureComponent {
  37.   constructor(props) {
  38.     super(props);
  39.     this.state = {
  40.       data  : [],
  41.       dataInit:[],
  42.       paddingFocus:350,//default isFocus 350 , //not 50
  43.       userId:undefined,
  44.       user:undefined,
  45.       comment:undefined,
  46.       type:1,
  47.       token:undefined,
  48.       visibleModal:false,
  49.       activityId:undefined,
  50.       activity:undefined,
  51.       isRefreshing:false,
  52.       commentToggle:undefined,
  53.       spinValue:new Animated.Value(0),
  54.       isActivty:false
  55.     };
  56.   }
  57.   componentDidMount() {
  58.     this.setState({
  59.       activity: this.props.activity || {}
  60.     })
  61.     this._fetchDatamention();
  62.     this.fetchToken();
  63.   }
  64.   _onShowModallize = (comment,isActivty = false) => {
  65.     if(this.modaLize){
  66.       this.setState({commentToggle:comment,isActivty},() => {
  67.         this.modaLize.open();
  68.       })
  69.     }
  70.   }
  71.   _onPressComment = props => {
  72.     if(this.commentBox){
  73.       this.commentBox.focus();
  74.     }
  75.   };
  76.   async fetchToken(){
  77.     try{
  78.        let user = await TokenStream.getAuthStream();
  79.        if( !_.isNil(user) &&  !_.isNil(user.data) ) {
  80.           this.setState(
  81.             {
  82.               userId: (user.data || {})._id + '',
  83.               token:user.tokenStream
  84.             }
  85.           )
  86.        }
  87.     }catch(e){
  88.     }
  89.   }
  90.  
  91.   async _fetchDatamention() {
  92.     try{
  93.       const dataResponse = await ApiUrl.getListUserMention();
  94.       let data = dataResponse.data || {};
  95.       if( LogicMessage.isSuccess(dataResponse,false) && _.isArray(data.data)){
  96.         this.setState({ data: data.data, dataInit: data.data  })
  97.       }else{
  98.         this.setState({ data: [] })
  99.       }
  100.     }catch(e){
  101.     }
  102.   }
  103.   renderContent = props => (
  104.      <ContentActivity {...props} />
  105.   );
  106.   renderHeader = props => {
  107.     return <HeaherActivity {...props} onPressStation={this._onPressStation} isDetailPost= {false} onPressBack = { () => {
  108.       Actions.pop();
  109.     }}
  110.     onPressAvatar={() => this._onPressAvatar(props)}
  111.     />
  112.   };
  113.   _onPressEditComment = (comment,isCommentChild = false,commentChild)  => {
  114.       if( this.commentBox){
  115.           this.commentBox.focusEdit(comment,isCommentChild,commentChild);
  116.       }
  117.   }
  118.   _onPressCommentChild = (comment ,type = 1) => {
  119.     if(type === 2 && this.commentBox){
  120.       let userIdComment = _.get(comment, 'user_id');
  121.       const isUserSefReply = userIdComment === this.state.userId ? true : false;
  122.       this.commentBox.focus(comment,undefined,type,isUserSefReply);
  123.     }
  124. }
  125.   _onPressCommentChildParent = (comment ,commentParent,type = 3) => {
  126.     if(this.commentBox){
  127.         let userIdComment = _.get(comment, 'user_id');
  128.         const isUserSefReply = userIdComment === this.state.userId ? true : false;
  129.         this.commentBox.focus(comment,commentParent,type,isUserSefReply);
  130.     }
  131. }
  132.   _onPressAvatar = props => {};
  133.   _updatePaddingFocus = (paddingTop) => {
  134.     if(paddingTop && paddingTop !== this.state.paddingFocus){
  135.       this.setState({paddingFocus: paddingTop})
  136.     }
  137.       if(this.commentBox && this.state.type !== 3 ){
  138.         if(this.state.comment && this.state.type === 2 ){
  139.           this.commentBox.focus(this.state.comment);
  140.         }else{
  141.           this.commentBox.focus();
  142.         }
  143.       }
  144.   }
  145.   _closeModal = () => {
  146.     this.setState({visibleModal:false})
  147.   }
  148.   _renderSeparator = ()=>{
  149.     return <View style={{height:1,marginLeft:40 + 10, backgroundColor:'rgb(237,241,247)'}}></View>;
  150.   };
  151.   _keyExtractor = (item, index)=> {
  152.      return index;
  153.   }
  154.   _refreshControl = ()=>{
  155.     return  <RefreshControl
  156.                 refreshing={this.state.isRefreshing}
  157.             //  onRefresh={this.onRefresh.bind(this)}
  158.             />
  159.   };
  160.   _onRefesh = () => {
  161.     return null
  162.   }
  163.   _refeshActivity = async() => {
  164.       //update activity
  165.     let feedClient = await client();
  166.     let userComment =  await feedClient.feed(AppConfig.FEED_USER,this.state.userId,
  167.           this.state.token
  168.     );
  169.     let activity = await userComment.get({ limit:1, id: this.state.activity.id });
  170.     this.setState({activity:activity.results[0]},() => {this.forceUpdate()});
  171.   }
  172.  
  173.   _onUpdateReaction =async (reactionId,data,isResetComment) => {
  174.     try{
  175.       let feedClient = await client();
  176.       await feedClient.reactions.update(reactionId, data);
  177.       isResetComment();
  178.       this.setState({ isRefreshing: true },() => {
  179.             this.forceUpdate();
  180.         });
  181.     }catch(e){
  182.     }
  183.   }
  184.   _onPressStation = (item) => {
  185.     Actions.Station({
  186.       keyData: item._id,
  187.       data: item
  188.     });
  189.   };
  190.   render() {
  191.     const activity = this.state.activity || {};
  192.     let feedGroup = this.props.feedGroup || AppConfig.FEED_TIMELINE;
  193.     return (
  194.       <View style={styles.container}>
  195.          <MyStatusBar>
  196.           <View style={{ height: HEIGHT_DEFAULT_NAVBAR,flexDirection:'row', margin: 0, width: SCREEN.width, display: 'flex' }}>
  197.            
  198.           <TouchableOpacity
  199.                 style={styles.touchImageViewClose}
  200.                 onPress={ () => {Actions.pop() } }
  201.             >
  202.               <FastImage
  203.                   style={styles.imageViewClose}
  204.                   source={ require('../../../assets/imgs/m_1_t_back.png') }
  205.                 />
  206.             </TouchableOpacity>
  207.             <Text style={styles.HeaderTittle}>{localization.t('label_Comment')}</Text>
  208.  
  209.           </View>
  210.         </MyStatusBar>
  211.         <StreamAppClient isTimeline = {true}>
  212.           <SinglePost
  213.             activity={activity}
  214.             feedGroup={feedGroup}
  215.             userId={ this.state.userId}
  216.             /**
  217.              * withOwnChildren: true get children user comment
  218.              */
  219.             options={{ withOwnChildren: true }}//
  220.             Activity={props => {
  221.               return (
  222.                 <React.Fragment>
  223.                   <Activity
  224.                     {...props}
  225.                     styles={{
  226.                       container: {
  227.                         paddingTop: 10,
  228.                         paddingBottom: 0,
  229.                         borderBottomColor: 'rgb(237,241,247)',
  230.                         borderBottomWidth: 1
  231.                       }
  232.                     }}
  233.                     onPressAvatar={() => this._onPressAvatar(props)}
  234.                     Header={this.renderHeader(props)}
  235.                     Content={this.renderContent(props)}
  236.                     Footer={
  237.                       <View style={{ flexDirection: 'row', alignItems: 'center',justifyContent: 'space-between' }}>
  238.                         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
  239.                           <ReactionToggleLike {...props}  userId={this.state.userId}  />
  240.                           <ReactionToggleHeart {...props} userId={this.state.userId}  />
  241.                           <ReactionComment
  242.                             {...props}
  243.                             onPressActivity={this._onPressComment}
  244.                           />
  245.                         </View>
  246.                         {
  247.                           this.state.userId === _.get( props.activity , 'actor.id', '') &&
  248.                             <TouchableOpacity  onPress = {
  249.                               () => this.setState({visibleModal:true,activity:props.activity , activityId: _.get( props.activity , 'id') })
  250.                             } style={[styles.touchMore]}>
  251.                               <FastImage
  252.                                 style={styles.imageViewMore}
  253.                                 source={require('../../../assets/imgs/timeline/moreHorizontal.png')}
  254.                               />
  255.                             </TouchableOpacity>
  256.                            }
  257.                       </View>
  258.                     }
  259.                   />
  260.                   {/* <RepostList activityId={(props.activity || {}).id} /> */}
  261.                   <TotalToggle  onShowModallize={this._onShowModallize} {...props}/>
  262.                   <CommentList
  263.                     {...props}
  264.                     flatListProps={{
  265.                        style: {
  266.                        },
  267.                        ItemSeparatorComponent: this._renderSeparator,
  268.                     }}
  269.                     activityId={(props.activity || {}).id}
  270.                     reactions={(props.activity || {}).latest_reactions}
  271.                     reverseOrder
  272.                     noPagination={false}
  273.                     oldestToNewest ={false}
  274.                     infiniteScroll={false} //false: show ButtonLoadmore
  275.                     LoadMoreButton={(props) => <LoadMoreButton {...props} onPress={props.onPress}/>}
  276.                     CommentItem={({ comment }) => {
  277.                       return (
  278.                         <React.Fragment>
  279.                           <CommentItemCustom
  280.                                onShowModallize={this._onShowModallize}
  281.                                onPressCommentChild = {this._onPressCommentChild}
  282.                                onPressCommentChildParent = {this._onPressCommentChildParent}
  283.                                onPressEditComment = {this._onPressEditComment}
  284.                                onRemoveChildReaction = { (commentParent, idChildReaction) => {
  285.                                 props.onRemoveChildReaction(AppConfig.VERB_COMMENT, commentParent, idChildReaction);
  286.                                }}
  287.                                props = {props}
  288.                                userIdCurrent= {this.state.userId}
  289.                                comment={comment} />
  290.                         </React.Fragment>
  291.  
  292.                       );
  293.                     }}
  294.                   />
  295.                   <View style={styles.sectionHeader} />
  296.                 </React.Fragment>
  297.               );
  298.             }}
  299.             Footer={props => {
  300.               return (
  301.                 <CommentBoxCustom
  302.                   userId={ this.state.userId}
  303.                   ref = {c => this.commentBox = c}
  304.                   data={this.state.data || []}
  305.                   dataInit={this.state.dataInit || []}
  306.                   avatar={this.props.avatar}
  307.                   activity={activity}
  308.                   onAddReaction={async (comment, activityData, data,userId_Mention = [],isCommentChild = false,commentObject = {},isResetComment) => {
  309.                     try {
  310.                       let originUser = _.get(activity, 'actor.id');
  311.                       if(isCommentChild){
  312.                         props.onAddChildReaction(comment, commentObject, data,   {targetFeeds: originUser !== this.state.userId ? userId_Mention.concat(['notification:' + originUser]) : userId_Mention });
  313.                       }else{
  314.                         props.onAddReaction(
  315.                           comment,
  316.                           activityData,
  317.                           data,  
  318.                           {targetFeeds: originUser !== this.state.userId ? userId_Mention.concat(['notification:' + originUser]) : userId_Mention });
  319.                       }
  320.                       isResetComment();
  321.                     } catch (e) {}
  322.                   }}
  323.                   onUpdateReaction = {(reactionId,data,isResetComment) => {
  324.                     this._onUpdateReaction(reactionId,data,isResetComment);
  325.                   }}
  326.                 />
  327.               );
  328.             }}
  329.           />
  330.          
  331.         </StreamAppClient>
  332.  
  333.         <Modal
  334.           onBackdropPress={() => this.setState({ visibleModal: false })}
  335.           isVisible={this.state.visibleModal}
  336.           onSwipeComplete={() => this.setState({ visibleModal: false })}
  337.           style={styles.bottomModal}
  338.         >
  339.           <KeyboardAvoidingView
  340.               behavior="position"
  341.               enabled
  342.             >
  343.           <ModalContent
  344.             isDetailPost = {true}
  345.             activity={this.state.activity}
  346.             userId={this.state.userId}
  347.             activityId={this.state.activityId}
  348.             token={this.state.token}
  349.             refeshActivity={this._refeshActivity}
  350.             closeModal = {this._closeModal}/>
  351.           </KeyboardAvoidingView>
  352.      
  353.         </Modal>
  354.      
  355.         <Modalize
  356.           ref={ c => this.modaLize = c}
  357.           modalStyle={{marginTop:HEIGHT_DEFAULT_NAVBAR + 20}}
  358.           overlayStyle={{ backgroundColor: 'rgba(0,0,0,.3)' }}
  359.           //modalHeight={SCREEN.height/2}
  360.           snapPoint={SCREEN.height/2}
  361.           >
  362.             <ModalContentToggle
  363.               isActivty = {this.state.isActivty}
  364.               commentToggle={this.state.commentToggle}
  365.             />
  366.         </Modalize>
  367.         </View>
  368.     );
  369.   }
  370. }
  371. const SIZE_ICON_CLOSE = 18;
  372. const styles = StyleSheet.create({
  373.   container: {
  374.     flex: 1,
  375.   },
  376.   imageViewMore:{
  377.     width: 24,
  378.     height: 24
  379.   },
  380.   touchMore:{
  381.     minHeight:36,
  382.     minWidth:36,
  383.     justifyContent:'center',
  384.     alignItems:'center',
  385.     marginRight:10,
  386.   },
  387.   commentBox: {
  388.     height: 60
  389.   },
  390.   HeaderTittle: {
  391.     justifyContent: 'flex-start',
  392.     alignItems: 'center',
  393.     color: '#ffffff', //152935
  394.     fontSize: 22,
  395.     paddingLeft: 5,
  396.     marginTop: 20,
  397.     fontWeight: 'bold'
  398.   },
  399.   bottomModal: {
  400.     justifyContent: 'flex-end',
  401.     margin: 0
  402.   },
  403.   imageViewClose:{
  404.     width: SIZE_ICON_CLOSE,
  405.     height: SIZE_ICON_CLOSE,
  406.     marginTop:10
  407.   },
  408.   touchImageViewClose:{
  409.     minWidth: 30,
  410.     minHeight: 36,
  411.     justifyContent:'center',
  412.     alignItems:'center',
  413.     marginLeft:10,
  414.   },
  415. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!