Merge pull request #2373 from ecency/nt/quick-reply-tweaks

Nt/quick reply tweaks

src/components/postView/view/postDisplayView.js

@@ -24,6 +24,8 @@ import styles from './postDisplayStyles';
 import { OptionsModal } from '../../atoms';
 import { QuickReplyModal } from '../..';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
+import { useAppDispatch } from '../../../hooks';
+import { showReplyModal } from '../../../redux/actions/uiAction';
 
 const HEIGHT = getWindowDimensions().height;
 const WIDTH = getWindowDimensions().width;
@@ -47,6 +49,7 @@ const PostDisplayView = ({
   reblogs,
   activeVotesCount,
 }) => {
+  const dispatch = useAppDispatch();
   const insets = useSafeAreaInsets();
 
   const [postHeight, setPostHeight] = useState(0);
@@ -58,8 +61,6 @@ const PostDisplayView = ({
   const [postBodyLoading, setPostBodyLoading] = useState(false);
   const [tags, setTags] = useState([]);
 
-  const quickReplyModalRef = useRef(null);
-
   // Component Life Cycles
   useEffect(() => {
     if (isLoggedIn && get(currentAccount, 'name') && !isNewPost) {
@@ -210,7 +211,7 @@ const PostDisplayView = ({
   // show quick reply modal
   const _showQuickReplyModal = (post) => {
     if (isLoggedIn) {
-      quickReplyModalRef.current.show(post);
+      dispatch(showReplyModal(post));
     } else {
       console.log('Not LoggedIn');
     }
@@ -283,7 +284,6 @@ const PostDisplayView = ({
         cancelButtonIndex={1}
         onPress={(index) => (index === 0 ? handleOnRemovePress(get(post, 'permlink')) : null)}
       />
-      <QuickReplyModal ref={quickReplyModalRef} fetchPost={fetchPost} />
     </View>
   );
 };

src/components/quickReplyModal/quickReplyModalContent.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from './quickReplyModalStyles';
-import { View, Text, Alert, TouchableOpacity, Keyboard, Platform, KeyboardAvoidingView } from 'react-native';
+import { View, Text, Alert, TouchableOpacity, Keyboard, Platform } from 'react-native';
 import { useIntl } from 'react-intl';
 import { IconButton, MainButton, TextButton, TextInput, UserAvatar } from '..';
 import { useSelector, useDispatch } from 'react-redux';
@@ -19,24 +19,24 @@ import { navigate } from '../../navigation/service';
 import { postBodySummary } from '@ecency/render-helper';
 import { Draft } from '../../redux/reducers/cacheReducer';
 import { RootState } from '../../redux/store/store';
+import { useImperativeHandle } from 'react';
+import { forwardRef } from 'react';
 
 export interface QuickReplyModalContentProps {
-  fetchPost?: any;
   selectedPost?: any;
-  inputRef?: any;
   handleCloseRef?: any;
   onClose: () => void;
 }
 
-export const QuickReplyModalContent = ({
-  fetchPost,
+export const QuickReplyModalContent = forwardRef(({
   selectedPost,
-  inputRef,
-  handleCloseRef,
   onClose,
-}: QuickReplyModalContentProps) => {
+}: QuickReplyModalContentProps, ref) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+
+  const inputRef = useRef(null);
+
   const currentAccount = useSelector((state: RootState) => state.account.currentAccount);
   const pinCode = useSelector((state: RootState) => state.application.pin);
   const drafts = useSelector((state: RootState) => state.cache.drafts);
@@ -52,25 +52,31 @@ export const QuickReplyModalContent = ({
   let draftId = `${currentAccount.name}/${parentAuthor}/${parentPermlink}`; //different draftId for each user acount
 
 
-  useEffect(() => {
-    handleCloseRef.current = handleSheetClose;
-  }, [commentValue]);
+  useImperativeHandle(ref, () => ({
+    handleSheetClose() {
+      _addQuickCommentIntoCache();
+    },
+  }));
+
   
   // load quick comment value from cache
   useEffect(() => {
+    let _value = ''
     if (drafts.has(draftId) && currentAccount.name === drafts.get(draftId).author) {
       const quickComment: Draft = drafts.get(draftId);
-      setCommentValue(quickComment.body);
-    } else {
-      setCommentValue('');
+      _value = quickComment.body;
     } 
+
+    if(inputRef.current){
+      inputRef.current.setNativeProps({
+        text:_value
+      })
+      setCommentValue(_value)
+    }
+
   }, [selectedPost]);
 
-  // handlers
 
-  const handleSheetClose = () => {
-    _addQuickCommentIntoCache();
-  };
 
   // add quick comment value into cache
   const _addQuickCommentIntoCache = (value = commentValue) => {
@@ -146,6 +152,10 @@ export const QuickReplyModalContent = ({
           stateTimer = setTimeout(() => {
             setIsSending(false);
             onClose();
+            //TODO: use native method to update comment value instead
+            inputRef.current.setNativeProps({
+              text:''
+            })
             setCommentValue('');
             dispatch(
               toastNotification(
@@ -207,7 +217,6 @@ export const QuickReplyModalContent = ({
         params: {
           isReply: true,
           post: selectedPost,
-          fetchPost,
         },
       });
     }
@@ -285,7 +294,6 @@ export const QuickReplyModalContent = ({
         <TextInput
           innerRef={inputRef}
           onChangeText={_onChangeText}
-          value={commentValue}
           autoFocus
           placeholder={intl.formatMessage({
             id: 'quick_reply.placeholder',
@@ -305,4 +313,4 @@ export const QuickReplyModalContent = ({
   )
 
   return _renderContent
-};
+});

src/components/quickReplyModal/quickReplyModalView.tsx

@@ -1,48 +1,39 @@
-import React, { useImperativeHandle, useRef, useState } from 'react';
-import { forwardRef } from 'react';
+import React, { useRef } from 'react';
 import { QuickReplyModalContent } from './quickReplyModalContent';
 import { InputSupportModal } from '../organisms';
+import { useAppDispatch, useAppSelector } from '../../hooks';
+import { hideReplyModal } from '../../redux/actions/uiAction';
 
-export interface QuickReplyModalProps {
-  fetchPost?: any;
-}
+const QuickReplyModal = () => {
 
-const QuickReplyModal = ({ fetchPost }: QuickReplyModalProps, ref) => {
-  const [selectedPost, setSelectedPost] = useState(null);
-  const inputRef = useRef<TextInput>(null);
-  const handleCloseRef = useRef(null);
+  const dispatch = useAppDispatch();
 
-  const [visible, setVisible] = useState(false);
+  const replyModalVisible = useAppSelector((state) => state.ui.replyModalVisible);
+  const replyModalPost = useAppSelector(state => state.ui.replyModalPost)
+  const modalContentRef = useRef(null);
 
-  //CALLBACK_METHOD
-  useImperativeHandle(ref, () => ({
-    show: (post: any) => {
-      setSelectedPost(post);
-      setVisible(true)
-
-    },
-  }));
 
   const _onClose = () => {
-    setVisible(false);
+    if(modalContentRef.current){
+      modalContentRef.current.handleSheetClose();
+    }
+    dispatch(hideReplyModal());
   }
 
 
   return (
     <InputSupportModal
-      visible={visible && !!selectedPost}
+      visible={replyModalVisible && !!replyModalPost}
       onClose={_onClose}
     >
       <QuickReplyModalContent
-        fetchPost={fetchPost}
-        selectedPost={selectedPost}
-        inputRef={inputRef}
+        ref={modalContentRef}
+        selectedPost={replyModalPost}
         onClose={_onClose}
-        handleCloseRef={handleCloseRef}
       />
     </InputSupportModal>
 
   );
 };
 
-export default forwardRef(QuickReplyModal as any);
+export default QuickReplyModal;

src/components/tabbedPosts/view/tabContent.tsx

@@ -5,12 +5,12 @@ import { LoadPostsOptions, TabContentProps, TabMeta } from '../services/tabbedPo
 import {useSelector, useDispatch } from 'react-redux';
 import TabEmptyView from './listEmptyView';
 import { setInitPosts } from '../../../redux/actions/postsAction';
+import { showReplyModal } from '../../../redux/actions/uiAction';
 import { calculateTimeLeftForPostCheck } from '../services/tabbedPostsHelpers';
 import { AppState, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { PostsListRef } from '../../postsList/container/postsListContainer';
 import ScrollTopPopup from './scrollTopPopup';
 import { debounce } from 'lodash';
-import { QuickReplyModal } from '../..';
 
 const DEFAULT_TAB_META = {
     startAuthor:'',
@@ -68,7 +68,6 @@ const TabContent = ({
   const appState = useRef(AppState.currentState);
   const postsRef = useRef(posts);
   const sessionUserRef = useRef(sessionUser);
-  const quickReplyModalRef = useRef(null)
 
   //init state refs;
   postsRef.current = posts;
@@ -335,13 +334,12 @@ const TabContent = ({
 
   // show quick reply modal
   const _showQuickReplyModal = (post:any) => {
-    // console.log('post: ', post);
     if (isLoggedIn) {
-      quickReplyModalRef.current.show(post);
+      dispatch(showReplyModal(post))
     } else {
+      //TODO: show proper alert message 
       console.log('Not LoggedIn');
     }
-    
   }
 
   return (
@@ -375,7 +373,6 @@ const TabContent = ({
         setEnableScrollTop(false);
       }}
     />
-    <QuickReplyModal ref={quickReplyModalRef} />
   </>
   );
 };

src/redux/actions/uiAction.ts

@@ -10,7 +10,9 @@ import {
   SHOW_PROFILE_MODAL,
   HIDE_PROFILE_MODAL,
   TOGGLE_QR_MODAL,
-  SET_DEVICE_ORIENTATION
+  SET_DEVICE_ORIENTATION,
+  SHOW_REPLY_MODAL,
+  HIDE_REPLY_MODAL
 } from '../constants/constants';
 
 export const updateActiveBottomTab = (payload:string) => ({
@@ -77,3 +79,11 @@ export const setDeviceOrientation = (payload:string) => ({
   type: SET_DEVICE_ORIENTATION,
 });
 
+export const showReplyModal = (selectionPost:any) => ({
+  payload:selectionPost,
+  type: SHOW_REPLY_MODAL
+})
+
+export const hideReplyModal = () => ({
+  type: HIDE_REPLY_MODAL
+})

src/redux/constants/constants.js

@@ -62,6 +62,8 @@ export const SET_AVATAR_CACHE_STAMP = 'SET_AVATAR_CACHE_STAMP';
 export const SHOW_PROFILE_MODAL = 'SHOW_PROFILE_MODAL';
 export const HIDE_PROFILE_MODAL = 'HIDE_PROFILE_MODAL';
 export const SET_DEVICE_ORIENTATION = 'SET_DEVICE_ORIENTATION';
+export const SHOW_REPLY_MODAL = 'SHOW_REPLY_MODAL';
+export const HIDE_REPLY_MODAL = 'HIDE_REPLY_MODAL';
 
 // POSTS
 export const SET_FEED_POSTS = 'SET_FEED_POSTS';

src/redux/reducers/uiReducer.ts

@@ -10,6 +10,8 @@ import {
   HIDE_PROFILE_MODAL,
   TOGGLE_QR_MODAL,
   SET_DEVICE_ORIENTATION,
+  SHOW_REPLY_MODAL,
+  HIDE_REPLY_MODAL,
 } from '../constants/constants';
 import { orientations } from '../constants/orientationsConstants';
 
@@ -24,6 +26,8 @@ interface UiState {
   profileModalUsername:string;
   isVisibleQRModal:boolean;
   deviceOrientation: string;
+  replyModalVisible:boolean;
+  replyModalPost:any
 }
 
 const initialState:UiState = {
@@ -36,10 +40,12 @@ const initialState:UiState = {
   avatarCacheStamp: 0,
   profileModalUsername: '',
   isVisibleQRModal: false,
-  deviceOrientation: orientations.PORTRAIT
+  deviceOrientation: orientations.PORTRAIT,
+  replyModalPost: null,
+  replyModalVisible: false,
 };
 
-export default function (state = initialState, action) {
+export default function (state = initialState, action) : UiState {
   switch (action.type) {
     case UPDATE_ACTIVE_BOTTOM_TAB:
       return {
@@ -109,6 +115,18 @@ export default function (state = initialState, action) {
         ...state,
         deviceOrientation: action.payload,
     };
+    case SHOW_REPLY_MODAL:
+      return {
+        ...state,
+        replyModalVisible:true,
+        replyModalPost:action.payload
+      }
+    case HIDE_REPLY_MODAL:
+      return {
+        ...state,
+        replyModalVisible:false,
+        replyModalPost:null
+      }
     default:
       return state;
   }

src/screens/application/children/applicationScreen.tsx

@@ -25,6 +25,7 @@ import {
   ForegroundNotification,
   QuickProfileModal,
   QRModal,
+  QuickReplyModal,
 } from '../../../components';
 
 // Themes (Styles)
@@ -127,10 +128,13 @@ class ApplicationScreen extends Component {
         )}
 
         <ForegroundNotification remoteMessage={foregroundNotificationData} />
+       
+        <QuickProfileModal navigation={{ navigate }} />
         <AccountsBottomSheet />
         <ActionModal />
-        <QuickProfileModal navigation={{ navigate }} />
+        <QuickReplyModal />
         <QRModal />
+
       </View>
     );
   }