@plusscommunities/pluss-core-app 1.1.1 → 1.1.5

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.1.1",
+  "version": "1.1.5",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
-    "upload": "npm version patch && npm publish --access public",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "patch": "npm version patch",
+    "upload": "npm publish --access public && rm -rf node_modules",
+    "upload:p": "npm run patch && npm run upload"
   },
   "author": "Phillip Suh",
   "license": "ISC",

package/src/actions/types.js

@@ -10,4 +10,4 @@ export const UPDATE_RESIDENTS = 'UPDATE_RESIDENTS';
 export const LOADED_RESIDENTS = 'LOADED_RESIDENTS';
 export const LOADED_LINKED_USERS = 'LOADED_LINKED_USERS';
 export const LOADED_LINKED_TO_USERS = 'LOADED_LINKED_TO_USERS';
-export const UPDATE_USER_STATE = 'update_user_state';
+export const UPDATE_USER_STATE = 'UPDATE_USER_STATE';

package/src/apis/reactionActions.js

@@ -3,33 +3,34 @@ import { getUrl } from '../helper';
 import { authedFunction } from '../session';
 
 export const reactionActions = {
-  // add: (entityId, entityType, reaction, site) => {
-  //   return authedFunction({
-  //     method: 'POST',
-  //     url: getUrl('reactions', 'add'),
-  //     data: {
-  //       entityId,
-  //       entityType,
-  //       reaction,
-  //       site,
-  //     },
-  //   });
-  // },
-  // remove: (entityId, entityType, reaction) => {
-  //   return authedFunction({
-  //     method: 'POST',
-  //     url: getUrl('reactions', 'remove'),
-  //     data: {
-  //       entityId,
-  //       entityType,
-  //       reaction,
-  //     },
-  //   });
-  // },
-  addComment: (entityId, entityType, site, comment, image) => {
+  add: (entityId, entityType, reaction, site) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('reactions', 'add'),
+      data: {
+        entityId,
+        entityType,
+        reaction,
+        site,
+      },
+    });
+  },
+  remove: (entityId, entityType, reaction) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('reactions', 'remove'),
+      data: {
+        entityId,
+        entityType,
+        reaction,
+      },
+    });
+  },
+  addComment: (entityId, entityType, entityName, site, comment, image) => {
     const data = {
       entityId,
       entityType,
+      entityName,
       site,
       comment,
     };

package/src/components/CommentReply.js

@@ -96,7 +96,7 @@ class CommentReply extends Component {
       this.props.commentSection.getWrappedInstance().startedAddingComment();
     }
     reactionActions
-      .addComment(this.props.entityId, this.props.entityType, this.props.site, text, image)
+      .addComment(this.props.entityId, this.props.entityType, this.props.entityName, this.props.site, text, image)
       .then(res => {
         if (this.props.commentSection) {
           this.props.commentSection.getWrappedInstance().commentAdded(res.data);

package/src/components/Header.js

@@ -276,6 +276,7 @@ class Header extends Component {
         <Animated.View
           style={[
             styles.container,
+            !this.props.noShadow && styles.containerShadow,
             this.props.transparent && styles.transparentContainer,
             this.props.style,
             { backgroundColor: this.props.headerColourOffset, elevation: this.props.headerElev, shadowColor: this.props.headerShadow },
@@ -297,6 +298,7 @@ class Header extends Component {
       <View
         style={[
           styles.container,
+          !this.props.noShadow && styles.containerShadow,
           this.props.transparent && styles.transparentContainer,
           this.props.lineSeparated && styles.lineSeparated,
           this.props.popupHeader && styles.popupHeader,
@@ -331,6 +333,9 @@ const styles = {
   container: {
     alignSelf: 'stretch',
     backgroundColor: '#fff',
+    zIndex: 10,
+  },
+  containerShadow: {
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -339,7 +344,6 @@ const styles = {
     shadowOpacity: 0.1,
     shadowRadius: 6,
     elevation: 3,
-    zIndex: 10,
   },
   lineSeparated: {
     borderBottomWidth: 1,

package/src/components/ImagePopup.js

@@ -45,7 +45,7 @@ class ImagePopup extends Component {
       return { url: get1400(image?.uri), original: image?.uri, isVideo: isVideo(image?.uri), date: image?.date, user: image?.user };
     });
 
-    this.setState({ images, index: this.props.index || 0 });
+    this.setState({ images, index: this.state.index || this.props.index || 0 });
   };
 
   onChange = index => {

package/src/components/LoadingIndicator.js

@@ -1,27 +1,17 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
-import { TEXT_BLUEGREY } from '../colours';
+import { StyleSheet, Animated, Dimensions } from 'react-native';
+import { connect } from 'react-redux';
+import { getMainBrandingColourFromState } from '../colours';
 
-const OPACITY_START = 0.1;
-const OPACITY_END1 = 0.4;
-const OPACITY_END2 = 0.7;
-const OPACITY_END3 = 1;
-const LEFT_START = 1;
-const LEFT_END1 = 16;
-const LEFT_END2 = 32;
-const CIRCLE_SIZE = 8;
-const DEFAULT_HEIGHT = 38;
+const DEFAULT_HEIGHT = 4;
+const DEFAULT_WIDTH = Dimensions.get('window').width;
 
 class LoadingIndicator extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      animatedOpacity1: new Animated.Value(OPACITY_START),
-      animatedOpacity2: new Animated.Value(OPACITY_START),
-      animatedOpacity3: new Animated.Value(OPACITY_START),
-      animatedOpacity4: new Animated.Value(0),
-      animatedLeft4: new Animated.Value(LEFT_START),
-      animatedHeight: new Animated.Value(this.props.visible ? DEFAULT_HEIGHT : 0),
+      animatedLeft: new Animated.Value(-DEFAULT_WIDTH),
+      animatedOpacity: new Animated.Value(0),
     };
     this.height = 0;
   }
@@ -36,8 +26,8 @@ class LoadingIndicator extends Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps.visible !== this.props.visible) {
-      Animated.timing(this.state.animatedHeight, {
-        toValue: this.props.visible ? DEFAULT_HEIGHT : 0,
+      Animated.timing(this.state.animatedOpacity, {
+        toValue: this.props.visible ? 0.8 : 0,
         duration: 300,
         useNativeDriver: false,
       }).start();
@@ -46,95 +36,32 @@ class LoadingIndicator extends Component {
 
   animate = () => {
     Animated.sequence([
-      Animated.timing(this.state.animatedOpacity4, {
-        toValue: OPACITY_END1,
-        duration: 750,
+      Animated.timing(this.state.animatedLeft, {
+        toValue: DEFAULT_WIDTH,
+        duration: 1500,
         useNativeDriver: false,
       }),
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity1, {
-          toValue: OPACITY_END1,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedLeft4, {
-          toValue: LEFT_END1,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.timing(this.state.animatedOpacity4, {
-        toValue: OPACITY_END2,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity2, {
-          toValue: OPACITY_END2,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedLeft4, {
-          toValue: LEFT_END2,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity4, {
-          toValue: OPACITY_END3,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity3, {
-          toValue: OPACITY_END3,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.parallel([
-        Animated.timing(this.state.animatedLeft4, {
-          toValue: LEFT_START,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity4, {
-          toValue: 0,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.timing(this.state.animatedOpacity3, {
-        toValue: OPACITY_START,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.timing(this.state.animatedOpacity2, {
-        toValue: OPACITY_START,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.timing(this.state.animatedOpacity1, {
-        toValue: OPACITY_START,
-        duration: 250,
+      Animated.delay(500),
+      Animated.timing(this.state.animatedLeft, {
+        toValue: -DEFAULT_WIDTH,
+        duration: 1500,
         useNativeDriver: false,
       }),
+      Animated.delay(500),
     ]).start(() => {
       this.animate();
     });
   };
 
   render() {
-    const { animatedOpacity1, animatedOpacity2, animatedOpacity3, animatedOpacity4, animatedLeft4, animatedHeight } = this.state;
-
     return (
-      <Animated.View style={[styles.container, this.props.style, { height: animatedHeight }]} onLayout={this.onLayout}>
-        <View style={styles.innerContainer}>
-          <Animated.View style={[styles.circle, { opacity: animatedOpacity1 }]} />
-          <Animated.View style={[styles.circle, { opacity: animatedOpacity2 }]} />
-          <Animated.View style={[styles.circle, { opacity: animatedOpacity3 }]} />
-          <Animated.View style={[styles.circle, { position: 'absolute', left: animatedLeft4, opacity: animatedOpacity4 }]} />
-        </View>
+      <Animated.View
+        style={[styles.container, this.props.style, { height: DEFAULT_HEIGHT, opacity: this.state.animatedOpacity }]}
+        onLayout={this.onLayout}
+      >
+        <Animated.View
+          style={[styles.line, { backgroundColor: this.props.colourBrandingMain, left: this.state.animatedLeft, height: DEFAULT_HEIGHT }]}
+        />
       </Animated.View>
     );
   }
@@ -145,20 +72,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
-    backgroundColor: '#ebeff2',
+    backgroundColor: '#fff',
     width: '100%',
     height: 38,
   },
   innerContainer: {
     flexDirection: 'row',
   },
-  circle: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
-    borderRadius: CIRCLE_SIZE / 2,
-    backgroundColor: TEXT_BLUEGREY,
-    marginHorizontal: 4,
+  line: {
+    width: DEFAULT_WIDTH,
   },
 });
 
-export default LoadingIndicator;
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(LoadingIndicator);
+// export { loadingIndicator as Default };

package/src/components/PlussChat.js

@@ -9,6 +9,8 @@ import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { Spinner } from './Spinner';
 import { ProfilePic } from './ProfilePic';
 import PlussChatTime from './PlussChatTime';
+import { PDFPopup } from './PDFPopup';
+import { Attachment } from './Attachment';
 import PlussChatMessage from './PlussChatMessage';
 import {
   TEXT_DARK,
@@ -19,8 +21,7 @@ import {
   BG_GREY,
   TEXT_BLUEGREY,
 } from '../colours';
-import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource } from '../helper';
-// import { tinyChatDefault } from '../../config';
+import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource, getFileName } from '../helper';
 import Config, { Services } from '../config';
 import ImageUploader from './ImageUploader';
 import ImageUploadProgress from './ImageUploadProgress';
@@ -144,6 +145,18 @@ class PlussChat extends Component {
     }, 2000);
   };
 
+  onOpenAttachment = a => {
+    this.setState({
+      selectedPDF: a,
+    });
+  };
+
+  onCloseAttachment = () => {
+    this.setState({
+      selectedPDF: null,
+    });
+  };
+
   showUploadMenu() {
     this.imageUploader.getWrappedInstance().showUploadMenu();
   }
@@ -280,6 +293,11 @@ class PlussChat extends Component {
       wrapperStyle.paddingBottom = 16;
       wrapperStyle.minWidth = 142; // 110 image width + 16 padding either side
     }
+    if (!_.isEmpty(bubbleProps.currentMessage.attachments)) {
+      wrapperStyle.paddingTop = 8;
+      wrapperStyle.paddingBottom = 16;
+      wrapperStyle.paddingHorizontal = 16;
+    }
     return (
       <Bubble
         {...bubbleProps}
@@ -402,6 +420,25 @@ class PlussChat extends Component {
         </View>
       );
     }
+    if (!_.isEmpty(currentMessage.attachments)) {
+      console.log('rendering attachments');
+      console.log(currentMessage.attachments);
+      return (
+        <View>
+          {currentMessage.attachments.map((url, i) => {
+            return (
+              <Attachment
+                onPress={() => {
+                  this.onOpenAttachment(url);
+                }}
+                key={i}
+                title={getFileName(url)}
+              />
+            );
+          })}
+        </View>
+      );
+    }
     if (currentMessage.event) {
       return (
         <TouchableOpacity onPress={this.onPressEvent.bind(this, currentMessage.event)}>
@@ -681,6 +718,15 @@ class PlussChat extends Component {
     );
   }
 
+  renderPDF() {
+    if (_.isEmpty(this.state.selectedPDF)) {
+      return null;
+    }
+    return (
+      <PDFPopup source={this.state.selectedPDF} onClose={this.onCloseAttachment} title={getFileName(this.state.selectedPDF)} pdfCount={1} />
+    );
+  }
+
   render() {
     if (Platform.OS === 'android' && !this.props.noAndroidAvoid) {
       return (
@@ -689,6 +735,7 @@ class PlussChat extends Component {
           {this.renderImageUploader()}
           {this.renderImagePopup()}
           {this.renderVideoPlayerPopup()}
+          {this.renderPDF()}
         </KeyboardAvoidingView>
       );
     }
@@ -698,6 +745,7 @@ class PlussChat extends Component {
         {this.renderImageUploader()}
         {this.renderImagePopup()}
         {this.renderVideoPlayerPopup()}
+        {this.renderPDF()}
       </View>
     );
   }

package/src/helper.js

@@ -74,11 +74,37 @@ const getExtension = url => {
   return fileSplit[fileSplit.length - 1].toLowerCase();
 };
 
+const getFileName = (url, noExtension) => {
+  if (!url) {
+    return null;
+  }
+  const fileSplit = url.split('/');
+  const name = fileSplit[fileSplit.length - 1].toLowerCase();
+  if (!noExtension) {
+    return name;
+  }
+  return name.split('.')[0];
+};
+
 const isVideo = url => {
   const extension = getExtension(url);
   return ['mov', 'mp4'].includes(extension);
 };
 
+const isVideoUrl = url => {
+  const urlToCheck = getValidUrl(url);
+  if (isVideo(urlToCheck)) {
+    return true;
+  }
+  if (isYoutube(urlToCheck)) {
+    return true;
+  }
+  if (isVimeo(urlToCheck)) {
+    return true;
+  }
+  return false;
+};
+
 const isStockImage = url => {
   return url.indexOf('https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/library') !== -1;
 };
@@ -288,6 +314,29 @@ const isTablet = () => {
   return Dimensions.get('screen').width > 600;
 };
 
+const isVimeo = url => {
+  if (_.isEmpty(url)) {
+    return false;
+  }
+  if (url.indexOf('https://vimeo.com/') === 0) {
+    return true;
+  }
+  if (url.indexOf('https://player.vimeo.com/video/') === 0) {
+    return true;
+  }
+};
+
+const getVimeoEmbed = url => {
+  if (_.isEmpty(url)) {
+    return '';
+  }
+  if (url.indexOf('https://vimeo.com/') === 0) {
+    const vimeoId = 'lol'; //TODO
+    return `https://player.vimeo.com/video/${vimeoId}`;
+  }
+  return url; //TODO
+};
+
 const isYoutube = url => {
   if (_.isUndefined(url) || _.isEmpty(url)) {
     return false;
@@ -349,6 +398,7 @@ export {
   getSiteSettingFromState,
   getValueOrDefault,
   getExtension,
+  getFileName,
   isVideo,
   getThumb300,
   get1400,
@@ -373,4 +423,5 @@ export {
   getValidUrl,
   getUserPreview,
   allowComments,
+  isVideoUrl,
 };