@plusscommunities/pluss-core-app 1.0.7 → 1.1.2

package/src/components/PlussChatMessage.js

@@ -0,0 +1,208 @@
+/* eslint no-use-before-define: ["error", { "variables": false }], react-native/no-inline-styles: 0 */
+
+// NOTE:
+// This is a modified version of react-native-gifted-chat Message component
+
+// Original source:
+// https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/Message.js
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { View, ViewPropTypes, StyleSheet, Text } from 'react-native';
+import _ from 'lodash';
+
+import { Avatar, Bubble, SystemMessage, Day, utils } from 'react-native-gifted-chat';
+import { TEXT_LIGHT } from '../colours';
+import { getFirstName } from '../helper';
+
+const isSameUser = utils.isSameUser;
+const isSameDay = utils.isSameDay;
+
+export default class PlussChatMessage extends React.Component {
+  getInnerComponentProps() {
+    const { containerStyle, ...props } = this.props;
+    return {
+      ...props,
+      isSameUser,
+      isSameDay,
+    };
+  }
+
+  isCurrentUser() {
+    if (this.props.user._id === this.props.currentMessage.user._id) {
+      return true;
+    }
+    return false;
+  }
+
+  renderDay() {
+    if (this.props.currentMessage.createdAt) {
+      const dayProps = this.getInnerComponentProps();
+      if (this.props.renderDay) {
+        return this.props.renderDay(dayProps);
+      }
+      return <Day {...dayProps} />;
+    }
+    return null;
+  }
+
+  renderBubble() {
+    const bubbleProps = this.getInnerComponentProps();
+    if (this.props.renderBubble) {
+      return this.props.renderBubble(bubbleProps);
+    }
+    return <Bubble {...bubbleProps} />;
+  }
+
+  renderSystemMessage() {
+    const systemMessageProps = this.getInnerComponentProps();
+    if (this.props.renderSystemMessage) {
+      return this.props.renderSystemMessage(systemMessageProps);
+    }
+    return <SystemMessage {...systemMessageProps} />;
+  }
+
+  renderAvatar() {
+    if (this.isCurrentUser() && !this.props.showUserAvatar) {
+      return null;
+    }
+    const avatarProps = this.getInnerComponentProps();
+    const { currentMessage } = avatarProps;
+    if (currentMessage.user.avatar === null || _.isEmpty(currentMessage.user.avatar)) {
+      return null;
+    }
+    return (
+      <Avatar
+        {...avatarProps}
+        imageStyle={{
+          left: {
+            width: 30,
+            height: 30,
+            borderRadius: 15,
+          },
+          right: {
+            width: 30,
+            height: 30,
+            borderRadius: 15,
+          },
+        }}
+        containerStyle={{
+          left: {
+            marginRight: 10,
+          },
+          right: {
+            marginLeft: 10,
+          },
+        }}
+      />
+    );
+  }
+
+  renderName() {
+    const nameProps = this.getInnerComponentProps();
+    const { currentMessage } = nameProps;
+    if (currentMessage.user.name === null) {
+      return null;
+    }
+    return <Text style={[styles[this.props.position].name]}>{this.isCurrentUser() ? 'Me' : getFirstName(currentMessage.user.name)}</Text>;
+  }
+
+  render() {
+    const sameUserAsLast = isSameUser(this.props.currentMessage, this.props.previousMessage);
+    const sameUser = isSameUser(this.props.currentMessage, this.props.nextMessage);
+    return (
+      <View>
+        {this.renderDay()}
+        {this.props.currentMessage.system ? (
+          this.renderSystemMessage()
+        ) : (
+          <View>
+            {sameUserAsLast ? null : this.renderName()}
+            <View
+              style={[
+                styles[this.props.position].container,
+                { marginBottom: sameUser ? 2 : 10 },
+                !this.props.inverted && { marginBottom: 2 },
+                this.props.containerStyle[this.props.position],
+              ]}
+            >
+              {this.props.position === 'left' ? this.renderAvatar() : null}
+              {this.renderBubble()}
+              {this.props.position === 'right' ? this.renderAvatar() : null}
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-start',
+      marginLeft: 10,
+      marginRight: 0,
+    },
+    name: {
+      fontFamily: 'sf-regular',
+      color: TEXT_LIGHT,
+      fontSize: 14,
+      textAlign: 'left',
+      marginLeft: 50,
+      marginBottom: 5,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      marginLeft: 0,
+      marginRight: 10,
+    },
+    name: {
+      fontFamily: 'sf-regular',
+      color: TEXT_LIGHT,
+      fontSize: 14,
+      textAlign: 'right',
+      marginRight: 10,
+      marginBottom: 5,
+    },
+  }),
+};
+
+PlussChatMessage.defaultProps = {
+  renderAvatar: undefined,
+  renderBubble: null,
+  renderDay: null,
+  renderSystemMessage: null,
+  position: 'left',
+  currentMessage: {},
+  nextMessage: {},
+  previousMessage: {},
+  user: {},
+  containerStyle: {},
+  showUserAvatar: true,
+  inverted: true,
+};
+
+PlussChatMessage.propTypes = {
+  renderAvatar: PropTypes.func,
+  showUserAvatar: PropTypes.bool,
+  renderBubble: PropTypes.func,
+  renderDay: PropTypes.func,
+  renderSystemMessage: PropTypes.func,
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  user: PropTypes.object,
+  inverted: PropTypes.bool,
+  containerStyle: PropTypes.shape({
+    left: ViewPropTypes.style,
+    right: ViewPropTypes.style,
+  }),
+};

package/src/components/PlussChatTime.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import moment from 'moment';
+
+export default class PlussChatTime extends React.Component {
+  shouldRenderDay(curTime, prevTime) {
+    return !curTime.isSame(prevTime, 'd');
+  }
+
+  shouldRenderTime(curTime, prevTime) {
+    return curTime.diff(prevTime, 'm') >= 10;
+  }
+
+  render() {
+    const curMesTime = moment(this.props.currentMessage.createdAt).local();
+    const prevTime = moment(this.props.previousMessage.createdAt).local();
+    const now = moment().local();
+
+    if (this.shouldRenderDay(curMesTime, prevTime) || this.shouldRenderTime(curMesTime, prevTime)) {
+      let timestamp = '';
+      if (!now.isSame(curMesTime, 'd')) {
+        timestamp += curMesTime.format('ddd, D MMM');
+        if (!now.isSame(curMesTime, 'y')) {
+          timestamp += ` ${curMesTime.format('YYYY')}`;
+        }
+        timestamp += ' • ';
+      }
+      timestamp += curMesTime.format('h:mma');
+      return (
+        <View style={[styles.container, this.props.containerStyle]}>
+          <View style={[styles.wrapper, this.props.wrapperStyle]}>
+            <Text style={[styles.text, this.props.textStyle]}>{timestamp}</Text>
+          </View>
+        </View>
+      );
+    }
+    return null;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  wrapper: {
+    // backgroundColor: '#ccc',
+    // borderRadius: 10,
+    // paddingLeft: 10,
+    // paddingRight: 10,
+    // paddingTop: 5,
+    // paddingBottom: 5,
+  },
+  text: {
+    backgroundColor: 'transparent',
+    color: '#b2b2b2',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});

package/src/components/PositionedImage.js

@@ -0,0 +1,260 @@
+import React, { Component } from 'react';
+import { View, Animated, PanResponder, Image, StyleSheet } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { BOXGREY, TEXT_LIGHT } from '../colours';
+
+class PositionedImage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.lastPos = { x: 0, y: 0 };
+    this.imagePosition = new Animated.ValueXY(this.lastPos);
+    this.imagePosition.addListener(value => {
+      this.lastPos = value;
+    });
+    const imagePanResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => {
+        this.startPos = this.lastPos;
+        if (this.props.onPositionEnd) {
+          if (this.props.onPositionStart) this.props.onPositionStart();
+          this.setState({ panning: true });
+          return true;
+        }
+        return false;
+      },
+      onPanResponderMove: (event, gesture) => {
+        const newPos = this.state.isVertical ? { x: 0, y: this.startPos.y + gesture.dy } : { x: this.startPos.x + gesture.dx, y: 0 };
+        this.imagePosition.setValue(newPos);
+      },
+      onPanResponderTerminationRequest: (event, gesture) => true,
+      onPanResponderRelease: (event, gesture) => {
+        let endPos = { x: 0, y: 0 };
+        if (this.state.isVertical) {
+          const endY = this.startPos.y + gesture.dy;
+          const limitY = this.props.height - this.state.imageHeight;
+          if (endY > 0) {
+            // console.log('top reached', endY);
+            endPos = { x: 0, y: 0 };
+          } else if (endY < limitY) {
+            // console.log('bottom reached', endY, limitY);
+            endPos = { x: 0, y: limitY };
+          } else {
+            endPos = { x: 0, y: endY };
+          }
+        } else {
+          const endX = this.startPos.x + gesture.dx;
+          const limitX = this.props.width - this.state.imageWidth;
+          if (endX > 0) {
+            // console.log('left reached', endX);
+            endPos = { x: 0, y: 0 };
+          } else if (endX < limitX) {
+            // console.log('right reached', endX, limitX);
+            endPos = { x: limitX, y: 0 };
+          } else {
+            endPos = { x: endX, y: 0 };
+          }
+        }
+        Animated.spring(this.imagePosition, { toValue: endPos, useNativeDriver: false }).start();
+
+        if (this.props.onPositionEnd)
+          this.props.onPositionEnd({
+            x: endPos.x / this.state.imageWidth,
+            y: endPos.y / this.state.imageHeight,
+          });
+
+        this.setState({ panning: false });
+      },
+      onPanResponderTerminate: (event, gesture) => {
+        this.setState({ panning: false });
+      },
+    });
+
+    this.state = {
+      imageWidth: 0,
+      imageHeight: 0,
+      imagePanResponder,
+      isVertical: true,
+      showGuide: false,
+      animatedOpacity: new Animated.Value(1),
+      panning: false,
+    };
+  }
+
+  componentDidMount() {
+    this.calculateDimensions();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.source.uri !== this.props.source.uri) {
+      // console.log('componentDidUpdate', prevProps.source.uri, this.props.source.uri);
+      this.calculateDimensions();
+    }
+  }
+
+  calculateDimensions = () => {
+    Image.getSize(this.props.source.uri, (imageWidth, imageHeight) => {
+      // Default vertical positioning
+      const newWidth = this.props.width;
+      const newHeight = imageHeight * (this.props.width / imageWidth);
+
+      if (newHeight < this.props.height) {
+        // If vertical positioning isn't possible, enable horizontal positioning
+        this.setState(
+          {
+            imageWidth: imageWidth * (this.props.height / imageHeight),
+            imageHeight: this.props.height,
+            isVertical: false,
+            showGuide: this.props.onPositionEnd ? true : false,
+          },
+          this.onDimensionAvailable,
+        );
+      } else {
+        this.setState(
+          {
+            imageWidth: newWidth,
+            imageHeight: newHeight,
+            isVertical: true,
+            showGuide: this.props.onPositionEnd ? true : false,
+          },
+          this.onDimensionAvailable,
+        );
+      }
+    });
+  };
+
+  onDimensionAvailable = () => {
+    const { offset } = this.props;
+    const { imageWidth, imageHeight, isVertical } = this.state;
+
+    if (offset) {
+      // Apply percentage offset
+      const actual = {
+        x: offset.x * imageWidth,
+        y: offset.y * imageHeight,
+      };
+      this.imagePosition.setValue(actual);
+    } else {
+      // Centered by default
+      this.imagePosition.setValue({
+        x: isVertical ? 0 : -0.5 * imageWidth + 0.5 * this.props.width,
+        y: isVertical ? -0.5 * imageHeight + 0.5 * this.props.height : 0,
+      });
+    }
+
+    if (this.props.onPositionEnd) {
+      setTimeout(() => {
+        Animated.timing(this.state.animatedOpacity, {
+          toValue: 0,
+          duration: 900,
+          useNativeDriver: false,
+        }).start(() => {
+          this.setState({ showGuide: false });
+        });
+      }, 1000);
+    }
+  };
+
+  renderGrid() {
+    if (!this.state.panning) return null;
+    return (
+      <View style={styles.gridContainer}>
+        <View style={styles.gridHorizontal} />
+        <View style={styles.gridVertical} />
+      </View>
+    );
+  }
+
+  renderGuide() {
+    if (!this.state.showGuide) return null;
+    const { animatedOpacity, isVertical } = this.state;
+    return (
+      <Animated.View style={[styles.guideContainer, { opacity: animatedOpacity }]}>
+        <View style={[styles.guideIconContainer, { flexDirection: 'column' }]}>
+          <Icon name="arrow-up" type="font-awesome" iconStyle={[styles.guideIcon, !isVertical && styles.guideIconDisabled]} />
+          <Icon name="arrow-down" type="font-awesome" iconStyle={[styles.guideIcon, !isVertical && styles.guideIconDisabled]} />
+        </View>
+        <View style={[styles.guideIconContainer, { flexDirection: 'row' }]}>
+          <Icon name="arrow-left" type="font-awesome" iconStyle={[styles.guideIcon, isVertical && styles.guideIconDisabled]} />
+          <Icon name="arrow-right" type="font-awesome" iconStyle={[styles.guideIcon, isVertical && styles.guideIconDisabled]} />
+        </View>
+      </Animated.View>
+    );
+  }
+
+  render() {
+    const { imageWidth, imageHeight, imagePanResponder } = this.state;
+
+    return (
+      <View style={[styles.container, { width: this.props.width, height: this.props.height }, this.props.style]}>
+        <Animated.Image
+          source={this.props.source}
+          style={[{ width: imageWidth, height: imageHeight }, this.imagePosition.getLayout()]}
+          {...imagePanResponder.panHandlers}
+        />
+        {this.renderGrid()}
+        {this.renderGuide()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: BOXGREY,
+  },
+  guideContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#0006',
+  },
+  guideIconContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  guideIcon: {
+    color: '#fff',
+    fontSize: 50,
+    margin: 15,
+  },
+  guideIconDisabled: {
+    color: TEXT_LIGHT,
+  },
+  gridContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  gridHorizontal: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: '50%',
+    borderBottomWidth: 1,
+    borderBottomColor: BOXGREY,
+  },
+  gridVertical: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '50%',
+    borderLeftWidth: 1,
+    borderLeftColor: BOXGREY,
+  },
+});
+
+export default PositionedImage;

