muba-posting 5.0.5 → 5.0.7

package/Posting.js

@@ -36,6 +36,7 @@ const MAX_PICTURES = { method: 'GET', url: '/controller/posting/max-pictures' };
 const COUNTRY_PHONE = { method: 'GET', url: '/controller/countries/{countryCode}/phones' };
 const LOAD_PENDING_CREATED = { method: 'GET', url: '/controller/ads/pending-created/posting' };
 const PAYMENT_ONLINE_ACTIVE = { method: 'GET', url: '/controller/payments-online/{countryCode}/active' };
+const UPLOADED_FILES_KEY = 'uploadedFiles';
 
 export default class Posting extends React.Component {
   constructor(props) {
@@ -307,8 +308,12 @@ export default class Posting extends React.Component {
       }
       const response = await this.props.request(this, CREATE_AD, ad);
       if (response.httpStatus === 200) {
+        let images = this.state.postingAd.images;
+        if (response[UPLOADED_FILES_KEY]) {
+          images = response[UPLOADED_FILES_KEY];
+        }
         await this.setState({
-          postingAd: { ...this.state.postingAd, id: response.id }
+          postingAd: { ...this.state.postingAd, images: images, id: response.id }
         })
       }
     }

package/Publish4.js

@@ -61,18 +61,20 @@ export default class Publish4 extends React.Component {
     return true;
   }
 
-  async loadUri(imgUri) {
-    if (imgUri) {
-      let fileType = imgUri.substring(imgUri.lastIndexOf('.') + 1).toLowerCase();
+  async loadUri(photo) {
+    if (photo) {
+      let fileType = photo.uri.substring(photo.uri.lastIndexOf('.') + 1).toLowerCase();
 
       const image = {
-        uri: imgUri,
+        uri: photo.uri,
         name: 'photo_' + this.state.images.length + '.' + fileType,
         type: 'image/' + fileType,
         mainPicture: this.state.images.length === 0,
         referenceType: 'AD',
         referenceId: this.props.postingAd.id,
-        extraInfo: this.state.images.length
+        extraInfo: this.state.images.length,
+        width: photo.width,
+        height: photo.height
       }
 
       this.loadImage(image);
@@ -97,6 +99,10 @@ export default class Publish4 extends React.Component {
     });
   }
 
+  async imageExists(imageUrl) {
+    return fetch(imageUrl).then(response => response.status === 200);
+  }
+
   async deleteImage(itemId, index) {
     if (itemId) {
       if (!this.props.postingAd.deletedFiles) {
@@ -106,11 +112,14 @@ export default class Publish4 extends React.Component {
     }
 
     let imagesArray = [...this.state.images];
+    let imageSize = [...this.state.imageSize];
     imagesArray.splice(index, 1)
+    imageSize.splice(index, 1)
 
     await this.setState({
       allPhotosSelected: false,
-      images: imagesArray
+      images: imagesArray,
+      imageSize: imageSize
     });
 
     if (this.state.images.length >= 1) {
@@ -179,58 +188,74 @@ export default class Publish4 extends React.Component {
     }, 500);
   }
 
-  calculateImageSize = (image) => {
+  calculateImageSize = async (image) => {
+    if (image.width && image.height) {
+      this.setImageSize(image.width, image.height);
+    } else if (!image.uri.startsWith('https://') || await this.imageExists(image.uri)) {
+      Image.getSize(image.uri, (width, height) => {
+        this.setImageSize(width, height);
+      });
+    } else {
+      setTimeout(() => this.calculateImageSize(image), 500);
+    }
+  }
+
+  setImageSize(width, height) {
     let imageSize = this.state.imageSize;
-    Image.getSize(image.uri, (width, height) => {
-      if (this.state.containerWidth !== 0 && this.state.containerHeight !== 0) {
-        const containerRatio = this.state.containerWidth / this.state.containerHeight;
-        const imageRatio = width / height;
-
-        let finalWidth;
-        let finalHeight;
-        if (imageRatio > containerRatio) {
-          if (width > this.state.containerWidth) {
-            finalWidth = this.state.containerWidth;
-          } else {
-            finalWidth = width;
-          }
-          finalHeight = height * (finalWidth / width);
-        } else if (imageRatio < containerRatio) {
-          if (height > this.state.containerHeight) {
-            finalHeight = this.state.containerHeight;
-          } else {
-            finalHeight = height;
-          }
-          finalWidth = width * (finalHeight / height);
+    if (this.state.containerWidth !== 0 && this.state.containerHeight !== 0) {
+      const containerRatio = this.state.containerWidth / this.state.containerHeight;
+      const imageRatio = width / height;
+
+      let finalWidth;
+      let finalHeight;
+      if (imageRatio > containerRatio) {
+        if (width > this.state.containerWidth) {
+          finalWidth = this.state.containerWidth;
+        } else {
+          finalWidth = width;
+        }
+        finalHeight = height * (finalWidth / width);
+      } else if (imageRatio < containerRatio) {
+        if (height > this.state.containerHeight) {
+          finalHeight = this.state.containerHeight;
         } else {
-          if (width > this.state.containerWidth) {
-            finalWidth = this.state.containerWidth;
-            finalHeight = this.state.containerHeight;
-          } else {
-            finalWidth = width;
-            finalHeight = height;
-          }
+          finalHeight = height;
         }
-        imageSize.push({
-          width: finalWidth,
-          height: finalHeight,
-          marginVertical: (this.state.containerHeight - finalHeight) / 2,
-          marginHorizontal: (this.state.containerWidth - finalWidth) / 2
-        });
+        finalWidth = width * (finalHeight / height);
       } else {
-        imageSize.push({
-          width: '100%',
-          height: '100%',
-          marginVertical: 0,
-          marginHorizontal: 0
-        })
+        if (width > this.state.containerWidth) {
+          finalWidth = this.state.containerWidth;
+          finalHeight = this.state.containerHeight;
+        } else {
+          finalWidth = width;
+          finalHeight = height;
+        }
       }
-      this.setState({
-        imageSize: imageSize
+      imageSize.push({
+        width: finalWidth,
+        height: finalHeight,
+        marginVertical: (this.state.containerHeight - finalHeight) / 2,
+        marginHorizontal: (this.state.containerWidth - finalWidth) / 2
       });
+    } else {
+      imageSize.push({
+        width: '100%',
+        height: '100%',
+        marginVertical: 0,
+        marginHorizontal: 0
+      })
+    }
+    this.setState({
+      imageSize: imageSize
     });
   }
 
+  setContainerWidth = (event) => {
+    if (this.state.containerWidth === 0) {
+      this.setState({ containerWidth: event.nativeEvent.layout.width, containerHeight: event.nativeEvent.layout.height })
+    }
+  }
+
   render() {
     return (
       <View style={{ minHeight: this.state.minHeight }}>
@@ -256,7 +281,7 @@ export default class Publish4 extends React.Component {
                 {this.state.allPhotosSelected ?
                   null
                   :
-                  <TouchableOpacity style={[commonStyles.photoBox, this.state.showErrorNoSelectedImages ? commonStyles.fieldError : null]} onPress={() => this.props.openPictureSelector()}>
+                  <TouchableOpacity onLayout={this.setContainerWidth} style={[commonStyles.photoBox, this.state.showErrorNoSelectedImages ? commonStyles.fieldError : null]} onPress={() => this.props.openPictureSelector()}>
                     <TouchableOpacity style={[commonStyles.photoBoxAddIcon]} onPress={() => this.props.openPictureSelector()}>
                       <TouchableHighlight underlayColor="#104a7a" onPress={() => this.props.openPictureSelector()}>
                         <FontAwesomeIcon style={commonStyles.photoAddIcon} name="plus-circled" />
@@ -269,7 +294,7 @@ export default class Publish4 extends React.Component {
                 }
                 {this.state.images.map((item, index) => {
                   return (
-                    <View style={[commonStyles.photoBox]} onLayout={(event) => this.setState({ containerWidth: event.nativeEvent.layout.width, containerHeight: event.nativeEvent.layout.height })} key={index}>
+                    <View style={[commonStyles.photoBox]} onLayout={this.setContainerWidth} key={index}>
                       <Image style={{ width: this.state.imageSize[index]?.width, height: this.state.imageSize[index]?.height, marginVertical: this.state.imageSize[index]?.marginVertical, marginHorizontal: this.state.imageSize[index]?.marginHorizontal }}
                         resizeMode='center' source={{ uri: item.uri }} borderRadius={10} onError={() => this.rerenderImage(index)} />
                       <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='center' borderRadius={1.5}>

package/package.json

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