muba-posting 4.1.15 → 4.1.18

package/Posting.js

@@ -363,7 +363,11 @@ export default class Posting extends React.Component {
   }
 
   async _saveEditAd() {
-    const response = await this.props.request(this, UPDATE_AD, { ...this.state.postingAd, id: { adId: this.state.postingAd.id } });
+    const ad = { ...this.state.postingAd, id: { adId: this.state.postingAd.id } };
+    if (this.state.originView === Views.EDIT_SELECTOR && Views.PUBLISH_4 !== this.state.view) {
+      delete ad.images;
+    }
+    const response = await this.props.request(this, UPDATE_AD, ad);
     if (this.props.adId) {
       if (this.state.originView === Views.EDIT_SELECTOR) {
         this.setState({ isLoading: true });

package/Publish4.js

@@ -14,6 +14,7 @@ export default class Publish4 extends React.Component {
     super(props);
 
     this.state = {
+      images: this.props.postingAd.images,
       popupSelectPhotoVisible: false,
       showErrorNoSelectedImages: false,
       allPhotosSelected: false,
@@ -31,12 +32,16 @@ export default class Publish4 extends React.Component {
       });
     }
 
-    if (prevProps.maxPictures !== this.props.maxPictures || prevProps.postingAd.images.length !== this.props.postingAd.images.length) {
+    if (prevProps.maxPictures !== this.props.maxPictures || this.state.images.length !== this.props.postingAd.images.length) {
       if (this.props.postingAd.images.length == this.props.maxPictures) {
         this.setState({ allPhotosSelected: true });
       }
     }
 
+    if (!prevProps.showView && this.props.showView && !this.isSameList(this.props.postingAd.images, this.state.images)) {
+      this.setState({ images: this.props.postingAd.images })
+    }
+
     const componentsHeight = this.props.headerHeight + this.props.progressBarHeight;
     const minHeight = window.height - componentsHeight;
     if (this.state.minHeight != minHeight) {
@@ -44,53 +49,75 @@ export default class Publish4 extends React.Component {
     }
   }
 
+  /*shouldComponentUpdate(nextProps, nextState) {
+    return !this.isSameList(this.state.images, nextState.images) || (!this.props.showView && nextProps.showView && !this.state.viewLoaded);
+  } */
+
+  isSameList = (firstList, secondList) => {
+    if (firstList.length != secondList.length) {
+      return false;
+    }
+    for (let index = 0; index < firstList.length; ++index) {
+      if (firstList[index].id != secondList[index].id || firstList[index].uri != secondList[index].uri) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   async loadImage(imgUri) {
     if (imgUri) {
       let fileType = imgUri.substring(imgUri.lastIndexOf('.') + 1).toLowerCase();
 
       const image = {
         uri: imgUri,
-        name: 'photo_' + this.props.postingAd.images.length + '.' + fileType,
+        name: 'photo_' + this.state.images.length + '.' + fileType,
         type: 'image/' + fileType,
-        mainPicture: this.props.postingAd.images.length === 0,
+        mainPicture: this.state.images.length === 0,
         referenceType: 'AD',
         referenceId: this.props.postingAd.id,
-        extraInfo: this.props.postingAd.images.length
+        extraInfo: this.state.images.length
       }
 
-      let imagesArray = this.props.postingAd.images;
+      let imagesArray = this.state.images;
       imagesArray.push(image);
-      this.props.postingAd.images = imagesArray;
 
-      this.setState({ showErrorNoSelectedImages: false });
+      await this.setState({
+        showErrorNoSelectedImages: false,
+        images: imagesArray
+      });
 
-      if (this.props.postingAd.images.length == this.props.maxPictures) {
+      if (this.state.images.length == this.props.maxPictures) {
         this.setState({ allPhotosSelected: true });
-      } else if (this.props.postingAd.images.length == 1) {
-        this.selectMainPhoto(this.props.postingAd.images[0]);
+      } else if (this.state.images.length == 1) {
+        this.selectMainPhoto(this.state.images[0]);
       }
     }
   }
 
-  async deleteImage(itemDeleted) {
-    if (itemDeleted.id) {
+  async deleteImage(itemId, index) {
+    if (itemId) {
       if (!this.props.postingAd.deletedFiles) {
         this.props.postingAd.deletedFiles = [];
       }
-      this.props.postingAd.deletedFiles.push(itemDeleted.id);
+      this.props.postingAd.deletedFiles.push(itemId);
     }
 
-    let filteredArray = this.props.postingAd.images.filter(item => item !== itemDeleted);
+    let imagesArray = [...this.state.images];
+    imagesArray.splice(index, 1)
+
+    await this.setState({
+      allPhotosSelected: false,
+      images: imagesArray
+    });
 
-    this.props.postingAd.images = filteredArray;
-    await this.setState({ allPhotosSelected: false });
-    if (this.props.postingAd.images.length >= 1) {
-      this.selectMainPhoto(this.props.postingAd.images[0]);
+    if (this.state.images.length >= 1) {
+      this.selectMainPhoto(this.state.images[0]);
     }
   }
 
   selectMainPhoto(itemSelected) {
-    let imagesArray = this.props.postingAd.images.slice();
+    let imagesArray = this.state.images.slice();
 
     for (let imageObject of imagesArray) {
       imageObject.mainPicture = false;
@@ -108,14 +135,17 @@ export default class Publish4 extends React.Component {
       ++index;
     }
 
-    this.props.postingAd.images = imagesArray;
-    this.setState({ updateMainPhoto: true });
+    this.setState({
+      updateMainPhoto: true,
+      images: imagesArray
+    });
   }
 
   nextStep() {
-    if (this.props.postingAd.images.length == 0) {
+    if (this.state.images.length == 0) {
       this.setState({ showErrorNoSelectedImages: true });
     } else {
+      this.props.postingAd.images = this.state.images;
       this.setState({ showErrorNoSelectedImages: false });
       if (this.props.postingAd.id == null || this.props.fullPosting) {
         if (this.props.postingAd.subCategoryDetails.filter(function (detail) { return detail.value == "floorType" }).length > 0) {
@@ -129,6 +159,21 @@ export default class Publish4 extends React.Component {
     }
   }
 
+  rerenderImage(index) {
+    const images = this.state.images;
+    if (images[index].uri.indexOf('?t=') < 0) {
+      images[index].uri = images[index].uri + '?t=' + Date.now();
+    } else {
+      images[index].uri = images[index].uri.substring(0, images[index].uri.indexOf('?t=')) + '?t=' + Date.now();
+    }
+
+    setTimeout(() => {
+      this.setState({
+        images: images
+      });
+    }, 500);
+  }
+
   render() {
     return (
       <View style={this.props.showView ? '' : commonStyles.displayNone}>
@@ -167,12 +212,13 @@ export default class Publish4 extends React.Component {
                         </TouchableOpacity>
                       </TouchableOpacity>
                     }
-                    {this.props.postingAd.images.map((item, index) => {
+                    {this.state.images.map((item, index) => {
                       return (
-                        <ImageBackground style={[commonStyles.photoBox, commonStyles.photoBoxImage]} source={{ uri: item.uri }} borderRadius={10} key={index}>
+                        <ImageBackground style={[commonStyles.photoBox, commonStyles.photoBoxImage]} source={{ uri: item.uri }} borderRadius={10} key={index}
+                          onError={() => this.rerenderImage(index)}>
                           <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='stretch' borderRadius={1.5}>
 
-                            <TouchableHighlight style={commonStyles.leftIcon} onPress={() => this.deleteImage(item)}>
+                            <TouchableHighlight style={commonStyles.leftIcon} onPress={() => this.deleteImage(item.id, index)}>
                               <FontAwesomeIcon style={commonStyles.whiteIcon} name="cancel-circled" />
                             </TouchableHighlight>
                             <TouchableHighlight style={commonStyles.rightIcon} onPress={() => this.selectMainPhoto(item)}>

package/Publish5.js

@@ -4,7 +4,6 @@ import { strings } from 'muba-i18n';
 import commonStyles from './commonStyles';
 import InputSelect from 'muba-input-select';
 import { Views } from './utils/Views';
-import { Orientation } from 'expo-screen-orientation';
 const window = Dimensions.get('window');
 
 export default class Publish5 extends React.Component {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muba-posting",
-  "version": "4.1.15",
+  "version": "4.1.18",
   "description": "Posting",
   "main": "Posting.js",
   "scripts": {