ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-04 17:33:55 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

placeholder for adding upvote popover

Browse Source
This commit is contained in:
Nouman Tahir 2023-02-08 19:10:11 +05:00
parent c5378c3755
commit 7211c26557
4 changed files with 166 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/postCard/container/postCardContainer.tsx
View File

@ -30,7 +30,9 @@ const PostCardContainer = ({
pageType, pageType,
showQuickReplyModal, showQuickReplyModal,
mutes, mutes,
handleOnContentPress handleOnContentPress,
upvotePress,
}) => { }) => {
// const navigation = useNavigation(); // const navigation = useNavigation();
@ -39,7 +41,7 @@ const PostCardContainer = ({
// const [_content, setContent] = useState(content); // const [_content, setContent] = useState(content);
// const [reblogs, setReblogs] = useState([]); // const [reblogs, setReblogs] = useState([]);
const activeVotes = useMemo(()=>content?.active_votes || [], [content]) // const activeVotes = useMemo(()=>content?.active_votes || [], [content])
// const [isMuted, setIsMuted] = useState(!!mutes && mutes.indexOf(content.author) > -1); // const [isMuted, setIsMuted] = useState(!!mutes && mutes.indexOf(content.author) > -1);
@ -138,14 +140,13 @@ const PostCardContainer = ({
return ( return (
<PostCardView <PostCardView
content={content} content={content}
isHideImage={isHideImage} isHideImage={isHideImage}
nsfw={nsfw || '1'} nsfw={nsfw || '1'}
reblogs={[]} reblogs={[]}
activeVotes={activeVotes} activeVotes={content.active_votes || []}
imageHeight={imageHeight} // imageHeight={imageHeight}
setImageHeight={setImageHeight} // setImageHeight={setImageHeight}
isMuted={false} isMuted={false}
pageType={pageType} pageType={pageType}
@ -156,13 +157,14 @@ const PostCardContainer = ({
// handleOnVotersPress={_handleOnVotersPress} // handleOnVotersPress={_handleOnVotersPress}
// handleOnReblogsPress={_handleOnReblogsPress} // handleOnReblogsPress={_handleOnReblogsPress}
// handleOnUnmutePress={_handleOnUnmutePress} // handleOnUnmutePress={_handleOnUnmutePress}
upvotePress={upvotePress}
/> />
); );
}; };
const mapStateToProps = (state) => ({ // const mapStateToProps = (state) => ({
currentAccount: state.account.currentAccount, // currentAccount: state.account.currentAccount,
nsfw: state.application.nsfw, // nsfw: state.application.nsfw,
}); // });
export default connect(mapStateToProps)(PostCardContainer); export default PostCardContainer;

241
src/components/postsList/container/postsListContainer.tsx
View File

@ -1,11 +1,14 @@
import React, { forwardRef, memo, useRef, useImperativeHandle, useState, useEffect } from 'react'; import React, { forwardRef, memo, useRef, useImperativeHandle, useState, useEffect } from 'react';
import { get } from 'lodash'; import { get } from 'lodash';
import { FlatListProps, FlatList, RefreshControl, ActivityIndicator, View, Alert } from 'react-native'; import { FlatListProps, FlatList, RefreshControl, ActivityIndicator, View, Alert, Text, findNodeHandle, NativeModules } from 'react-native';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import PostCard from '../../postCard'; import PostCard from '../../postCard';
import styles from '../view/postsListStyles'; import styles from '../view/postsListStyles';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import ROUTES from '../../../constants/routeNames'; import ROUTES from '../../../constants/routeNames';
import { useIntl } from 'react-intl';
import Popover, { usePopover } from 'react-native-modal-popover';
import Upvote from '../../upvote';
export interface PostsListRef { export interface PostsListRef {
scrollToTop: () => void; scrollToTop: () => void;
@ -37,9 +40,25 @@ const postsListContainer = (
ref, ref,
) => { ) => {
const flatListRef = useRef(null); const flatListRef = useRef(null);
const intl = useIntl();
const navigation = useNavigation(); const navigation = useNavigation();
const popoverRef = useRef<Popover>(null);
// const {
// openPopover,
// closePopover,
// popoverVisible,
// touchableRef,
// popoverAnchorRect,
// } = usePopover();
// const [popoverVisible, setPopoverVisible] = useState(false);
const [popoverAnchorRect, setPopoverAnchorRect] = useState({rect:{ x: 0, y: 0, width: 0, height: 0 }, visible:false});
const [imageHeights, setImageHeights] = useState(new Map<string, number>()); const [imageHeights, setImageHeights] = useState(new Map<string, number>());
const isHideImages = useSelector((state) => state.application.hidePostsThumbnails); const isHideImages = useSelector((state) => state.application.hidePostsThumbnails);
@ -48,7 +67,7 @@ const postsListContainer = (
return isFeedScreen ? state.posts.feedPosts : state.posts.otherPosts; return isFeedScreen ? state.posts.feedPosts : state.posts.otherPosts;
}); });
const mutes = useSelector((state) => state.account.currentAccount.mutes); const mutes = useSelector((state) => state.account.currentAccount.mutes);
const scrollIndex:number = useSelector(state => state.ui.scrollIndex); const scrollIndex: number = useSelector(state => state.ui.scrollIndex);
const scrollPosition = useSelector((state) => { const scrollPosition = useSelector((state) => {
return isFeedScreen ? state.posts.feedScrollPosition : state.posts.otherScrollPosition; return isFeedScreen ? state.posts.feedScrollPosition : state.posts.otherScrollPosition;
@ -80,26 +99,27 @@ const postsListContainer = (
}, [scrollPosition]); }, [scrollPosition]);
//TODO: test hook, remove before PR //TODO: test hook, remove before PR
useEffect(()=>{ useEffect(() => {
if(scrollIndex && flatListRef.current){ if (scrollIndex && flatListRef.current) {
const _posts = props.data || posts const _posts = props.data || posts
console.log("scrollIndex", scrollIndex, "posts length", _posts.length); console.log("scrollIndex", scrollIndex, "posts length", _posts.length);
if(scrollIndex >= _posts.length){ if (scrollIndex >= _posts.length) {
Alert.alert("Reached an end, scroll score, " + scrollIndex); Alert.alert("Reached an end, scroll score, " + scrollIndex);
return; return;
} }
if(scrollIndex > _posts.length - 5){ if (scrollIndex === _posts.length - 15) {
console.log("fetching posts");
onLoadPosts(false); onLoadPosts(false);
} }
flatListRef.current.scrollToIndex({index:scrollIndex, animated:false});
console.log("scrolling to ", JSON.stringify(_posts[scrollIndex])) flatListRef.current.scrollToIndex({ index: scrollIndex });
setTimeout(()=>{ setTimeout(() => {
_handleOnContentPress(_posts[scrollIndex]) _handleOnContentPress(_posts[scrollIndex])
}, 200) }, 500)
} }
},[scrollIndex]) }, [scrollIndex])
const _setImageHeightInMap = (mapKey: string, height: number) => { const _setImageHeightInMap = (mapKey: string, height: number) => {
if (mapKey && height) { if (mapKey && height) {
@ -126,6 +146,20 @@ const postsListContainer = (
} }
}; };
const _upvotePress = (buttonRef) => {
const handle = findNodeHandle(buttonRef.current);
if (handle) {
NativeModules.UIManager.measure(handle, (x0, y0, width, height, x, y) => {
setPopoverAnchorRect({rect:{ x, y, width, height }, visible:true })
});
}
}
const closePopover = ()=>{
// setPopoverVisible(false);
setPopoverAnchorRect({rect:{ x:0, y:0, width:0, height:0 }, visible:false });
}
const _handleOnContentPress = (value) => { const _handleOnContentPress = (value) => {
if (value) { if (value) {
// postsCacherPrimer.cachePost(value); // postsCacherPrimer.cachePost(value);
@ -141,99 +175,116 @@ const postsListContainer = (
}; };
const _renderItem = ({ item, index }: { item: any; index: number }) => { const _renderItem = ({ item, index }: { item: any; index: number }) => {
const e = []; // const e = [];
if (index % 3 === 0) { // if (index % 3 === 0) {
const ix = index / 3 - 1; // const ix = index / 3 - 1;
if (promotedPosts[ix] !== undefined) { // if (promotedPosts[ix] !== undefined) {
const p = promotedPosts[ix]; // const p = promotedPosts[ix];
const isMuted = mutes && mutes.indexOf(p.author) > -1; // const isMuted = mutes && mutes.indexOf(p.author) > -1;
if ( // if (
!isMuted && // !isMuted &&
get(p, 'author', null) && // get(p, 'author', null) &&
posts && // posts &&
posts.filter((x) => x.permlink === p.permlink).length <= 0 // posts.filter((x) => x.permlink === p.permlink).length <= 0
) { // ) {
// get image height from cache if available // // get image height from cache if available
const localId = p.author + p.permlink; // const localId = p.author + p.permlink;
const imgHeight = imageHeights.get(localId); // const imgHeight = imageHeights.get(localId);
e.push( // e.push(
<PostCard // <PostCard
key={`${p.author}-${p.permlink}-prom`} // intl={intl}
content={p} // key={`${p.author}-${p.permlink}-prom`}
isHideImage={isHideImages} // content={p}
imageHeight={imgHeight} // isHideImage={isHideImages}
pageType={pageType} // imageHeight={imgHeight}
setImageHeight={_setImageHeightInMap} // pageType={pageType}
showQuickReplyModal={showQuickReplyModal} // setImageHeight={_setImageHeightInMap}
handleOnContentPress={()=>_handleOnContentPress(item)} // showQuickReplyModal={showQuickReplyModal}
mutes={mutes} // handleOnContentPress={()=>_handleOnContentPress(item)}
/>, // mutes={mutes}
); // />,
} // );
} // }
} // }
// }
const isMuted = mutes && mutes.indexOf(item.author) > -1; // const isMuted = mutes && mutes.indexOf(item.author) > -1;
if (!isMuted && get(item, 'author', null)) { // if (!isMuted && get(item, 'author', null)) {
// get image height from cache if available // // get image height from cache if available
const localId = item.author + item.permlink; // const localId = item.author + item.permlink;
const imgHeight = imageHeights.get(localId); // const imgHeight = imageHeights.get(localId);
e.push( // e.push(
<PostCard return <PostCard
key={`${item.author}-${item.permlink}`} intl={intl}
content={item} key={`${item.author}-${item.permlink}`}
isHideImage={isHideImages} content={item}
imageHeight={imgHeight} isHideImage={isHideImages}
setImageHeight={_setImageHeightInMap} // imageHeight={imgHeight}
pageType={pageType} setImageHeight={_setImageHeightInMap}
showQuickReplyModal={showQuickReplyModal} pageType={pageType}
mutes={mutes} showQuickReplyModal={showQuickReplyModal}
handleOnContentPress={()=>_handleOnContentPress(item)} mutes={mutes}
/>, handleOnContentPress={() => _handleOnContentPress(item)}
); upvotePress={_upvotePress}
} />
// );
// }
return e; // return e;
}; };
return ( return (
<FlatList <>
ref={flatListRef} <FlatList
data={posts} ref={flatListRef}
showsVerticalScrollIndicator={false} data={posts}
renderItem={_renderItem} showsVerticalScrollIndicator={false}
keyExtractor={(content, index) => `${content.author}/${content.permlink}-${index}`} renderItem={_renderItem}
removeClippedSubviews keyExtractor={(content, index) => `${content.author}/${content.permlink}-${index}`}
onEndReachedThreshold={1} removeClippedSubviews
maxToRenderPerBatch={3} onEndReachedThreshold={1}
initialNumToRender={3} maxToRenderPerBatch={3}
windowSize={5} initialNumToRender={3}
extraData={[imageHeights, scrollIndex]} windowSize={5}
onEndReached={_onEndReached} extraData={[imageHeights, scrollIndex]}
onMomentumScrollBegin={() => { onEndReached={_onEndReached}
_onEndReachedCalledDuringMomentum = false; onMomentumScrollBegin={() => {
}} _onEndReachedCalledDuringMomentum = false;
ListFooterComponent={_renderFooter} }}
refreshControl={ ListFooterComponent={_renderFooter}
<RefreshControl refreshControl={
refreshing={isRefreshing} <RefreshControl
onRefresh={() => { refreshing={isRefreshing}
if (onLoadPosts) { onRefresh={() => {
onLoadPosts(true); if (onLoadPosts) {
} onLoadPosts(true);
}} }
progressBackgroundColor="#357CE6" }}
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'} progressBackgroundColor="#357CE6"
titleColor="#fff" tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
colors={['#fff']} titleColor="#fff"
/> colors={['#fff']}
} />
{...props} }
/> {...props}
/>
<Popover
ref={popoverRef}
contentStyle={styles.content}
arrowStyle={styles.arrow}
backgroundStyle={styles.background}
visible={popoverAnchorRect.visible}
fromRect={popoverAnchorRect.rect}
onClose={closePopover}
supportedOrientations={['portrait', 'landscape']}>
<Text>Hello from inside popover!</Text>
</Popover>
</>
); );
}; };

5
src/components/upvote/view/upvoteView.tsx
View File

@ -278,6 +278,8 @@ const UpvoteView = ({
return ( return (
<PopoverController> <PopoverController>
{({ openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect }) => ( {({ openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect }) => (
<Fragment> <Fragment>
<TouchableOpacity <TouchableOpacity
ref={setPopoverAnchor} ref={setPopoverAnchor}
@ -309,6 +311,9 @@ const UpvoteView = ({
)} )}
</Fragment> </Fragment>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.payoutTextButton}> <View style={styles.payoutTextButton}>
{isShowPayoutValue && ( {isShowPayoutValue && (
<TextButton <TextButton

2
src/screens/post/container/postContainer.tsx
View File

@ -38,7 +38,7 @@ const PostContainer = ({ currentAccount, isLoggedIn, route }) => {
dispatch({ dispatch({
type:"inc-scroll-index" type:"inc-scroll-index"
}) })
}, 100) }, 300)
return ()=> { return ()=> {
if(timer){ if(timer){