@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/src/components/ImageUploadProgress.js

@@ -1,51 +1,59 @@
-import React, { Component } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { InlineButton } from './InlineButton';
-import { Spinner } from './Spinner';
+import React, { Component } from "react";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./Text";
+import { InlineButton } from "./InlineButton";
+import { Spinner } from "./Spinner";
 
 class ImageUploadProgress extends Component {
-  onRetryUpload = (imageUri, uploadUri) => {
-    this.props.uploader.retryUpload(imageUri, uploadUri);
-  };
+	onRetryUpload = (imageUri, uploadUri) => {
+		this.props.uploader.retryUpload(imageUri, uploadUri);
+	};
 
-  render() {
-    const { color, image, style, progressTextStyle, retryTextStyle } = this.props;
-    const { imageUri, uploadUri, uploadProgress, allowRetry } = image;
+	render() {
+		const { color, image, style, progressTextStyle, retryTextStyle } =
+			this.props;
+		const { imageUri, uploadUri, uploadProgress, allowRetry } = image;
 
-    return (
-      <View style={[styles.container, style]}>
-        <Spinner style={styles.spinner} />
-        <Text style={[styles.uploadProgressText, progressTextStyle, { color }]}>{uploadProgress}</Text>
-        {allowRetry && (
-          <InlineButton color={color} onPress={() => this.onRetryUpload(imageUri, uploadUri)} touchableStyle={styles.retryButton}>
-            <Text style={[styles.retryText, retryTextStyle]}>Retry</Text>
-          </InlineButton>
-        )}
-      </View>
-    );
-  }
+		return (
+			<View style={[styles.container, style]}>
+				<Spinner style={styles.spinner} />
+				<Text style={[styles.uploadProgressText, progressTextStyle, { color }]}>
+					{uploadProgress}
+				</Text>
+				{allowRetry && (
+					<InlineButton
+						color={color}
+						onPress={() => this.onRetryUpload(imageUri, uploadUri)}
+						touchableStyle={styles.retryButton}
+					>
+						<Text style={[styles.retryText, retryTextStyle]}>Retry</Text>
+					</InlineButton>
+				)}
+			</View>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  spinner: {
-    flex: 0,
-  },
-  uploadProgressText: {
-    textAlign: 'center',
-    fontFamily: 'sf-semibold',
-    fontSize: 12,
-  },
-  retryButton: {
-    marginTop: 10,
-  },
-  retryText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 12,
-  },
+	container: {
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	spinner: {
+		flex: 0,
+	},
+	uploadProgressText: {
+		textAlign: "center",
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+	},
+	retryButton: {
+		marginTop: 10,
+	},
+	retryText: {
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+	},
 });
 
 export default ImageUploadProgress;

package/src/components/ImageUploader.js

@@ -142,23 +142,25 @@ class ImageUploader extends Component {
     let uploadUri;
     try {
       const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_IMAGE_NAME)}.${DEFULAT_IMAGE_TYPE}`;
-      uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
 
-      this.props.onUploadStarted(uploadUri, imageUri);
       this.hideUploadMenu();
 
       const resized = await this.resizeImageAsync(imageUri);
+      const blob = await fileActions.imageToBlob(resized.uri);
+      const presignedUriRes = await fileActions.getPresignedUrl(_.last(resized.uri.split('/')), blob.type);
+      uploadUri = presignedUriRes.key;
+      this.props.onUploadStarted(uploadUri, imageUri);
       if (this.props.onlySelectImage) {
         this.props.onImageSelected(resized, fileName);
         return;
       }
 
-      const res = await fileActions.uploadUserMediaWithProgress(resized.uri, uploadUri, progress => {
+      const uploadResult = await fileActions.uploadUserMediaWithProgress(blob, presignedUriRes.url, progress => {
         if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
       });
 
-      this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-      console.log('upload success', Config.env.baseUploadsUrl + res.key);
+      this.props.onUploadSuccess(Config.env.baseUploadsUrl + uploadUri, uploadUri);
+      console.log('upload success', Config.env.baseUploadsUrl + uploadUri);
     } catch (e) {
       console.log('handleImagePicked error', e);
       this.props.onUploadFailed(uploadUri);
@@ -170,7 +172,6 @@ class ImageUploader extends Component {
     const imagesUploaded = imagesSelected.map(image => {
       const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_IMAGE_NAME)}.${DEFULAT_IMAGE_TYPE}`;
       const uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
-      if (!this.props.onlySelectImage) this.props.onUploadStarted(uploadUri, image.uri);
       return { imageUri: image.uri, uploadUri, fileName };
     });
     this.hideUploadMenu();