package/src/components/Reaction.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { getReactions, getShadowStyle } from '../helper';
+import { BG_GREY, TEXT_DARK, getMainBrandingColourFromState } from '../colours';
+import { reactionActions } from '../apis';
+
+class Reaction extends Component {
+  onPressReaction = () => {
+    if (!this.props.reactions[this.props.userId]) {
+      reactionActions.add(this.props.entityId, this.props.entityType, this.props.reaction.key, this.props.site);
+      this.props.onLike();
+    } else {
+      reactionActions.remove(this.props.entityId, this.props.entityType, this.props.reaction.key);
+      this.props.onUnlike();
+    }
+  };
+
+  getStyleType() {
+    if (this.props.reactions[this.props.userId]) {
+      return 'ThisHL';
+    }
+    if (this.props.anyHighlighted) {
+      return 'OtherHL';
+    }
+    return 'Default';
+  }
+
+  getTopReaction() {
+    return _.maxBy(Object.keys(this.props.reactions), key => {
+      return Object.keys(this.props.reactions[key]).length;
+    });
+  }
+
+  getIcon(topReaction) {
+    return _.find(getReactions(), r => {
+      return r.key === topReaction;
+    }).icon;
+  }
+
+  render() {
+    if (this.props.topReactionOnly) {
+      const topReaction = this.getTopReaction();
+      if (!topReaction) {
+        return null;
+      }
+      return (
+        <View style={[styles.container, styles.containerThisHL, this.props.style]}>
+          <Image style={[styles.image, this.props.imageStyle]} source={this.getIcon(topReaction)} />
+          <Text style={[styles.count, this.props.countStyle]}>{Object.keys(this.props.reactions[topReaction]).length}</Text>
+        </View>
+      );
+    }
+    return (
+      <TouchableOpacity style={styles.touchable} onPress={this.onPressReaction} disabled={this.props.user.type === 'KIOSK'}>
+        <View style={[styles.container, styles[`container${this.getStyleType()}`], this.props.style]}>
+          <Image style={[styles.image, this.props.imageStyle]} source={this.props.reaction.icon} />
+          <Text style={[styles.count, this.getStyleType() === 'ThisHL' && { color: this.props.colourBrandingMain }, this.props.countStyle]}>
+            {Object.keys(this.props.reactions).length}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = {
+  touchable: {
+    marginHorizontal: 4,
+    width: 60,
+    height: 30,
+  },
+  container: {
+    width: 60,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: BG_GREY,
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  containerThisHL: {
+    ...getShadowStyle(),
+  },
+  containerOtherHL: {
+    opacity: 0.5,
+  },
+  image: {
+    width: 20,
+    height: 20,
+    resizeMode: 'contain',
+  },
+  count: {
+    fontFamily: 'sf-medium',
+    color: TEXT_DARK,
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 16,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    user: state.user,
+  };
+};
+
+const reaction = connect(mapStateToProps, {})(Reaction);
+export { reaction as Reaction };

package/src/components/Reactions.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { getReactions, getUserPreview } from '../helper';
+import { Reaction } from './Reaction';
+
+class Reactions extends Component {
+  state = {
+    reactions: getReactions(),
+  };
+
+  getReaction(key) {
+    if (!this.props.entity) {
+      return {};
+    }
+    if (!this.props.entity.Reactions) {
+      this.props.entity.Reactions = {};
+    }
+    return this.props.entity.Reactions[key] || {};
+  }
+
+  onLike(key) {
+    if (!this.props.entity.Reactions) {
+      this.props.entity.Reactions = {};
+    }
+    if (!this.props.entity.Reactions[key]) {
+      this.props.entity.Reactions[key] = {};
+    }
+    this.props.entity.Reactions[key][this.props.user.uid] = getUserPreview(this.props.user);
+    this.props.onUpdateReactions();
+  }
+
+  onUnlike(key) {
+    if (!this.props.entity.Reactions) {
+      return;
+    }
+    if (!this.props.entity.Reactions[key]) {
+      return;
+    }
+    delete this.props.entity.Reactions[key][this.props.user.uid];
+    this.props.onUpdateReactions();
+  }
+
+  render() {
+    return (
+      <View style={[styles.container, this.props.style]}>
+        {this.state.reactions.map((r, i) => {
+          return (
+            <Reaction
+              key={i}
+              reaction={r}
+              entityType={this.props.entityType}
+              entityId={this.props.entityId}
+              reactions={this.getReaction(r.key)}
+              anyHighlighted={this.props.anyHighlighted}
+              userId={this.props.user.uid}
+              onLike={this.onLike.bind(this, r.key)}
+              onUnlike={this.onUnlike.bind(this, r.key)}
+              site={this.props.site}
+            />
+          );
+        })}
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: '100%',
+  },
+};
+
+export { Reactions };