diff --git a/src/components/basicHeader/view/basicHeaderView.js b/src/components/basicHeader/view/basicHeaderView.js index b3877c1cb..d17742079 100644 --- a/src/components/basicHeader/view/basicHeaderView.js +++ b/src/components/basicHeader/view/basicHeaderView.js @@ -49,6 +49,7 @@ const BasicHeaderView = ({ handleRewardChange, handleBeneficiaries, enableViewModeToggle, + showThumbSelectionModal, }) => { const [isInputVisible, setIsInputVisible] = useState(false); const [beneficiaryModal, setBeneficiaryModal] = useState(false); @@ -93,9 +94,14 @@ const BasicHeaderView = ({ setShowScheduleModal(true); break; case 1: - rewardMenuRef.current.show(); + if (showThumbSelectionModal) { + showThumbSelectionModal(); + } break; case 2: + rewardMenuRef.current.show(); + break; + case 3: setBeneficiaryModal(true); break; @@ -323,11 +329,12 @@ const BasicHeaderView = ({ ref={settingMenuRef} options={[ intl.formatMessage({ id: 'editor.setting_schedule' }), + intl.formatMessage({ id: 'editor.setting_thumb' }), intl.formatMessage({ id: 'editor.setting_reward' }), intl.formatMessage({ id: 'editor.setting_beneficiary' }), intl.formatMessage({ id: 'alert.cancel' }), ]} - cancelButtonIndex={3} + cancelButtonIndex={4} title={intl.formatMessage({ id: 'editor.options' })} onPress={_handleSettingMenuSelect} /> diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 76aec437f..e595914e1 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -299,6 +299,7 @@ "setting_schedule": "Scheduling Time", "setting_reward": "Reward", "setting_beneficiary": "Beneficiary", + "setting_thumb": "Set Thumbnail", "reward_default": "Default 50% / 50%", "reward_power_up": "Power Up 100%", "reward_decline": "Decline Payout", @@ -321,7 +322,8 @@ "alert_btn_no":"No", "draft_save_success":"Draft Saved", "draft_save_fail":"Failed to save draft", - "select_thumb":"Select Post Thumbnail" + "select_thumb":"Select Post Thumbnail", + "two_thumbs_required":"Add more images in your post before setting thumbnail" }, "snippets":{ "label_no_snippets":"No Snippets Found", diff --git a/src/screens/editor/children/thumbSelectionModal.tsx b/src/screens/editor/children/thumbSelectionModal.tsx index b17af9f28..6b42e1a81 100644 --- a/src/screens/editor/children/thumbSelectionModal.tsx +++ b/src/screens/editor/children/thumbSelectionModal.tsx @@ -6,15 +6,16 @@ import styles from './thumbSelectionModalStyles'; import { extractImageUrls } from '../../../utils/editor'; import FastImage from 'react-native-fast-image'; import { forwardRef } from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, Alert } from 'react-native'; import { useIntl } from 'react-intl'; export interface ThumbSelectionModalProps { - onThumbSelection:(index:number)=>void, + thumbIndex:number; + onThumbSelection:(index:number)=>void; } -const ThumbSelectionModal = ({ onThumbSelection }:ThumbSelectionModalProps, ref) => { +const ThumbSelectionModal = ({ onThumbSelection, thumbIndex }:ThumbSelectionModalProps, ref) => { const intl = useIntl(); const [imageUrls, setImageUrls] = useState([]); @@ -29,6 +30,9 @@ const ThumbSelectionModal = ({ onThumbSelection }:ThumbSelectionModalProps, ref) if(urls.length < 2){ console.log("Skipping modal show as post images are less than 2"); + Alert.alert( + intl.formatMessage({id:'editor.two_thumbs_required'}) + ) onThumbSelection(0); return; } @@ -52,11 +56,14 @@ const ThumbSelectionModal = ({ onThumbSelection }:ThumbSelectionModalProps, ref) _onSelection(index); } + const selectedStyle = index === thumbIndex ? styles.selectedStyle : null + + return ( diff --git a/src/screens/editor/children/thumbSelectionModalStyles.ts b/src/screens/editor/children/thumbSelectionModalStyles.ts index 0ac0daf9c..ec4624f22 100644 --- a/src/screens/editor/children/thumbSelectionModalStyles.ts +++ b/src/screens/editor/children/thumbSelectionModalStyles.ts @@ -18,6 +18,10 @@ export default EStyleSheet.create({ borderRadius:12, backgroundColor:'$primaryLightGray' }, + selectedStyle:{ + borderWidth:4, + borderColor:'$primaryBlack' + }, title:{ color: '$primaryBlack', fontWeight: 'bold', diff --git a/src/screens/editor/container/editorContainer.tsx b/src/screens/editor/container/editorContainer.tsx index a85ee4abd..80fd59561 100644 --- a/src/screens/editor/container/editorContainer.tsx +++ b/src/screens/editor/container/editorContainer.tsx @@ -71,6 +71,7 @@ class EditorContainer extends Component { beneficiaries: [], sharedSnippetText: null, onLoadDraftPress: false, + thumbIndex:0, }; } @@ -566,7 +567,7 @@ class EditorContainer extends Component { } }; - _submitPost = async ({fields, scheduleDate, thumbIndex}:{fields:any, scheduleDate?:string, thumbIndex?:number}) => { + _submitPost = async ({fields, scheduleDate}:{fields:any, scheduleDate?:string}) => { const { currentAccount, dispatch, @@ -575,7 +576,7 @@ class EditorContainer extends Component { pinCode, // isDefaultFooter, } = this.props; - const { rewardType, beneficiaries, isPostSending } = this.state; + const { rewardType, beneficiaries, isPostSending, thumbIndex } = this.state; if (isPostSending) { return; @@ -893,7 +894,7 @@ class EditorContainer extends Component { text: intl.formatMessage({ id: 'editor.alert_btn_yes', }), - onPress: () => this._submitPost({fields:form.fields, thumbIndex:form.thumbIndex}), + onPress: () => this._submitPost({fields:form.fields}), }, ], { cancelable: false }, @@ -1041,6 +1042,12 @@ class EditorContainer extends Component { await AsyncStorage.setItem('temp-beneficiaries', JSON.stringify(value)); }; + _handleSetThumbIndex = (index:number) => { + this.setState({ + thumbIndex:index + }) + } + render() { const { isLoggedIn, isDarkTheme, navigation, currentAccount } = this.props; const { @@ -1059,6 +1066,7 @@ class EditorContainer extends Component { isDraft, sharedSnippetText, onLoadDraftPress, + thumbIndex } = this.state; const tags = navigation.state.params && navigation.state.params.tags; @@ -1094,6 +1102,8 @@ class EditorContainer extends Component { isDraft={isDraft} sharedSnippetText={sharedSnippetText} onLoadDraftPress={onLoadDraftPress} + thumbIndex={thumbIndex} + setThumbIndex={this._handleSetThumbIndex} /> ); } diff --git a/src/screens/editor/screen/editorScreen.js b/src/screens/editor/screen/editorScreen.js index 93fd9e123..c40b8f91a 100644 --- a/src/screens/editor/screen/editorScreen.js +++ b/src/screens/editor/screen/editorScreen.js @@ -163,24 +163,27 @@ class EditorScreen extends Component { }, 300); }; - _handlePreSubmit = () => { - const { fields } = this.state; - if (this.thumbSelectionModalRef) { - this.thumbSelectionModalRef.show(fields.body); - } - }; - - _handleOnSubmit = (thumbIndex) => { + _handleOnSubmit = () => { const { handleOnSubmit } = this.props; const { fields } = this.state; if (handleOnSubmit) { - handleOnSubmit({ fields, thumbIndex }); + handleOnSubmit({ fields }); } }; _handleOnThumbSelection = (index) => { - this._handleOnSubmit(index); + const { setThumbIndex } = this.props; + if (setThumbIndex) { + setThumbIndex(index); + } + }; + + _showThumbSelectionModal = () => { + const { fields } = this.state; + if (this.thumbSelectionModalRef) { + this.thumbSelectionModalRef.show(fields.body); + } }; _handleIsFormValid = (bodyText) => { @@ -336,6 +339,7 @@ class EditorScreen extends Component { autoFocusText, sharedSnippetText, onLoadDraftPress, + thumbIndex, } = this.props; const rightButtonText = intl.formatMessage({ id: isEdit ? 'basic_header.update' : isReply ? 'basic_header.reply' : 'basic_header.publish', @@ -369,7 +373,7 @@ class EditorScreen extends Component { handleOnBackPress={handleOnBackPress} handleOnPressPreviewButton={this._handleOnPressPreviewButton} handleOnSaveButtonPress={this._handleOnSaveButtonPress} - handleOnSubmit={this._handlePreSubmit} + handleOnSubmit={this._handleOnSubmit} isDraftSaved={isDraftSaved} isDraftSaving={isDraftSaving} isDraft={isDraft} @@ -382,10 +386,11 @@ class EditorScreen extends Component { isReply={isReply} quickTitle={wordsCount > 0 && `${wordsCount} words`} rightButtonText={rightButtonText} + showThumbSelectionModal={this._showThumbSelectionModal} /> @@ -428,6 +433,7 @@ class EditorScreen extends Component { {_renderCommunityModal()} (this.thumbSelectionModalRef = componentRef)} + thumbIndex={thumbIndex} onThumbSelection={this._handleOnThumbSelection} />