separated post card header from main view

src/components/postCard/children/postCardHeader.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from 'react';
+import get from 'lodash/get';
+import { View } from 'react-native';
+
+// Components
+import { PostHeaderDescription } from '../../postElements';
+import { TextWithIcon } from '../../basicUIElements';
+import { Icon } from '../../icon';
+
+// Styles
+import styles from './postCardStyles';
+import { IconButton } from '../..';
+import { getTimeFromNow } from '../../../utils/time';
+import { useIntl } from 'react-intl';
+import { useAppSelector } from '../../../hooks';
+import { PostCardActionIds } from '../container/postCardContainer';
+
+
+interface Props {
+  content: any;
+  onActionPress: (id: PostCardActionIds, payload?: any) => void
+}
+
+export const PostCardHeader = ({ content, onActionPress }: Props) => {
+  const intl = useIntl();
+
+  const isHideImage = useAppSelector((state) => state.application.hidePostsThumbnails)
+
+  const rebloggedBy = get(content, 'reblogged_by[0]', null);
+  const dateString = useMemo(() => getTimeFromNow(content?.created), [content])
+
+  return (
+    <>
+      {!!rebloggedBy && (
+        <TextWithIcon
+          wrapperStyle={styles.reblogWrapper}
+          text={`${intl.formatMessage({ id: 'post.reblogged' })} ${rebloggedBy}`}
+          iconType="MaterialIcons"
+          iconName="repeat"
+          iconSize={16}
+          textStyle={styles.reblogText}
+          isClickable={true}
+          onPress={() => onActionPress(PostCardActionIds.USER, rebloggedBy)}
+        />
+      )}
+
+      <View style={styles.bodyHeader}>
+        <PostHeaderDescription
+          date={dateString}
+          isHideImage={isHideImage}
+          name={get(content, 'author')}
+          profileOnPress={() => onActionPress(PostCardActionIds.USER, content.author)}
+          reputation={get(content, 'author_reputation')}
+          size={50}
+          content={content}
+          rebloggedBy={rebloggedBy}
+          isPromoted={get(content, 'is_promoted')}
+        />
+        {(content?.stats?.is_pinned || content?.stats?.is_pinned_blog) && (
+          <Icon style={styles.pushPinIcon} size={20} name="pin" iconType="MaterialCommunityIcons" />
+        )}
+        <View style={styles.dropdownWrapper}>
+          <IconButton
+            style={styles.optionsIconContainer}
+            iconStyle={styles.optionsIcon}
+            iconType="MaterialCommunityIcons"
+            name="dots-vertical"
+            onPress={() => onActionPress(PostCardActionIds.OPTIONS, content)}
+            size={28}
+          />
+        </View>
+      </View>
+    </>
+  )
+}

src/components/postCard/container/postCardContainer.tsx

@@ -20,6 +20,14 @@ import PostCardView from '../view/postCardView';
  *
  */
 
