diff --git a/src/components/postView/view/postDisplayView.js b/src/components/postView/view/postDisplayView.js index f3dc02bfd..172f1dd6a 100644 --- a/src/components/postView/view/postDisplayView.js +++ b/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)} /> - ); }; diff --git a/src/components/quickReplyModal/quickReplyModalContent.tsx b/src/components/quickReplyModal/quickReplyModalContent.tsx index 3fda7bbb8..fd05741fa 100644 --- a/src/components/quickReplyModal/quickReplyModalContent.tsx +++ b/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; + 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 = ({ { -const QuickReplyModal = ({ fetchPost }: QuickReplyModalProps, ref) => { - const [selectedPost, setSelectedPost] = useState(null); - const inputRef = useRef(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 ( ); }; -export default forwardRef(QuickReplyModal as any); +export default QuickReplyModal; diff --git a/src/components/tabbedPosts/view/tabContent.tsx b/src/components/tabbedPosts/view/tabContent.tsx index c14a6b436..283216c86 100644 --- a/src/components/tabbedPosts/view/tabContent.tsx +++ b/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); }} /> - ); }; diff --git a/src/redux/actions/uiAction.ts b/src/redux/actions/uiAction.ts index 5a26206b3..278690e25 100644 --- a/src/redux/actions/uiAction.ts +++ b/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 +}) diff --git a/src/redux/constants/constants.js b/src/redux/constants/constants.js index 3e8064d1e..74d54ee44 100644 --- a/src/redux/constants/constants.js +++ b/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'; diff --git a/src/redux/reducers/uiReducer.ts b/src/redux/reducers/uiReducer.ts index d5738f2a4..ced01822a 100644 --- a/src/redux/reducers/uiReducer.ts +++ b/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; } diff --git a/src/screens/application/children/applicationScreen.tsx b/src/screens/application/children/applicationScreen.tsx index 48280757a..fa0fbace0 100644 --- a/src/screens/application/children/applicationScreen.tsx +++ b/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 { )} + + - + + ); }