@plusscommunities/pluss-core-app 1.0.7 → 1.1.2

package/src/components/StickyFooter.js

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import { LINEGREY } from '../colours';
+import { FOOTER_HEIGHT } from '../constants';
+
+class StickyFooter extends PureComponent {
+  render() {
+    return <View style={[styles.section, this.props.lineSeparated && styles.lineSeparated, this.props.style]}>{this.props.children}</View>;
+  }
+}
+
+const styles = {
+  section: {
+    backgroundColor: '#fff',
+    height: FOOTER_HEIGHT,
+    borderTopWidth: 0,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 16,
+  },
+  lineSeparated: {
+    borderTopWidth: 1,
+    borderColor: LINEGREY,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+};
+
+export { StickyFooter };

package/src/components/TextStyle.js

@@ -14,7 +14,7 @@ class TextStyle extends PureComponent {
 
 const styles = StyleSheet.create({
   pageHeading: {
-    fontFamily: 'qs-bold',
+    fontFamily: 'sf-bold',
     fontSize: 24,
     color: TEXT_DARKEST,
   },
@@ -23,6 +23,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: TEXT_DARKEST,
   },
+  detailLabel: {
+    fontFamily: 'sf-bold',
+    color: TEXT_DARKEST,
+    fontSize: 16,
+  },
 });
 
 export { TextStyle };

package/src/components/Toggle.js

@@ -0,0 +1,84 @@
+import React, { PureComponent } from 'react';
+import { Text, View, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
+import { getMainBrandingColourFromState } from '../colours';
+
+class Toggle extends PureComponent {
+  render() {
+    return (
+      <View style={[styles.container, this.props.style]}>
+        {this.props.options.map((option, index) => {
+          return (
+            <TouchableOpacity
+              onPress={() => {
+                this.props.onPress(option);
+              }}
+              style={[
+                styles.tag,
+                { borderColor: this.props.colourBrandingMain },
+                option.val === this.props.activeVal && {
+                  borderColor: this.props.colourBrandingMain,
+                  backgroundColor: this.props.colourBrandingMain,
+                },
+                index === 0 && styles.firstTag,
+                index === this.props.options.length - 1 && styles.lastTag,
+                this.props.tagStyle,
+              ]}
+              key={option.val}
+            >
+              <Text
+                style={[
+                  styles.text,
+                  { color: this.props.colourBrandingMain },
+                  option.val === this.props.activeVal && styles.activeText,
+                  this.props.textStyle,
+                ]}
+              >
+                {option.text}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flexDirection: 'row',
+  },
+  text: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  activeText: {
+    color: '#fff',
+  },
+  tag: {
+    flex: 1,
+    height: 34,
+    borderWidth: 1,
+    borderLeftWidth: 0,
+    justifyContent: 'center',
+  },
+  firstTag: {
+    borderLeftWidth: 1,
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+  },
+  lastTag: {
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const toggle = connect(mapStateToProps, {})(Toggle);
+export { toggle as Toggle };

package/src/components/TouchableSearchBar.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { View, TouchableWithoutFeedback, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { getSiteSettingFromState } from '../helper';
+import { TEXT_LIGHT, BOXGREY } from '../colours';
+import { Pl60Icon } from '../fonts';
+import Config, { Services } from '../config';
+
+class TouchableSearchBar extends Component {
+  onPressSearch = () => {
+    Services.navigation.navigate('search', { priorityType: this.props.priorityType, searchName: this.props.searchName });
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this.onPressSearch}>
+        <View style={[styles.searchInputContainer, this.props.headerType !== 'white' && { backgroundColor: '#fff' }, this.props.style]}>
+          <Pl60Icon name="Ellipse" style={styles.searchIcon} />
+          <Text style={styles.searchText}>{`Search ${this.props.searchName}`}</Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}
+
+const styles = {
+  searchInputContainer: {
+    flex: 1,
+    height: 36,
+    marginHorizontal: 16,
+    marginVertical: 17,
+    borderRadius: 25,
+    backgroundColor: BOXGREY,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+  },
+  searchIcon: {
+    fontSize: 14,
+    color: TEXT_LIGHT,
+    marginRight: 8,
+  },
+  searchText: {
+    fontSize: 14,
+    color: TEXT_LIGHT,
+    fontFamily: 'sf-medium',
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    headerType: getSiteSettingFromState(
+      state,
+      'HeaderType',
+      getSiteSettingFromState(state, 'UseGradientHeader', Config.env.hasGradientHeader) ? 'gradient' : 'white',
+    ),
+  };
+};
+
+const touchableSearchBar = connect(mapStateToProps, {})(TouchableSearchBar);
+export { touchableSearchBar as TouchableSearchBar };

package/src/components/UserListPopup.js

@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { Text, View, Dimensions, Modal, ScrollView, TouchableWithoutFeedback, Platform } from 'react-native';
+import { connect } from 'react-redux';
+import { TEXT_DARK, LINEGREY, getMainBrandingColourFromState } from '../colours';
+import UserListing from './UserListing';
+import { InlineButton } from './InlineButton';
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+class UserListPopup extends Component {
+  getRenderKey(user, userKey) {
+    if (user.id) {
+      return `${user.id}${userKey}`;
+    }
+    if (user.userId) {
+      return `${user.userId}${userKey}`;
+    }
+    return userKey;
+  }
+
+  renderHeader() {
+    return (
+      <View style={styles.titleContainer}>
+        <View style={styles.titleContent}>
+          <Text style={styles.title}>{this.props.title}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  renderScrollContainer() {
+    return (
+      <ScrollView style={styles.optionsContainer} keyboardShouldPersistTaps="handled">
+        {this.props.users.map((user, userIndex) => {
+          return <UserListing user={user} key={this.getRenderKey(user, userIndex)} index={userIndex} />;
+        })}
+        <View style={styles.scrollFooterSpace} />
+      </ScrollView>
+    );
+  }
+
+  renderFooter() {
+    return (
+      <View style={styles.footer}>
+        <InlineButton onPress={this.props.onClose.bind(this)} color={this.props.colourBrandingMain} style={[styles.footerButton]}>
+          Done
+        </InlineButton>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <Modal visible={this.props.visible} transparent animationType="slide" onRequestClose={this.props.onClose}>
+        <ScrollView keyboardShouldPersistTaps="always">
+          <View style={styles.popup}>
+            <TouchableWithoutFeedback onPress={this.props.onClose}>
+              <View style={styles.popupOverlay} />
+            </TouchableWithoutFeedback>
+            <View
+              style={[
+                styles.popupContent,
+                { minHeight: SCREEN_HEIGHT - (Platform.OS === 'android' ? 175 : 150) },
+                { marginTop: 60, minHeight: SCREEN_HEIGHT - (Platform.OS === 'android' ? 85 : 60) },
+              ]}
+            >
+              {this.renderHeader()}
+              {this.renderScrollContainer()}
+              {this.renderFooter()}
+            </View>
+          </View>
+        </ScrollView>
+      </Modal>
+    );
+  }
+}
+
+const styles = {
+  popup: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  popupOverlay: {
+    position: 'absolute',
+    backgroundColor: 'rgba(19, 19, 26, .25)',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  popupContent: {
+    borderRadius: 3,
+    marginTop: 150,
+    backgroundColor: '#fff',
+    flex: 1,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+  },
+  footer: {
+    padding: 8,
+    borderTopWidth: 1,
+    borderColor: LINEGREY,
+    backgroundColor: '#fff',
+  },
+  footerButton: {
+    width: '100%',
+    height: 40,
+  },
+  titleContainer: {
+    alignSelf: 'stretch',
+    padding: 24,
+    paddingTop: 16,
+    paddingBottom: 0,
+  },
+  titleContent: {
+    borderColor: LINEGREY,
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 15,
+  },
+  title: {
+    fontSize: 15,
+    fontFamily: 'sf-semibold',
+    color: TEXT_DARK,
+  },
+  optionsContainer: {
+    flex: 1,
+    paddingVertical: 8,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const userListPopup = connect(mapStateToProps, {})(UserListPopup);
+export { userListPopup as UserListPopup };

package/src/components/UserListing.js

@@ -0,0 +1,262 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { TouchableOpacity, Text, View } from 'react-native';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { COLOUR_GREEN, TEXT_DARK, TEXT_LIGHT, getMainBrandingColourFromState, getLightBrandingColourFromState } from '../colours';
+import { Services } from '../config';
+import { ProfilePic } from './ProfilePic';
+import { InlineButton } from './InlineButton';
+import { Spinner } from './Spinner';
+import { followerActions } from '../apis';
+import { addFollower } from '../actions';
+
+class UserListing extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { pending: false };
+  }
+
+  onPress() {
+    const { hidden } = this.props.me;
+    if (hidden && _.includes(hidden, 'people')) return;
+
+    if (this.props.onPress) {
+      this.props.onPress();
+      return;
+    }
+    const user = { ...this.props.user };
+    if (_.isUndefined(user.key)) {
+      user.key = user.userId;
+    }
+    if (_.isUndefined(user.id)) {
+      user.id = user.userId;
+    }
+    Services.navigation.navigate('profile', { user });
+  }
+
+  onFollowUser() {
+    const userToSave = {
+      profilePic: this.props.user.profilePic,
+      displayName: this.props.user.displayName,
+      id: this.props.user.id,
+    };
+    this.setState({ pending: true });
+    followerActions
+      .addFollower(userToSave, this.props.myId)
+      .then(() => {
+        this.props.addFollower(userToSave);
+      })
+      .catch(() => {
+        this.setState({ pending: false });
+      });
+  }
+
+  getTimeText(input) {
+    const gug = moment.unix(input);
+    if (
+      gug.isBefore(
+        moment()
+          .local()
+          .startOf('d'),
+      )
+    ) {
+      return gug.format('D MMM');
+    }
+    return gug.format('h:mma');
+  }
+
+  getProfilePic() {
+    if (this.props.user.profilePic == null) return null;
+    let profilePic = this.props.user.profilePic;
+    if (!_.isUndefined(this.props.user.profilePicThumb) && !_.isEmpty(this.props.user.profilePicThumb)) {
+      profilePic = this.props.user.profilePicThumb;
+    } else if (this.props.user.profilePic.indexOf('.amazonaws.com/1400/') > -1) {
+      profilePic = profilePic.replace('/1400/', '/300/');
+    }
+    return profilePic;
+  }
+
+  getLastMessage(chat) {
+    if (typeof chat.lastMessage === 'string') {
+      return chat.lastMessage;
+    }
+    // TODO recognise user name of last message
+    return chat.lastMessage.text;
+  }
+
+  renderFollowButton() {
+    if (this.props.user.privateChat) {
+      return (
+        <View style={{ justifyContent: 'flex-start' }}>
+          <Text style={[styles.chatTimeStamp, this.props.user.unread > 0 && { color: TEXT_DARK, fontFamily: 'sf-bold' }]}>
+            {this.getTimeText(this.props.user.Changed)}
+          </Text>
+          <View style={[{ flexDirection: 'row-reverse', marginTop: 2 }, this.props.user.unread === 0 && { opacity: 0 }]}>
+            <View style={styles.counter}>
+              <Text style={styles.counterText}>{this.props.user.unread}</Text>
+            </View>
+          </View>
+        </View>
+      );
+    }
+
+    if (!this.props.showFriendsButton) {
+      return null;
+    }
+
+    // self
+    if (this.props.myId === this.props.user.id) {
+      return null;
+    }
+
+    // already following
+    if (this.props.isFollowing) {
+      return (
+        <InlineButton
+          color={this.props.colourBrandingLight}
+          style={styles.friendsButton}
+          textStyle={{ color: this.props.colourBrandingMain }}
+          disabled
+        >
+          Friends
+        </InlineButton>
+      );
+    }
+
+    // in process of following
+    if (this.state.pending) {
+      return (
+        <InlineButton style={[styles.friendsButton, { borderColor: this.props.colourBrandingMain, borderWidth: 1 }]} disabled noText>
+          <Spinner size="small" color={this.props.colourBrandingMain} />
+        </InlineButton>
+      );
+    }
+
+    // not following yet
+    return (
+      <InlineButton
+        onPress={this.onFollowUser.bind(this)}
+        color="#fff"
+        style={[styles.friendsButton, { borderColor: this.props.colourBrandingMain, borderWidth: 1 }]}
+        textStyle={{ color: this.props.colourBrandingMain }}
+      >
+        Add friend
+      </InlineButton>
+    );
+  }
+
+  renderStatusText() {
+    if (!this.props.statusText) {
+      return null;
+    }
+    return <Text style={styles.statusText}>{this.props.statusText}</Text>;
+  }
+
+  render() {
+    return (
+      <View style={this.props.containerStyle}>
+        <TouchableOpacity activeOpacity={0.9} onPress={this.onPress.bind(this)} disabled={this.props.onPressDisabled}>
+          <View style={[styles.listItem, this.props.listItemStyle]}>
+            {this.renderStatusText()}
+            <ProfilePic ProfilePic={this.getProfilePic()} Diameter={42} />
+            <View style={[styles.fill, styles.flexRowReverse, styles.alignCenter]}>
+              {this.props.rightContent}
+              {this.renderFollowButton()}
+              <View style={styles.fill}>
+                <View style={styles.listItemTextContainer}>
+                  <Text style={styles.contactName} numberOfLines={1}>
+                    {this.props.user.displayName}
+                  </Text>
+                  {this.props.user.privateChat && (
+                    <Text style={styles.chatLastMessage} numberOfLines={1}>
+                      {this.getLastMessage(this.props.user)}
+                    </Text>
+                  )}
+                  {this.props.subText}
+                </View>
+              </View>
+            </View>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  listItem: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  listItemTextContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    paddingLeft: 16,
+  },
+  contactName: {
+    fontSize: 15,
+    fontFamily: 'sf-semibold',
+    backgroundColor: 'rgba(255,255,255,0)',
+    color: TEXT_DARK,
+  },
+  statusText: {
+    position: 'absolute',
+    top: 0,
+    left: 82,
+    fontFamily: 'sf-semibold',
+    fontSize: 12,
+    color: TEXT_LIGHT,
+  },
+  fill: {
+    flex: 1,
+  },
+  alignCenter: {
+    alignItems: 'center',
+  },
+  flexRowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  friendsButton: {
+    width: 100,
+  },
+  counter: {
+    borderRadius: 10,
+    height: 20,
+    justifyContent: 'center',
+    minWidth: 20,
+    paddingHorizontal: 4,
+    backgroundColor: COLOUR_GREEN,
+  },
+  counterText: {
+    color: '#fff',
+    fontSize: 12,
+    fontFamily: 'sf-semibold',
+    textAlign: 'center',
+  },
+  chatTimeStamp: {
+    fontSize: 10,
+    fontFamily: 'sf-semibold',
+    color: TEXT_LIGHT,
+  },
+  chatLastMessage: {
+    fontSize: 13,
+    fontFamily: 'sf-medium',
+    color: TEXT_LIGHT,
+    marginRight: 5,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    me: state.user,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    colourBrandingLight: getLightBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, { addFollower })(UserListing);

package/src/components/WarningPopup.js

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+import { View, Text, Dimensions } from 'react-native';
+import { connect } from 'react-redux';
+import { Pl60Icon } from '../fonts';
+import { COLOUR_GREEN, TEXT_DARK, getMainBrandingColourFromState } from '../colours';
+import { MiddlePopup } from './MiddlePopup';
+import { InlineButton } from './InlineButton';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+
+class WarningPopup extends PureComponent {
+  render() {
+    return (
+      <MiddlePopup visible={this.props.visible} onClose={this.props.onClose} style={styles.popup}>
+        {this.props.isSuccess && <Pl60Icon style={styles.icon} name="circleoutlined" />}
+        <Text style={styles.text}>{this.props.confirmText}</Text>
+        <View style={{ marginTop: 16, paddingHorizontal: 24 }}>
+          <Text style={[styles.infoText, this.props.infoTextStyle]}>{this.props.infoText}</Text>
+        </View>
+        <InlineButton
+          onPress={this.props.onClose}
+          color={this.props.ctaButton ? this.props.colourBrandingMain : '#fff'}
+          style={styles.button}
+          textStyle={[styles.closeText, { color: this.props.ctaButton ? '#fff' : this.props.colourBrandingMain }]}
+          large
+        >
+          {!_.isUndefined(this.props.buttonText) ? this.props.buttonText : 'Close'}
+        </InlineButton>
+      </MiddlePopup>
+    );
+  }
+}
+
+const styles = {
+  popup: {
+    width: 'auto',
+    maxWidth: SCREEN_WIDTH - 34,
+    paddingVertical: 16,
+  },
+  icon: {
+    marginTop: 20,
+    paddingBottom: 16,
+    fontSize: 52,
+    color: COLOUR_GREEN,
+  },
+  text: {
+    fontFamily: 'sf-bold',
+    fontSize: 24,
+    lineHeight: 24,
+    color: TEXT_DARK,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  infoText: {
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    lineHeight: 22,
+    color: TEXT_DARK,
+    textAlign: 'left',
+  },
+  button: {
+    width: 130,
+    marginTop: 20,
+  },
+  closeText: {
+    fontFamily: 'sf-medium',
+    fontSize: 15,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const warningPopup = connect(mapStateToProps, {})(WarningPopup);
+export { warningPopup as WarningPopup };