+
+ export enum PostCardActionIds {
+    POST = 'POST',
+    USER = 'USER',
+    REBLOGS = 'REBLOGS',
+    OPTIONS = 'OPTIONS'
+ }
+
 const PostCardContainer = ({
   currentAccount,
   content,
@@ -33,7 +41,8 @@ const PostCardContainer = ({
   handleOnContentPress,
   handleOnUpvotePress,
   handleOnPayoutDetailsPress,
-  handlePostDropdownPress
+  handlePostDropdownPress,
+  onActionPress,
 }) => {
   // const navigation = useNavigation();
 
@@ -161,6 +170,7 @@ const PostCardContainer = ({
       handleOnUpvotePress={handleOnUpvotePress}
       handleOnPayoutDetailsPress={handleOnPayoutDetailsPress}
       handlePostDropdownPress={handlePostDropdownPress}
+      onActionPress={onActionPress}
     />
   );
 };

src/components/postCard/view/postCardView.tsx

@@ -15,11 +15,12 @@ import { TextWithIcon } from '../../basicUIElements';
 import { Icon } from '../../icon';
 
 // Styles
-import styles from './postCardStyles';
+import styles from '../children/postCardStyles';
 import { IconButton, TextButton } from '../..';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
 import { UpvoteButton } from '../children/upvoteButton';
 import { PostTypes } from '../../../constants/postTypes';
+import { PostCardHeader } from '../children/postCardHeader';
 
 const dim = getWindowDimensions();
 const DEFAULT_IMAGE =
@@ -28,11 +29,9 @@ const NSFW_IMAGE =
   'https://images.ecency.com/DQmZ1jW4p7o5GyoqWyCib1fSLE2ftbewsMCt2GvbmT9kmoY/nsfw_3x.png';
 
 const PostCardView = ({
-  handleOnUserPress,
   handleOnContentPress,
   handleOnVotersPress,
   handleOnReblogsPress,
-  handlePostDropdownPress,
   handleOnUnmutePress,
   handleOnUpvotePress,
   handleOnPayoutDetailsPress,
@@ -40,17 +39,15 @@ const PostCardView = ({
   content,
   reblogs,
   isHideImage,
-  fetchPost,
   nsfw,
   intl,
   activeVotes,
   imageHeight,
   setImageHeight,
   isMuted,
-  pageType,
+  onActionPress
 }) => {
 
-  const upvoteTouchableRef = useRef(null);
   // local state to manage fake upvote if available
   const activeVotesCount = activeVotes ? activeVotes.length : 0;
   // const [cacheVoteIcrement, setCacheVoteIcrement] = useState(0);
@@ -58,11 +55,6 @@ const PostCardView = ({
   const calcImgHeight = 300;
 
   // Component Functions
-  const _handleOnUserPress = (username) => {
-    if (handleOnUserPress) {
-      handleOnUserPress(username);
-    }
-  };
 
   const _handleOnContentPress = () => {
     // console.log('content : ', content);
@@ -70,23 +62,16 @@ const PostCardView = ({
   };
 
   const _handleOnVotersPress = () => {
-    // handleOnVotersPress();
+    handleOnVotersPress();
   };
 
   const _handleOnReblogsPress = () => {
-    // if (reblogs && reblogs.length > 0) {
-    //   handleOnReblogsPress();
-    // }
-  };
-
-  const _handleCacheVoteIncrement = () => {
-    // fake increment vote using based on local change
-    // setCacheVoteIcrement(1);
+    if (reblogs && reblogs.length > 0) {
+      handleOnReblogsPress();
+    }
   };
 
 
-  const rebloggedBy = get(content, 'reblogged_by[0]', null);
-  const dateString = useMemo(() => getTimeFromNow(content?.created), [content])
 
   let images = { image: DEFAULT_IMAGE, thumbnail: DEFAULT_IMAGE };
   if (content.thumbnail) {
@@ -100,50 +85,6 @@ const PostCardView = ({
   }
 
 
-  const _renderCardHeader = (
-    <>
-      {!!rebloggedBy && (
-        <TextWithIcon
-          wrapperStyle={styles.reblogWrapper}
-          text={`${intl.formatMessage({ id: 'post.reblogged' })} ${rebloggedBy}`}
-          iconType="MaterialIcons"
-          iconName="repeat"
-          iconSize={16}
-          textStyle={styles.reblogText}
-          isClickable={true}
-          onPress={() => _handleOnUserPress(rebloggedBy)}
-        />
-      )}
-
-      <View style={styles.bodyHeader}>
-        <PostHeaderDescription
-          date={dateString}
-          isHideImage={isHideImage}
-          name={get(content, 'author')}
-          profileOnPress={_handleOnUserPress}
-          reputation={get(content, 'author_reputation')}
-          size={50}
-          content={content}
-          rebloggedBy={rebloggedBy}
-          isPromoted={get(content, 'is_promoted')}
-        />
-        {(content?.stats?.is_pinned || content?.stats?.is_pinned_blog) && (
-          <Icon style={styles.pushPinIcon} size={20} name="pin" iconType="MaterialCommunityIcons" />
-        )}
-        <View style={styles.dropdownWrapper}>
-          <IconButton
-            style={styles.optionsIconContainer}
-            iconStyle={styles.optionsIcon}
-            iconType="MaterialCommunityIcons"
-            name="dots-vertical"
-            onPress={handlePostDropdownPress}
-            size={28}
-          />
-        </View>
-      </View>
-    </>
-  )
-
 
   const _renderPostContent = (
     <View style={styles.postBodyWrapper}>
@@ -248,10 +189,9 @@ const PostCardView = ({
 
 
 
-
   return (
     <View style={styles.post}>
-      {_renderCardHeader}
+      <PostCardHeader content={content} onActionPress={onActionPress}/>
       {_renderPostContent}
       {_renderActionPanel}
     </View>

src/components/postElements/headerDescription/view/postHeaderDescription.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 
 // Components
@@ -176,6 +175,5 @@ class PostHeaderDescription extends PureComponent {
   }
 }
 
-const mapStateToProps = () => ({});
 
-export default connect(mapStateToProps)(injectIntl(PostHeaderDescription));
+export default injectIntl(PostHeaderDescription);

src/components/postOptionsModal/index.js

@@ -1,3 +1,2 @@
 import PostOptionsModal from './container/postOptionsModal';
-
 export { PostOptionsModal };

src/components/postsList/container/postsListContainer.tsx

@@ -10,6 +10,9 @@ import Popover from 'react-native-modal-popover';
 import { UpvotePopover } from '../..';
 import { PostTypes } from '../../../constants/postTypes';
 import { PostOptionsModal } from '../../postOptionsModal';
+import { PostCardActionIds } from '../../postCard/container/postCardContainer';
+import { useAppDispatch } from '../../../hooks';
+import { showProfileModal } from '../../../redux/actions/uiAction';
 
 export interface PostsListRef {
   scrollToTop: () => void;
@@ -42,6 +45,7 @@ const postsListContainer = (
 ) => {
   const flatListRef = useRef(null);
   const intl = useIntl();
+  const dispatch = useAppDispatch();
 
   const navigation = useNavigation();
 
@@ -184,6 +188,20 @@ const postsListContainer = (
     }
   };
 
+
+  const _onActionPress = (id:PostCardActionIds, payload:any) => {
+    switch(id){
+      case PostCardActionIds.USER:
+        dispatch(showProfileModal(payload))
+        break;
+      case PostCardActionIds.OPTIONS:
+        if(postDropdownRef.current && payload){
+          postDropdownRef.current.show(payload);
+        }
+        break;
+    }
+  }
+
   const _renderItem = ({ item, index }: { item: any; index: number }) => {
     // const e = [];
 
@@ -242,6 +260,7 @@ const postsListContainer = (
       handleOnUpvotePress={(anchorRect) => _handleOnUpvotePress(anchorRect, item)}
       handleOnPayoutDetailsPress={(anchorRect) => _handleOnPayoutDetailsPress(anchorRect, item)}
       handlePostDropdownPress = {()=>_handlePostDropdownPress(item)}
+      onActionPress={_onActionPress}
     />
     //   );
     // }

src/components/upvotePopover/container/upvotePopover.tsx

@@ -339,9 +339,7 @@ const UpvotePopover = forwardRef(({ parentType }: Props, ref) => {
 
 
   return (
-
     <Fragment>
-
       <Popover
         contentStyle={showPayoutDetails ? styles.popoverDetails : styles.popoverSlider}
         arrowStyle={showPayoutDetails ? styles.arrow : styles.hideArrow}