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 {
)}
+
+
-
+
+
);
}