@@ -181,16 +182,21 @@ class ImageUploader extends Component {
       const { imageUri, uploadUri, fileName } = image;
       try {
         const resized = await this.resizeImageAsync(imageUri);
+        const blob = await fileActions.imageToBlob(resized.uri);
         if (this.props.onlySelectImage) {
           this.props.onImageSelected(resized, fileName);
           return;
         }
+        const presignedUriRes = await fileActions.getPresignedUrl(_.last(resized.uri.split('/')), blob.type);
+        const uploadUri = presignedUriRes.key;
+        if (!this.props.onlySelectImage) this.props.onUploadStarted(uploadUri, imageUri);
 
-        const res = await fileActions.uploadUserMediaWithProgress(resized.uri, uploadUri, progress => {
+        const uploadResult = await fileActions.uploadUserMediaWithProgress(blob, presignedUriRes.url, progress => {
           if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
         });
-        this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-        console.log('upload success', Config.env.baseUploadsUrl + res.key);
+
+        this.props.onUploadSuccess(Config.env.baseUploadsUrl + uploadUri, uploadUri);
+        console.log('upload success', Config.env.baseUploadsUrl + uploadUri);
       } catch (e) {
         console.log('handleMultiImagePicked error', e);
         this.props.onUploadFailed(uploadUri);
@@ -203,17 +209,19 @@ class ImageUploader extends Component {
     try {
       const fileType = uri.substring(uri.lastIndexOf('.') + 1);
       const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_VIDEO_NAME)}.${fileType}`;
-      uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
+      const blob = await fileActions.imageToBlob(uri);
+      const presignedUriRes = await fileActions.getPresignedUrl(fileName, blob.type);
+      uploadUri = presignedUriRes.key;
 
       this.props.onUploadStarted(uploadUri, uri);
       this.hideUploadMenu();
 
-      const res = await fileActions.uploadUserMediaWithProgress(uri, uploadUri, progress => {
+      const uploadResult = await fileActions.uploadUserMediaWithProgress(blob, presignedUriRes.url, progress => {
         if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
       });
 
-      this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-      console.log('upload success', Config.env.baseUploadsUrl + res.key);
+      this.props.onUploadSuccess(Config.env.baseUploadsUrl + uploadUri, uploadUri);
+      console.log('upload success', Config.env.baseUploadsUrl + uploadUri);
     } catch (e) {
       console.log('handleVideoPicked error', e);
       this.props.onUploadFailed(uploadUri);
@@ -266,6 +274,7 @@ class ImageUploader extends Component {
   };
 
   isEditingEnabled = () => {
+    return false;
     return !this.props.multiple && !this.props.allowVideo && getValueOrDefault(this.props.allowsEditing, DEFAULT_ALLOWS_EDITING);
   };
 
@@ -390,6 +399,7 @@ class ImageUploader extends Component {
       } else {
         if (mediaSelected[0].mediaType === MediaLibrary.MediaType.video) {
           const uri = mediaSelected[0].localUri || mediaSelected[0].uri;
+          console.log('picked a video');
           this.handleVideoPicked(uri);
         } else {
           this.handleMultiImagePicked(mediaSelected);

package/src/components/InlineButton.js

@@ -1,79 +1,89 @@
-import React, { Component } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import React, { Component } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Text } from "./Text";
 
 class InlineButton extends Component {
-  renderContent() {
-    if (this.props.noText) {
-      return this.props.children;
-    }
-    return (
-      <Text
-        style={[styles.text, (this.props.large || this.props.fullWidth) && styles.textLarge, this.props.textStyle]}
-        numberOfLines={this.props.numberOfLines || 1}
-      >
-        {this.props.children}
-      </Text>
-    );
-  }
+	renderContent() {
+		if (this.props.noText) {
+			return this.props.children;
+		}
+		return (
+			<Text
+				style={[
+					styles.text,
+					(this.props.large || this.props.fullWidth) && styles.textLarge,
+					this.props.textStyle,
+				]}
+				numberOfLines={this.props.numberOfLines || 1}
+			>
+				{this.props.children}
+			</Text>
+		);
+	}
 
-  renderExtra() {
-    if (this.props.extraContent) {
-      return this.props.extraContent;
-    }
-    return null;
-  }
+	renderExtra() {
+		if (this.props.extraContent) {
+			return this.props.extraContent;
+		}
+		return null;
+	}
 
-  render() {
-    return (
-      <TouchableOpacity
-        style={[
-          (this.props.fillTouchable || this.props.fullWidth) && { flexDirection: 'row' },
-          this.props.fullWidth && { flex: 1 },
-          this.props.disabled && this.props.disabledOpacity && { opacity: 0.4 },
-          this.props.touchableStyle,
-        ]}
-        onPress={this.props.onPress}
-        disabled={this.props.disabled}
-      >
-        <View
-          style={[
-            styles.container,
-            (this.props.large || this.props.fullWidth) && styles.containerLarge,
-            (this.props.fillTouchable || this.props.fullWidth) && { flex: 1 },
-            this.props.border && { borderColor: this.props.border, borderWidth: 1 },
-            this.props.style,
-            { backgroundColor: this.props.color },
-          ]}
-        >
-          {this.renderContent()}
-        </View>
-        {this.renderExtra()}
-      </TouchableOpacity>
-    );
-  }
+	render() {
+		return (
+			<TouchableOpacity
+				style={[
+					(this.props.fillTouchable || this.props.fullWidth) && {
+						flexDirection: "row",
+					},
+					this.props.fullWidth && { flex: 1 },
+					this.props.disabled && this.props.disabledOpacity && { opacity: 0.4 },
+					this.props.touchableStyle,
+				]}
+				onPress={this.props.onPress}
+				disabled={this.props.disabled}
+			>
+				<View
+					style={[
+						styles.container,
+						(this.props.large || this.props.fullWidth) && styles.containerLarge,
+						(this.props.fillTouchable || this.props.fullWidth) && { flex: 1 },
+						this.props.border && {
+							borderColor: this.props.border,
+							borderWidth: 1,
+						},
+						this.props.style,
+						{ backgroundColor: this.props.color },
+					]}
+				>
+					{this.renderContent()}
+				</View>
+				{this.renderExtra()}
+			</TouchableOpacity>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    height: 28,
-    borderRadius: 4,
-    alignSelf: 'flex-start',
-  },
-  containerLarge: {
-    height: 36,
-  },
-  text: {
-    color: '#fff',
-    fontFamily: 'sf-semibold',
-    fontSize: 14,
-    paddingBottom: 1,
-  },
-  textLarge: {
-    fontSize: 15,
-  },
+	container: {
+		alignItems: "center",
+		justifyContent: "center",
+		paddingHorizontal: 16,
+		height: 28,
+		borderRadius: 4,
+		alignSelf: "flex-start",
+	},
+	containerLarge: {
+		height: 36,
+	},
+	text: {
+		color: "#fff",
+		fontFamily: "sf-semibold",
+		fontSize: 14,
+		paddingBottom: 1,
+	},
+	textLarge: {
+		fontSize: 15,
+	},
 };
 
 export { InlineButton };