@plusscommunities/pluss-core-app 8.0.0 → 8.0.1-auth.0

package/src/components/UserListing.js

@@ -1,262 +1,297 @@
-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';
+import React, { Component } from "react";
+import _ from "lodash";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "./Text";
+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 };
-  }
+	constructor(props) {
+		super(props);
+		this.state = { pending: false };
+	}
 
-  onPress() {
-    const { hidden } = this.props.me;
-    if (hidden && _.includes(hidden, 'people')) return;
+	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 });
-  }
+		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 });
-      });
-  }
+	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');
-  }
+	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;
-  }
+	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;
-  }
+	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>
-      );
-    }
+	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;
-    }
+		if (!this.props.showFriendsButton) {
+			return null;
+		}
 
-    // self
-    if (this.props.myId === this.props.user.id) {
-      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>
-      );
-    }
+		// 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>
-      );
-    }
+		// 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>
-    );
-  }
+		// 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>;
-  }
+	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>
-    );
-  }
+	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,
-  },
+	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),
-  };
+const mapStateToProps = (state) => {
+	return {
+		me: state.user,
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		colourBrandingLight: getLightBrandingColourFromState(state),
+	};
 };
 
 export default connect(mapStateToProps, { addFollower })(UserListing);