ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-19 11:21:41 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Nt/quick reply tweaks
This commit is contained in:
Feruz M 2022-07-18 16:33:44 +03:00 committed by GitHub
commit 6d28d9814d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 92 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/postView/view/postDisplayView.js
View File

@ -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>
);
};

54
src/components/quickReplyModal/quickReplyModalContent.tsx
View File

@ -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 = ({
<TextInput
innerRef={inputRef}
onChangeText={_onChangeText}
value={commentValue}
autoFocus
placeholder={intl.formatMessage({
id: 'quick_reply.placeholder',
@ -305,4 +313,4 @@ export const QuickReplyModalContent = ({
)
return _renderContent
};
});

41
src/components/quickReplyModal/quickReplyModalView.tsx
View File

@ -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;

9
src/components/tabbedPosts/view/tabContent.tsx
View File

@ -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} />
</>
);
};

12
src/redux/actions/uiAction.ts
View File

@ -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
})

2
src/redux/constants/constants.js
View File

@ -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';

22
src/redux/reducers/uiReducer.ts
View File

@ -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;
}

6
src/screens/application/children/applicationScreen.tsx
View File

@ -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>
);
}