@plusscommunities/pluss-core-app 7.0.1-beta.1 → 7.0.2-auth.0

package/src/components/DocumentUploader.js

@@ -0,0 +1,207 @@
+import React, { Component } from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { Icon } from '@rneui/themed';
+// import * as DocumentPicker from 'expo-document-picker';
+import { connect } from 'react-redux';
+import Config from '../config';
+import { fileActions } from '../apis';
+import { getValueOrDefault } from '../helper';
+import { TEXT_DARK, getMainBrandingColourFromState } from '../colours';
+
+const DEFAULT_DOCUMENT_NAME = 'document';
+
+class DocumentUploader extends Component {
+  static defaultProps = {
+    allowedTypes: ['application/pdf'],
+    buttonTitle: 'Upload Document',
+    buttonStyle: {},
+    buttonTextStyle: {},
+    onUploadStarted: () => {},
+    onUploadSuccess: () => {},
+    onUploadFailed: () => {},
+    onUploadProgress: null,
+    userId: null,
+    fileName: null,
+    disabled: false,
+  };
+
+  state = {
+    isUploading: false,
+    uploadProgress: 0,
+  };
+
+  pickDocument = async () => {
+    const { allowedTypes, multiple } = this.props;
+
+    try {
+      const result = {};
+      // const result = await DocumentPicker.getDocumentAsync({
+      //   type: allowedTypes,
+      //   copyToCacheDirectory: true,
+      //   multiple: multiple || false,
+      // });
+      // console.log('pickDocument', JSON.stringify(result, null, 2));
+
+      if (!result.canceled) {
+        await this.handleDocumentPicked(result);
+      }
+    } catch (error) {
+      console.log('Document picker error:', error);
+      this.props.onUploadFailed(null, error.message);
+    }
+  };
+
+  handleDocumentPicked = async documentResult => {
+    const { assets } = documentResult;
+    const { userId } = this.props;
+
+    try {
+      this.setState({ isUploading: true, uploadProgress: 0 });
+
+      // Process each asset in parallel
+      const uploadPromises = assets.map(async asset => {
+        const { name, uri } = asset;
+
+        // Generate a unique filename if not provided
+        const [file, fileExt] = name.split('.');
+        const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_DOCUMENT_NAME)}_${Date.now()}.${fileExt}`;
+        const uploadUri = fileActions.getUploadUrl(userId, fileName);
+        // console.log('handleDocumentPicked', JSON.stringify({ uploadUri, uri, name, fileName }, null, 2));
+
+        try {
+          // Notify parent component that upload has started for this file
+          this.props.onUploadStarted(uploadUri, uri, file, fileExt.toUpperCase());
+
+          const res = await fileActions.uploadUserMediaWithProgress(uri, uploadUri, progress => {
+            if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
+          });
+
+          const fileUrl = Config.env.baseUploadsUrl + res.key;
+          this.props.onUploadSuccess(fileUrl, uploadUri);
+          console.log('Upload success', fileUrl);
+          return { success: true, url: fileUrl, uploadUri };
+        } catch (error) {
+          console.error(`Upload failed for ${name}:`, error);
+          this.props.onUploadFailed(uploadUri, error.message);
+          return { success: false, error, uploadUri };
+        }
+      });
+
+      // Wait for all uploads to complete
+      const results = await Promise.all(uploadPromises);
+      return results;
+    } catch (error) {
+      console.error('Document upload error:', error);
+      return [];
+    } finally {
+      this.setState({ isUploading: false, uploadProgress: 0 });
+    }
+  };
+
+  renderUploadButton = () => {
+    const { buttonTitle, buttonStyle, buttonTextStyle, disabled } = this.props;
+    const { isUploading } = this.state;
+    const mainColor = getMainBrandingColourFromState(this.props);
+
+    return (
+      <TouchableOpacity
+        style={[styles.uploadButton, { borderColor: mainColor }, buttonStyle]}
+        onPress={this.pickDocument}
+        disabled={isUploading || disabled}
+        activeOpacity={0.7}
+      >
+        <View style={styles.buttonContent}>
+          {isUploading ? (
+            <ActivityIndicator color={mainColor} />
+          ) : (
+            <Icon name="attachment" type="entypo" color={mainColor} size={18} style={styles.icon} />
+          )}
+          <Text style={[styles.buttonText, { color: mainColor }, buttonTextStyle]}>{buttonTitle}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  renderProgress = () => {
+    const { uploadProgress } = this.state;
+    if (uploadProgress <= 0 || uploadProgress >= 1) return null;
+
+    return (
+      <View style={styles.progressContainer}>
+        <View style={styles.progressBar}>
+          <View style={[styles.progressFill, { width: `${uploadProgress * 100}%` }]} />
+        </View>
+        <Text style={styles.progressText}>{Math.round(uploadProgress * 100)}%</Text>
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {this.renderUploadButton()}
+        {this.renderProgress()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+  },
+  uploadButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#007AFF',
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '500',
+    marginLeft: 8,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  progressContainer: {
+    marginTop: 8,
+    alignItems: 'center',
+  },
+  progressBar: {
+    height: 4,
+    width: '100%',
+    backgroundColor: '#E0E0E0',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#4CAF50',
+  },
+  progressText: {
+    marginTop: 4,
+    fontSize: 12,
+    color: TEXT_DARK,
+  },
+});
+
+const mapStateToProps = state => {
+  const { user } = state;
+  return {
+    user,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps)(DocumentUploader);

package/src/components/ImagePopup.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import moment from 'moment';
-import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, ImageBackground, Text } from 'react-native';
+import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, Text } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import { Icon } from '@rneui/themed';
+import AutoHeightImage from 'react-native-auto-height-image';
 import { TEXT_DARK } from '../colours';
 import { StatusBarHeight, isVideo, get1400 } from '../helper';
 import { Pl60Icon } from '../fonts';
@@ -71,9 +72,8 @@ class ImagePopup extends Component {
     );
   }
 
-  renderImage = props => {
-    const media = this.state.images.find(image => image.url === props.source.uri);
-    const isVideo = !_.isNil(media) && media.isVideo;
+  renderImageFooter = (media, style) => {
+    if (!media.user || !media.date) return null;
 
     let dateText, timeText;
     if (!_.isNil(media.date)) {
@@ -83,25 +83,31 @@ class ImagePopup extends Component {
     }
 
     return (
-      <View>
-        <ImageBackground {...props}>
-          {isVideo && (
-            <View style={styles.videoOverlay}>
-              <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, media.original)}>
-                <Icon name="play" type="font-awesome" iconStyle={styles.videoPlayIcon} />
-              </TouchableOpacity>
-            </View>
-          )}
-        </ImageBackground>
-        {(!_.isNil(media.user) || !_.isNil(media.date)) && (
-          <View style={styles.imageInfoContainer}>
-            <ProfilePic Diameter={42} ProfilePic={media?.user?.profilePic} />
-            <View style={styles.imageTextContainer}>
-              <Text style={styles.imageTextName}>{media?.user?.displayName}</Text>
-              <Text numberOfLines={2} style={styles.iamgeTextDate}>{`Uploaded ${dateText} • ${timeText}`}</Text>
-            </View>
+      <View style={[styles.imageInfoContainer, style]}>
+        <ProfilePic Diameter={42} ProfilePic={media?.user?.profilePic} />
+        <View style={styles.imageTextContainer}>
+          <Text style={styles.imageTextName}>{media?.user?.displayName}</Text>
+          <Text numberOfLines={2} style={styles.iamgeTextDate}>{`Uploaded ${dateText} • ${timeText}`}</Text>
+        </View>
+      </View>
+    );
+  };
+
+  renderImage = props => {
+    const media = this.state.images.find(image => image.url === props.source.uri);
+    const isVideo = !_.isNil(media) && media.isVideo;
+
+    return (
+      <View style={styles.imageContainer}>
+        <AutoHeightImage source={{ uri: media.url }} width={SCREEN_WIDTH} resizeMode="contain" />
+        {isVideo && (
+          <View style={styles.videoOverlay}>
+            <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, media.original)}>
+              <Icon name="play" type="font-awesome" iconStyle={styles.videoPlayIcon} />
+            </TouchableOpacity>
           </View>
         )}
+        {this.renderImageFooter(media)}
       </View>
     );
   };
@@ -120,6 +126,15 @@ class ImagePopup extends Component {
     if (_.isEmpty(images)) {
       return null;
     }
+
+    // This is required for the ImageViewer to render the image info section properly
+    const imagesWithSizes = images.map(image => {
+      return {
+        ...image,
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+      };
+    });
     return (
       <Modal visible={visible} animationType="slide" onRequestClose={onClose} style={styles.modal}>
         <ImageViewer
@@ -128,7 +143,7 @@ class ImagePopup extends Component {
           onChange={this.onChange}
           onSwipeDown={onClose}
           enableSwipeDown
-          imageUrls={images}
+          imageUrls={imagesWithSizes}
           saveToLocalByLongPress={false}
           renderImage={this.renderImage}
         />
@@ -149,10 +164,10 @@ const styles = StyleSheet.create({
     height: SCREEN_HEIGHT,
     backgroundColor: '#000',
   },
-  image: {
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    backgroundColor: '#000',
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   menuIconContainer: {
     position: 'absolute',

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);
   };
 
@@ -304,13 +313,21 @@ class ImageUploader extends Component {
   };
 
   openLibrary = async () => {
-    this.setState({
-      showUploadMenu: false,
-      showPhotos: true,
-      selected: [],
-      showRemote: true,
-      selectedAlbumId: '',
-    });
+    this.setState(
+      {
+        showUploadMenu: false,
+      },
+      () => {
+        setTimeout(() => {
+          this.setState({
+            showPhotos: true,
+            selected: [],
+            showRemote: true,
+            selectedAlbumId: '',
+          });
+        }, 1000);
+      },
+    );
   };
 
   openPhotos = async () => {
@@ -334,13 +351,21 @@ class ImageUploader extends Component {
     // iOS behaviour
     if (!(await this.askPermissionsAsync())) return;
 
-    this.setState({
-      showUploadMenu: false,
-      showPhotos: true,
-      selected: [],
-      showRemote: false,
-      selectedAlbumId: '',
-    });
+    this.setState(
+      {
+        showUploadMenu: false,
+      },
+      () => {
+        setTimeout(() => {
+          this.setState({
+            showPhotos: true,
+            selected: [],
+            showRemote: false,
+            selectedAlbumId: '',
+          });
+        }, 1000);
+      },
+    );
   };
 
   hidePhotos = () => {
@@ -348,7 +373,19 @@ class ImageUploader extends Component {
   };
 
   openCropper = () => {
-    this.setState({ showPhotos: false, showCropper: true });
+    // Switching modals - requires a timeout to ensure the modal is closed before opening the next one
+    this.setState(
+      {
+        showPhotos: false,
+      },
+      () => {
+        setTimeout(() => {
+          this.setState({
+            showCropper: true,
+          });
+        }, 1000);
+      },
+    );
   };
 
   toggleCropper = () => {
@@ -390,6 +427,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/MediaPlayer.js

@@ -3,7 +3,7 @@ import { View, StyleSheet, Dimensions } from 'react-native';
 import YoutubePlayer, { getYoutubeMeta } from 'react-native-youtube-iframe';
 import { Vimeo } from 'react-native-vimeo-iframe';
 import { WebView } from 'react-native-webview';
-import { Video } from 'expo-av';
+import { Video, ResizeMode } from 'expo-av';
 import { Spinner } from './Spinner';
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
@@ -269,7 +269,7 @@ class MediaPlayer extends Component {
       source={{ uri: embedUrl }}
       {...EXPO_VIDEO_PROPS}
       shouldPlay={autoPlay}
-      resizeMode={Video.RESIZE_MODE_CONTAIN}
+      resizeMode={ResizeMode.CONTAIN}
       useNativeControls
       style={{ width, height }}
       onLoadStart={this.onStreamLoadStart}

package/src/components/PlussChat.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Image, ImageBackground, TouchableOpacity, Text, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { View, Image, ImageBackground, TouchableOpacity, Text, KeyboardAvoidingView, Platform, ScrollView, Alert } from 'react-native';
 import { GiftedChat, Bubble, MessageText, Send, InputToolbar, Composer } from 'react-native-gifted-chat';
 import { connect } from 'react-redux';
 import _ from 'lodash';
@@ -13,6 +13,7 @@ import { PDFPopup } from './PDFPopup';
 import { Attachment } from './Attachment';
 import PlussChatMessage from './PlussChatMessage';
 import { TextStyle } from './TextStyle';
+import { ConfirmPopup } from './ConfirmPopup';
 import {
   TEXT_DARK,
   LINEGREY,
@@ -62,6 +63,8 @@ class PlussChat extends Component {
       imagesToUpload: [],
       showFullscreenVideo: false,
       currentVideoUrl: '',
+      showDeleteMessageConfirm: false,
+      messageToDelete: null,
     };
     this.checkThumb = null;
   }
@@ -256,6 +259,55 @@ class PlussChat extends Component {
     });
   };
 
+  onDelete = message => {
+    // Only proceed if delete handler is provided
+    if (!this.props.onDeleteMessage) {
+      return;
+    }
+    
+    // Only allow deletion of own messages
+    if (message.user._id !== this.props.user.uid) {
+      return;
+    }
+    
+    this.setState({
+      showDeleteMessageConfirm: true,
+      messageToDelete: message,
+    });
+  };
+
+  onCancelDeleteMessage = () => {
+    this.setState({
+      showDeleteMessageConfirm: false,
+      messageToDelete: null,
+    });
+  };
+
+  onConfirmDeleteMessage = async () => {
+    const { messageToDelete } = this.state;
+    if (!messageToDelete) return;
+
+    this.setState({
+      showDeleteMessageConfirm: false,
+    });
+
+    try {
+      // Call the parent's delete handler if provided
+      if (this.props.onDeleteMessage) {
+        await this.props.onDeleteMessage(messageToDelete);
+      }
+      
+      this.setState({
+        messageToDelete: null,
+      });
+    } catch (error) {
+      // Handle error gracefully if parent handler fails
+      console.log('onConfirmDeleteMessage error', error);
+      // Error is already handled by parent component
+      this.setState({ messageToDelete: null });
+    }
+  };
+
   closeGallery() {
     this.setState({
       imagePopupSource: [],
@@ -353,14 +405,28 @@ class PlussChat extends Component {
         onPressReply={() => {
           this.onReply(props.currentMessage);
         }}
+        onPressDelete={this.props.onDeleteMessage ? () => {
+          this.onDelete(props.currentMessage);
+        } : null}
         {...props}
       />
     );
   }
   renderMessageText(messageTextProps) {
+    // If message is deleted, show placeholder text
+    const props = messageTextProps.currentMessage.deleted 
+      ? {
+          ...messageTextProps,
+          currentMessage: {
+            ...messageTextProps.currentMessage,
+            text: '[Message deleted]',
+          },
+        }
+      : messageTextProps;
+    
     return (
       <MessageText
-        {...messageTextProps}
+        {...props}
         textStyle={{
           left: {
             fontFamily: 'sf-regular',
@@ -408,6 +474,11 @@ class PlussChat extends Component {
     );
   }
   renderCustomView({ currentMessage, position }) {
+    // Don't show images or attachments for deleted messages
+    if (currentMessage.deleted) {
+      return null;
+    }
+    
     if (currentMessage.image) {
       const images = typeof currentMessage.image === 'string' ? [currentMessage.image] : currentMessage.image;
       const containerWidth = (() => {
@@ -765,6 +836,19 @@ class PlussChat extends Component {
     );
   }
 
+  renderDeleteConfirmPopup() {
+    return (
+      <ConfirmPopup
+        visible={this.state.showDeleteMessageConfirm}
+        onConfirm={this.onConfirmDeleteMessage}
+        onCancel={this.onCancelDeleteMessage}
+        text="Are you sure you want to delete this message?"
+        yesText="Delete"
+        noText="Cancel"
+      />
+    );
+  }
+
   render() {
     if (Platform.OS === 'android' && !this.props.noAndroidAvoid) {
       return (
@@ -774,6 +858,7 @@ class PlussChat extends Component {
           {this.renderImagePopup()}
           {this.renderVideoPlayerPopup()}
           {this.renderPDF()}
+          {this.renderDeleteConfirmPopup()}
         </KeyboardAvoidingView>
       );
     }
@@ -784,6 +869,7 @@ class PlussChat extends Component {
         {this.renderImagePopup()}
         {this.renderVideoPlayerPopup()}
         {this.renderPDF()}
+        {this.renderDeleteConfirmPopup()}
       </View>
     );
   }