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

Merge pull request #2267 from ecency/sa/quick-comment-expansion

Browse Source 
Quick Comment Expansion to other places
This commit is contained in:
Feruz M 2022-04-21 08:30:41 +03:00 committed by GitHub
commit e497352d74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 124 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/comment/view/commentView.tsx
View File

@ -151,6 +151,7 @@ const CommentView = ({
mainAuthor={mainAuthor}
fetchedAt={fetchedAt}
incrementRepliesCount={_incrementRepliesCount}
handleOnReplyPress={handleOnReplyPress}
/>
</AnimatedView>

3
src/components/comments/container/commentsContainer.js
View File

@ -47,6 +47,7 @@ const CommentsContainer = ({
flatListProps,
fetchedAt,
incrementRepliesCount,
handleOnReplyPress,
}) => {
const lastCacheUpdate = useAppSelector((state) => state.cache.lastUpdate);
const cachedComments = useAppSelector((state) => state.cache.comments);
@ -338,7 +339,7 @@ const CommentsContainer = ({
comments={lcomments.length > 0 ? lcomments : propComments}
currentAccountUsername={currentAccount.name}
handleOnEditPress={_handleOnEditPress}
handleOnReplyPress={_handleOnReplyPress}
handleOnReplyPress={handleOnReplyPress}
isLoggedIn={isLoggedIn}
fetchPost={fetchPost}
handleDeleteComment={_handleDeleteComment}

2
src/components/commentsDisplay/view/commentsDisplayView.js
View File

@ -18,6 +18,7 @@ const CommentsDisplayView = ({
permlink,
mainAuthor,
handleOnVotersPress,
handleOnReplyPress,
fetchedAt,
}) => {
const [selectedFilter, setSelectedFilter] = useState('trending');
@ -50,6 +51,7 @@ const CommentsDisplayView = ({
permlink={permlink}
mainAuthor={mainAuthor}
handleOnVotersPress={handleOnVotersPress}
handleOnReplyPress={handleOnReplyPress}
fetchedAt={fetchedAt}
/>
</View>

19
src/components/markdownEditor/view/markdownEditorView.js
View File

@ -8,7 +8,7 @@ import {
ScrollView,
TouchableOpacity,
} from 'react-native';
import { renderPostBody } from '@ecency/render-helper';
import { renderPostBody, postBodySummary } from '@ecency/render-helper';
import { useDispatch, useSelector } from 'react-redux';
import { View as AnimatedView } from 'react-native-animatable';
import { get } from 'lodash';
@ -101,6 +101,7 @@ const MarkdownEditorView = ({
);
const draftBtnTooltipState = useSelector((state) => state.walkthrough.walkthroughMap);
const draftBtnTooltipRegistered = draftBtnTooltipState.get(walkthrough.EDITOR_DRAFT_BTN);
const headerText = post && (post.summary || postBodySummary(post, 150, Platform.OS));
useEffect(() => {
if (!isPreviewActive) {
@ -121,7 +122,11 @@ const MarkdownEditorView = ({
useEffect(() => {
if (text === '' && draftBody !== '') {
_setTextAndSelection({ selection: { start: 0, end: 0 }, text: draftBody });
let draftBodyLength = draftBody.length;
_setTextAndSelection({
selection: { start: draftBodyLength, end: draftBodyLength },
text: draftBody,
});
}
}, [draftBody]);
@ -178,7 +183,10 @@ const MarkdownEditorView = ({
useEffect(() => {
if (autoFocusText && inputRef && inputRef.current && draftBtnTooltipRegistered) {
inputRef.current.focus();
// added delay to open keyboard, solves the issue of keyboard not opening
setTimeout(() => {
inputRef.current.focus();
}, 1000);
}
}, [autoFocusText]);
@ -423,10 +431,9 @@ const MarkdownEditorView = ({
_setTextAndSelection({ text: '', selection: { start: 0, end: 0 } });
}
};
const _renderEditor = () => (
<>
{isReply && !isEdit && <SummaryArea summary={post.summary} />}
{isReply && !isEdit && <SummaryArea summary={headerText} />}
{!isReply && (
<TitleArea value={fields.title} onChange={onTitleChanged} componentID="title" intl={intl} />
)}
@ -471,7 +478,7 @@ const MarkdownEditorView = ({
<TextInput
multiline
autoCorrect={true}
autoFocus={isReply && draftBtnTooltipRegistered ? true : false}
autoFocus={!draftBtnTooltipRegistered ? false : true}
onChangeText={_changeText}
onSelectionChange={_handleOnSelectionChange}
placeholder={intl.formatMessage({

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

@ -22,6 +22,7 @@ import { ParentPost } from '../../parentPost';
// Styles
import styles from './postDisplayStyles';
import { OptionsModal } from '../../atoms';
import { QuickReplyModal } from '../..';
const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;
@ -56,6 +57,8 @@ 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) {
@ -137,7 +140,8 @@ const PostDisplayView = ({
isClickable
text={get(post, 'children', 0)}
textMarginLeft={20}
onPress={() => handleOnReplyPress && handleOnReplyPress()}
onPress={() => _showQuickReplyModal(post)}
// onPress={() => handleOnReplyPress && handleOnReplyPress()}
/>
)}
{!isLoggedIn && (
@ -202,6 +206,15 @@ const PostDisplayView = ({
setPostBodyLoading(false);
};
// show quick reply modal
const _showQuickReplyModal = (post) => {
if (isLoggedIn) {
quickReplyModalRef.current.show(post);
} else {
console.log('Not LoggedIn');
}
};
return (
<View style={styles.container}>
<ScrollView
@ -252,6 +265,7 @@ const PostDisplayView = ({
commentCount={post.children}
fetchPost={fetchPost}
handleOnVotersPress={handleOnVotersPress}
handleOnReplyPress={_showQuickReplyModal}
fetchedAt={post.post_fetched_at}
/>
)}
@ -268,6 +282,7 @@ const PostDisplayView = ({
cancelButtonIndex={1}
onPress={(index) => (index === 0 ? handleOnRemovePress(get(post, 'permlink')) : null)}
/>
<QuickReplyModal ref={quickReplyModalRef} fetchPost={fetchPost} />
</View>
);
};

19
src/components/quickReplyModal/quickReplyModalStyles.ts
View File

@ -46,7 +46,7 @@ export default EStyleSheet.create({
},
footer: {
flexDirection: 'row',
justifyContent: 'flex-end',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal:16,
},
@ -56,11 +56,15 @@ export default EStyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
replyBtnContainer: {
flexDirection: 'row',
alignItems: 'center',
},
replySection: {
paddingTop: 10,
paddingBottom: 0,
},
accountTile: {
height: 60,
flexDirection: 'row',
@ -82,5 +86,14 @@ export default EStyleSheet.create({
marginLeft: 4,
color: '$primaryDarkGray',
},
titleContainer: {
paddingHorizontal: 16,
paddingVertical: 8,
backgroundColor: '$primaryBackgroundColor',
},
titleText: {
color: '$primaryBlack',
fontWeight: 'bold',
fontSize: 10,
},
});

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

@ -16,11 +16,13 @@ import { default as ROUTES } from '../../constants/routeNames';
import get from 'lodash/get';
import { navigate } from '../../navigation/service';
import { Portal } from 'react-native-portalize';
import { renderPostBody } from '@ecency/render-helper';
import { postBodySummary } from '@ecency/render-helper';
export interface QuickReplyModalProps {}
export interface QuickReplyModalProps {
fetchPost?: any;
}
const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
const QuickReplyModal = ({ fetchPost }: QuickReplyModalProps, ref) => {
const intl = useIntl();
const dispatch = useDispatch();
const currentAccount = useSelector((state) => state.account.currentAccount);
@ -29,24 +31,11 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
const [selectedPost, setSelectedPost] = useState(null);
const [commentValue, setCommentValue] = useState('');
const [isSending, setIsSending] = useState(false);
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
const sheetModalRef = useRef<ActionSheet>();
const inputRef = useRef<TextInput>(null);
// keyboard listener hook for checking if keyboard is active/inactove
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
setKeyboardVisible(true); // or some other action
});
const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
setKeyboardVisible(false); // or some other action
});
return () => {
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}, []);
const headerText =
selectedPost && (selectedPost.summary || postBodySummary(selectedPost, 150, Platform.OS));
// reset the state when post changes
useEffect(() => {
@ -70,7 +59,6 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
// handle close press
const _handleClosePress = () => {
sheetModalRef.current?.setModalVisible(false);
setKeyboardVisible(false);
};
// navigate to post on summary press
const _handleOnSummaryPress = () => {
@ -140,17 +128,17 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
updateCommentCache(
`${parentAuthor}/${parentPermlink}`,
{
author:currentAccount.name,
author: currentAccount.name,
permlink,
parent_author:parentAuthor,
parent_permlink:parentPermlink,
parent_author: parentAuthor,
parent_permlink: parentPermlink,
markdownBody: commentValue,
},
{
parentTags: parentTags || ['ecency']
}
)
)
parentTags: parentTags || ['ecency'],
},
),
);
clearTimeout(stateTimer);
}, 3000);
@ -172,6 +160,21 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
}
};
const _handleExpandBtn = () => {
if (selectedPost) {
navigate({
routeName: ROUTES.SCREENS.EDITOR,
key: 'editor_replay',
params: {
isReply: true,
post: selectedPost,
quickReplyText: commentValue,
fetchPost,
},
});
sheetModalRef.current?.setModalVisible(false);
}
};
//VIEW_RENDERERS
const _renderSheetHeader = () => (
@ -187,12 +190,12 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
</View>
);
const _renderSummary = () => (
<TouchableOpacity onPress={() => _handleOnSummaryPress()}>
<SummaryArea style={styles.summaryStyle} summary={selectedPost.summary} />
<SummaryArea style={styles.summaryStyle} summary={headerText} />
</TouchableOpacity>
);
const _renderAvatar = () => (
<View style={styles.avatarAndNameContainer}>
<UserAvatar noAction username={currentAccount.username} />
@ -202,6 +205,37 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
</View>
);
const _renderExpandBtn = () => (
<View style={styles.expandBtnContainer}>
<IconButton
iconStyle={styles.backIcon}
iconType="MaterialCommunityIcons"
name="arrow-expand"
onPress={_handleExpandBtn}
size={28}
color={EStyleSheet.value('$primaryBlack')}
/>
</View>
);
const _renderReplyBtn = () => (
<View style={styles.replyBtnContainer}>
<TextButton
style={styles.cancelButton}
onPress={_handleClosePress}
text={intl.formatMessage({
id: 'quick_reply.close',
})}
/>
<MainButton
style={styles.commentBtn}
onPress={() => _submitReply()}
text={intl.formatMessage({
id: 'quick_reply.reply',
})}
isLoading={isSending}
/>
</View>
);
const _renderContent = () => {
return (
<View style={styles.modalContainer}>
@ -225,21 +259,8 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
/>
</View>
<View style={styles.footer}>
<TextButton
style={styles.cancelButton}
onPress={_handleClosePress}
text={intl.formatMessage({
id: 'quick_reply.close',
})}
/>
<MainButton
style={styles.commentBtn}
onPress={() => _submitReply()}
text={intl.formatMessage({
id: 'quick_reply.reply',
})}
isLoading={isSending}
/>
{_renderExpandBtn()}
{_renderReplyBtn()}
</View>
</View>
);

7
src/screens/editor/container/editorContainer.tsx
View File

@ -68,6 +68,7 @@ class EditorContainer extends Component {
isEdit: false,
isPostSending: false,
isReply: false,
quickReplyText: '',
isUploading: false,
post: null,
uploadedImage: null,
@ -87,6 +88,7 @@ class EditorContainer extends Component {
const { currentAccount, navigation } = this.props;
const username = currentAccount && currentAccount.name ? currentAccount.name : '';
let isReply;
let quickReplyText;
let isEdit;
let post;
let _draft;
@ -129,9 +131,10 @@ class EditorContainer extends Component {
}
if (navigationParams.isReply) {
({ isReply } = navigationParams);
({ isReply, quickReplyText } = navigationParams);
this.setState({
isReply,
quickReplyText
});
}
@ -1160,6 +1163,7 @@ class EditorContainer extends Component {
isOpenCamera,
isPostSending,
isReply,
quickReplyText,
isUploading,
post,
uploadedImage,
@ -1191,6 +1195,7 @@ class EditorContainer extends Component {
isOpenCamera={isOpenCamera}
isPostSending={isPostSending}
isReply={isReply}
quickReplyText={quickReplyText}
isUploading={isUploading}
post={post}
saveCurrentDraft={this._saveCurrentDraft}

5
src/screens/editor/screen/editorScreen.tsx
View File

@ -367,6 +367,7 @@ class EditorScreen extends Component {
isLoggedIn,
isPostSending,
isReply,
quickReplyText,
isUploading,
post,
uploadedImage,
@ -404,6 +405,8 @@ class EditorScreen extends Component {
</Modal>
);
};
console.log('fields :', fields);
console.log('quickReplyText : ', quickReplyText);
return (
<View style={globalStyles.defaultContainer}>
@ -447,7 +450,7 @@ class EditorScreen extends Component {
)}
<MarkdownEditor
componentID="body"
draftBody={fields && fields.body}
draftBody={quickReplyText ? quickReplyText : fields && fields.body}
handleOnTextChange={this._setWordsCount}
handleFormUpdate={this._handleFormUpdate}
handleIsFormValid={this._handleIsFormValid}