integrated thumb selection with editor settings

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}
       />

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",

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<string[]>([]);
@@ -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 (
         <TouchableOpacity onPress={_onPress} >
             <FastImage 
                 source={{uri:item}}
-                style={styles.thumbStyle}
+                style={{...styles.thumbStyle, ...selectedStyle}}
                 resizeMode='cover'
             />
         </TouchableOpacity>

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',

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

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}
         />
         <PostForm
           handleFormUpdate={this._handleFormUpdate}
-          handleOnSubmit={this._handlePreSubmit}
+          handleOnSubmit={this._handleOnSubmit}
           isFormValid={isFormValid}
           isPreviewActive={isPreviewActive}
         >
@@ -428,6 +433,7 @@ class EditorScreen extends Component {
         {_renderCommunityModal()}
         <ThumbSelectionModal
           ref={(componentRef) => (this.thumbSelectionModalRef = componentRef)}
+          thumbIndex={thumbIndex}
           onThumbSelection={this._handleOnThumbSelection}
         />
       </View>