Merge pull request #2482 from ecency/nt/thumb-selection-fix

Nt/thumb selection fix

src/screens/editor/children/postOptionsModal.tsx

@@ -33,13 +33,13 @@ export interface PostOptionsModalRef {
 interface PostOptionsModalProps {
   body:string;
   draftId:string;
-  thumbIndex:number,
+  thumbUrl:string,
   isEdit:boolean;
   isCommunityPost:boolean;
   rewardType: string;
   isUploading: boolean;
   handleRewardChange:(rewardType:string)=>void;
-  handleThumbSelection:(index:number)=>void;
+  handleThumbSelection:(url:string)=>void;
   handleScheduleChange:(datetime:string|null)=>void;
   handleShouldReblogChange:(shouldReblog:boolean)=>void;
   handleFormUpdate:()=>void;
@@ -48,7 +48,7 @@ interface PostOptionsModalProps {
 const PostOptionsModal =  forwardRef(({
   body,
   draftId,
-  thumbIndex,
+  thumbUrl,
   isEdit,
   isCommunityPost,
   rewardType,
@@ -121,8 +121,8 @@ const PostOptionsModal =  forwardRef(({
     }
  
     // handle index change here instead of useeffetc
-    const _handleThumbIndexSelection = (index:number) => {
-      handleThumbSelection(index)
+    const _handleThumbIndexSelection = (url:string) => {
+      handleThumbSelection(url)
     }
 
     const _renderContent = () => (
@@ -190,7 +190,7 @@ const PostOptionsModal =  forwardRef(({
   
             <ThumbSelectionContent 
               body={body}
-              thumbIndex={thumbIndex}
+              thumbUrl={thumbUrl}
               isUploading={isUploading}
               onThumbSelection={_handleThumbIndexSelection}
             />

src/screens/editor/children/styles.ts

@@ -1,4 +1,3 @@
-import { ViewStyle } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
 
@@ -20,9 +19,12 @@ export default EStyleSheet.create({
       borderRadius:12,
       backgroundColor:'$primaryLightGray'
     },
-    selectedStyle:{
-      borderWidth:4,
-      borderColor:'$primaryBlack'
+    checkContainer:{ 
+      position: 'absolute', 
+      top: 12, 
+      left: 6, 
+      backgroundColor: '$pureWhite', 
+      borderRadius: 12 
     },
     settingLabel:{
       color: '$primaryDarkGray',

src/screens/editor/children/thumbSelectionContent.tsx

@@ -1,61 +1,91 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Alert, Text, TouchableOpacity, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { FlatList } from 'react-native-gesture-handler';
 import { extractImageUrls } from '../../../utils/editor';
 import styles from './styles';
 import ESStyleSheet from 'react-native-extended-stylesheet';
+import { Icon } from '../../../components';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { View as AnimatedView } from 'react-native-animatable';
 
 interface ThumbSelectionContentProps {
     body: string;
-    thumbIndex: number;
+    thumbUrl: string;
     isUploading: boolean;
-    onThumbSelection: (index: number) => void;
+    onThumbSelection: (url: string) => void;
 }
 
-const ThumbSelectionContent = ({ body, thumbIndex, onThumbSelection, isUploading }: ThumbSelectionContentProps) => {
+const ThumbSelectionContent = ({ body, thumbUrl, onThumbSelection, isUploading }: ThumbSelectionContentProps) => {
     const intl = useIntl();
 
     const [imageUrls, setImageUrls] = useState<string[]>([]);
     const [needMore, setNeedMore] = useState(true);
+    const [thumbIndex, setThumbIndex] = useState(0);
+
 
     useEffect(() => {
         const urls = extractImageUrls({ body });
 
         if (urls.length < 2) {
             setNeedMore(true);
-            onThumbSelection(0);
+            onThumbSelection(urls[0] || '');
+            setThumbIndex(0);
             setImageUrls([])
         } else {
             setNeedMore(false);
             setImageUrls(urls)
         }
+
+        const _urlIndex = urls.indexOf(thumbUrl)
+        if (_urlIndex < 0) {
+            onThumbSelection(urls[0] || '');
+            setThumbIndex(0);
+        } else {
+            setThumbIndex(_urlIndex)
+        }
+
     }, [body])
 
 
     //VIEW_RENDERERS
     const _renderImageItem = ({ item, index }: { item: string, index: number }) => {
         const _onPress = () => {
-            onThumbSelection(index);
+            onThumbSelection(item);
+            setThumbIndex(index);
         }
 
-        const selectedStyle = index === thumbIndex ? styles.selectedStyle : null
+        const isSelected = item === thumbUrl && index === thumbIndex;
 
         return (
             <TouchableOpacity onPress={() => _onPress()} >
                 <FastImage
                     source={{ uri: item }}
-                    style={{ ...styles.thumbStyle, ...selectedStyle }}
+                    style={styles.thumbStyle}
                     resizeMode='cover'
                 />
+                {isSelected && (
+
+                    <AnimatedView duration={300} animation='zoomIn' style={styles.checkContainer}>
+                        <Icon
+                            color={EStyleSheet.value('$primaryBlue')}
+                            iconType="MaterialCommunityIcons"
+                            name={'checkbox-marked-circle'}
+                            size={20}
+                        />
+                    </AnimatedView>
+                )}
+
+
+
             </TouchableOpacity>
         )
     }
 
     const _renderHeader = () => (
-        isUploading && 
-        <View style={{flex:1, justifyContent:'center', marginRight: 16}}>
+        isUploading &&
+        <View style={{ flex: 1, justifyContent: 'center', marginRight: 16 }}>
             <ActivityIndicator color={ESStyleSheet.value('$primaryBlack')} />
         </View>
 

src/screens/editor/children/thumbSelectionModal.tsx

@@ -11,12 +11,12 @@ import { useIntl } from 'react-intl';
 
 
 export interface ThumbSelectionModalProps {
-  thumbIndex:number;
+  thumbUrl:string;
   onThumbSelection:(index:number)=>void;
 }
 
 
-const ThumbSelectionModal = ({ onThumbSelection, thumbIndex }:ThumbSelectionModalProps, ref) => {
+const ThumbSelectionModal = ({ onThumbSelection, thumbUrl }:ThumbSelectionModalProps, ref) => {
   const intl = useIntl();
 
   const [imageUrls, setImageUrls] = useState<string[]>([]);
@@ -57,7 +57,7 @@ const ThumbSelectionModal = ({ onThumbSelection, thumbIndex }:ThumbSelectionModa
           _onSelection(index);
       }
 
-      const selectedStyle = index === thumbIndex ? styles.selectedStyle : null
+      const selectedStyle = item === thumbUrl ? styles.selectedStyle : null
 
     return (
         <TouchableOpacity onPress={() => _onPress()} >

src/screens/editor/container/editorContainer.tsx

@@ -77,7 +77,7 @@ class EditorContainer extends Component<any, any> {
       rewardType: 'default',
       sharedSnippetText: null,
       onLoadDraftPress: false,
-      thumbIndex: 0,
+      thumbUrl: '',
       shouldReblog: false,
     };
   }
@@ -262,9 +262,8 @@ class EditorContainer extends Component<any, any> {
     const body = draft.body;
     if (draft.meta && draft.meta.image) {
       const urls = extractImageUrls({ body });
-      const draftThumbIndex = urls.indexOf(draft.meta.image[0]);
       this.setState({
-        thumbIndex: draftThumbIndex,
+        thumbUrl: draft.meta.image[0],
       });
     }
 
@@ -384,7 +383,7 @@ class EditorContainer extends Component<any, any> {
   };
 
   _saveDraftToDB = async (fields, saveAsNew = false) => {
-    const { isDraftSaved, draftId, thumbIndex, isReply, rewardType } = this.state;
+    const { isDraftSaved, draftId, thumbUrl, isReply, rewardType } = this.state;
     const { currentAccount, dispatch, intl, queryClient } = this.props;
 
     try {
@@ -418,7 +417,7 @@ class EditorContainer extends Component<any, any> {
           };
         }
 
-        const meta = Object.assign({}, extractMetadata(draftField.body, thumbIndex), {
+        const meta = Object.assign({}, extractMetadata(draftField.body, thumbUrl), {
           tags: draftField.tags,
           beneficiaries,
           rewardType,
@@ -544,7 +543,7 @@ class EditorContainer extends Component<any, any> {
       pinCode,
       // isDefaultFooter,
     } = this.props;
-    const { rewardType, isPostSending, thumbIndex, draftId, shouldReblog } = this.state;
+    const { rewardType, isPostSending, thumbUrl, draftId, shouldReblog } = this.state;
 
     const beneficiaries = this._extractBeneficiaries();
 
@@ -557,7 +556,7 @@ class EditorContainer extends Component<any, any> {
         isPostSending: true,
       });
 
-      const meta = extractMetadata(fields.body, thumbIndex);
+      const meta = extractMetadata(fields.body, thumbUrl);
       const _tags = fields.tags.filter((tag) => tag && tag !== ' ');
 
       const jsonMeta = makeJsonMetadata(meta, _tags);
@@ -718,7 +717,7 @@ class EditorContainer extends Component<any, any> {
 
   _submitEdit = async (fields) => {
     const { currentAccount, pinCode, dispatch } = this.props;
-    const { post, isEdit, isPostSending, thumbIndex, isReply } = this.state;
+    const { post, isEdit, isPostSending, thumbUrl, isReply } = this.state;
 
     if (isPostSending) {
       return;
@@ -744,7 +743,7 @@ class EditorContainer extends Component<any, any> {
         newBody = patch;
       }
 
-      const meta = extractMetadata(fields.body, thumbIndex);
+      const meta = extractMetadata(fields.body, thumbUrl);
 
       let jsonMeta = {};
 
@@ -1034,9 +1033,9 @@ class EditorContainer extends Component<any, any> {
     });
   };
 
-  _handleSetThumbIndex = (index: number) => {
+  _handleSetThumbUrl = (url: string) => {
     this.setState({
-      thumbIndex: index,
+      thumbUrl: url,
     });
   };
 
@@ -1065,7 +1064,7 @@ class EditorContainer extends Component<any, any> {
       community,
       sharedSnippetText,
       onLoadDraftPress,
-      thumbIndex,
+      thumbUrl,
       uploadProgress,
       rewardType,
     } = this.state;
@@ -1105,8 +1104,8 @@ class EditorContainer extends Component<any, any> {
         draftId={draftId}
         sharedSnippetText={sharedSnippetText}
         onLoadDraftPress={onLoadDraftPress}
-        thumbIndex={thumbIndex}
-        setThumbIndex={this._handleSetThumbIndex}
+        thumbUrl={thumbUrl}
+        setThumbUrl={this._handleSetThumbUrl}
         uploadProgress={uploadProgress}
         rewardType={rewardType}
         getBeneficiaries={this._extractBeneficiaries}

src/screens/editor/screen/editorScreen.tsx

@@ -192,10 +192,10 @@ class EditorScreen extends Component {
     }
   };
 
-  _handleOnThumbSelection = (index) => {
-    const { setThumbIndex } = this.props;
-    if (setThumbIndex) {
-      setThumbIndex(index);
+  _handleOnThumbSelection = (url:string) => {
+    const { setThumbUrl } = this.props;
+    if (setThumbUrl) {
+      setThumbUrl(url);
     }
   };
 
@@ -236,7 +236,7 @@ class EditorScreen extends Component {
   };
 
   _handleFormUpdate = (componentID, content) => {
-    const { handleFormChanged, thumbIndex, rewardType, getBeneficiaries } = this.props;
+    const { handleFormChanged, thumbUrl, rewardType, getBeneficiaries } = this.props;
     const { fields: _fields } = this.state;
     const fields = { ..._fields };
 
@@ -248,7 +248,7 @@ class EditorScreen extends Component {
       fields.tags = content;
     }
 
-    const meta = Object.assign({}, extractMetadata(fields.body, thumbIndex), {
+    const meta = Object.assign({}, extractMetadata(fields.body, thumbUrl), {
       tags: fields.tags,
       beneficiaries: getBeneficiaries(),
       rewardType,
@@ -381,7 +381,7 @@ class EditorScreen extends Component {
       autoFocusText,
       sharedSnippetText,
       onLoadDraftPress,
-      thumbIndex,
+      thumbUrl,
       uploadProgress,
       rewardType,
       setIsUploading,
@@ -484,7 +484,7 @@ class EditorScreen extends Component {
           ref={(componentRef) => (this.postOptionsModalRef = componentRef)}
           body={fields.body}
           draftId={draftId}
-          thumbIndex={thumbIndex}
+          thumbUrl={thumbUrl}
           isEdit={isEdit}
           isCommunityPost={selectedCommunity !== null}
           rewardType={rewardType}

src/utils/editor.ts

@@ -1,7 +1,6 @@
 import getSlug from 'speakingurl';
 import { diff_match_patch as diffMatchPatch } from 'diff-match-patch';
 import VersionNumber from 'react-native-version-number';
-import { PanGestureHandler } from 'react-native-gesture-handler';
 import MimeTypes from 'mime-types';
 
 export const getWordsCount = (text) =>
@@ -214,7 +213,7 @@ export const extractFilenameFromPath = ({path, mimeType}:{path:string, mimeType?
   }
 }
 
-export const extractMetadata = (body:string, thumbIndex?:number) => {
+export const extractMetadata = (body:string, thumbUrl?:string) => {
   const userReg = /(^|\s)(@[a-z][-.a-z\d]+[a-z\d])/gim;
 
   const out = {};
@@ -239,8 +238,8 @@ export const extractMetadata = (body:string, thumbIndex?:number) => {
   }
 
   if (matchedImages.length) {
-    if(thumbIndex){
-      matchedImages.splice(0, 0, matchedImages.splice(thumbIndex, 1)[0]);
+    if(thumbUrl){
+      matchedImages.sort((item)=>item === thumbUrl ? -1 : 1);
     }
     
     out.image = matchedImages;