@plusscommunities/pluss-circles-app 8.0.4 → 8.0.6-beta.0

package/src/components/notifications/GroupInvite.js

@@ -1,154 +1,182 @@
-import React, { Component } from 'react';
-import { Text, View, ImageBackground, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import { TEXT_LIGHT, TEXT_DARK, getFirstName, getMainBrandingColourFromState } from '../../js';
-import { Pl60Icon } from '../../assets/fonts';
-import GroupInviteAction from './GroupInviteAction';
+import React, { Component } from "react";
+import { Text, View, ImageBackground, TouchableOpacity } from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import {
+	TEXT_LIGHT,
+	TEXT_DARK,
+	getFirstName,
+	getMainBrandingColourFromState,
+} from "../../js";
+import { Pl60Icon } from "../../assets/fonts";
+import GroupInviteAction from "./GroupInviteAction";
 
 class GroupInvite extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      event: {},
-      showingAction: false,
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			event: {},
+			showingAction: false,
+		};
+	}
 
-  UNSAFE_componentWillMount() {
-    this.setState({ event: this.props.event });
-  }
+	UNSAFE_componentWillMount() {
+		this.setState({ event: this.props.event });
+	}
 
-  onPressEvent() {
-    this.setState({ showingAction: true });
-  }
+	onPressEvent() {
+		this.setState({ showingAction: true });
+	}
 
-  getShortName(name) {
-    if (!name) {
-      return name;
-    }
-    const names = name.split(',')[0].match(/\b\w/g);
-    return names && names.length > 0 ? `${names[0]}${names.length > 1 ? names[names.length - 1] : ''}` : '';
-  }
+	getShortName(name) {
+		if (!name) {
+			return name;
+		}
+		const names = name.split(",")[0].match(/\b\w/g);
+		return names && names.length > 0
+			? `${names[0]}${names.length > 1 ? names[names.length - 1] : ""}`
+			: "";
+	}
 
-  renderInviteAction() {
-    return (
-      <GroupInviteAction
-        group={this.state.event}
-        onClose={() => {
-          this.setState({ showingAction: false });
-        }}
-        showingAction={this.state.showingAction}
-      />
-    );
-  }
+	renderInviteAction() {
+		return (
+			<GroupInviteAction
+				group={this.state.event}
+				onClose={() => {
+					this.setState({ showingAction: false });
+				}}
+				showingAction={this.state.showingAction}
+			/>
+		);
+	}
 
-  render() {
-    if (_.isEmpty(this.state.event)) {
-      return null;
-    }
-    return (
-      <View>
-        {this.renderInviteAction()}
-        {this.props.showHeader && (
-          <View style={styles.sectionTitleContainer}>
-            <Text style={styles.sectionTitle} allowFontScaling={false}>
-              {this.props.index === 0 ? 'Invitations' : ''}
-            </Text>
-          </View>
-        )}
-        <TouchableOpacity onPress={this.onPressEvent.bind(this)} style={[styles.inviteCard, this.props.index === 0 && { marginLeft: 16 }]}>
-          <ImageBackground
-            style={[styles.inviteImage, { backgroundColor: this.props.colourBrandingMain, justifyContent: 'center', alignItems: 'center' }]}
-            imageStyle={{ borderRadius: 5 }}
-            source={this.state.event.Image && { uri: this.state.event.Image }}
-          >
-            {!this.state.event.Image && this.state.event.Title && (
-              <Text style={styles.groupText}>{this.getShortName(this.state.event.Title)}</Text>
-            )}
-            <View style={styles.iconWrapper}>
-              <Pl60Icon name="friends" style={[styles.iconStyle, { color: this.props.colourBrandingMain }]} />
-            </View>
-          </ImageBackground>
-          <View>
-            <Text numberOfLines={1} style={styles.inviteTitle}>
-              {this.state.event.Title}
-            </Text>
-            <Text numberOfLines={1} style={styles.inviteText}>
-              {`${getFirstName(this.props.invite.InvitedBy)} invited you`}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  }
+	render() {
+		if (_.isEmpty(this.state.event)) {
+			return null;
+		}
+		return (
+			<View>
+				{this.renderInviteAction()}
+				{this.props.showHeader && (
+					<View style={styles.sectionTitleContainer}>
+						<Text style={styles.sectionTitle} allowFontScaling={false}>
+							{this.props.index === 0 ? "Invitations" : ""}
+						</Text>
+					</View>
+				)}
+				<TouchableOpacity
+					onPress={this.onPressEvent.bind(this)}
+					style={[
+						styles.inviteCard,
+						this.props.index === 0 && { marginLeft: 16 },
+					]}
+				>
+					<ImageBackground
+						style={[
+							styles.inviteImage,
+							{
+								backgroundColor: this.props.colourBrandingMain,
+								justifyContent: "center",
+								alignItems: "center",
+							},
+						]}
+						imageStyle={{ borderRadius: 5 }}
+						source={this.state.event.Image && { uri: this.state.event.Image }}
+					>
+						{!this.state.event.Image && this.state.event.Title && (
+							<Text style={styles.groupText}>
+								{this.getShortName(this.state.event.Title)}
+							</Text>
+						)}
+						<View style={styles.iconWrapper}>
+							<Pl60Icon
+								name="friends"
+								style={[
+									styles.iconStyle,
+									{ color: this.props.colourBrandingMain },
+								]}
+							/>
+						</View>
+					</ImageBackground>
+					<View>
+						<Text numberOfLines={1} style={styles.inviteTitle}>
+							{this.state.event.Title}
+						</Text>
+						<Text numberOfLines={1} style={styles.inviteText}>
+							{`${getFirstName(this.props.invite.InvitedBy)} invited you`}
+						</Text>
+					</View>
+				</TouchableOpacity>
+			</View>
+		);
+	}
 }
 
 const styles = {
-  inviteCard: {
-    width: 125,
-    marginRight: 28,
-  },
-  inviteImage: {
-    height: 125,
-    width: 125,
-    borderRadius: 5,
-  },
-  inviteTitle: {
-    marginTop: 8,
-    fontFamily: 'sf-semibold',
-    fontSize: 14,
-    lineHeight: 16,
-    color: TEXT_DARK,
-    backgroundColor: 'transparent',
-  },
-  inviteText: {
-    fontFamily: 'sf-regular',
-    fontSize: 12,
-    lineHeight: 16,
-    color: TEXT_LIGHT,
-    backgroundColor: 'transparent',
-  },
-  groupText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 24,
-    color: '#fff',
-    backgroundColor: 'transparent',
-  },
-  iconWrapper: {
-    height: 24,
-    width: 24,
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    position: 'absolute',
-    bottom: 5,
-    right: 5,
-    zIndex: 2,
-    elevation: 2,
-    justifyContent: 'center',
-  },
-  iconStyle: {
-    fontSize: 16,
-    alignSelf: 'center',
-  },
-  sectionTitleContainer: {
-    height: 30,
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-    justifyContent: 'center',
-  },
-  sectionTitle: {
-    fontSize: 16,
-    fontFamily: 'sf-semibold',
-    color: TEXT_DARK,
-  },
+	inviteCard: {
+		width: 125,
+		marginRight: 28,
+	},
+	inviteImage: {
+		height: 125,
+		width: 125,
+		borderRadius: 5,
+	},
+	inviteTitle: {
+		marginTop: 8,
+		fontFamily: "sf-semibold",
+		fontSize: 14,
+		lineHeight: 16,
+		color: TEXT_DARK,
+		backgroundColor: "transparent",
+	},
+	inviteText: {
+		fontFamily: "sf-regular",
+		fontSize: 12,
+		lineHeight: 16,
+		color: TEXT_LIGHT,
+		backgroundColor: "transparent",
+	},
+	groupText: {
+		fontFamily: "sf-semibold",
+		fontSize: 24,
+		color: "#fff",
+		backgroundColor: "transparent",
+	},
+	iconWrapper: {
+		height: 24,
+		width: 24,
+		backgroundColor: "#fff",
+		borderRadius: 12,
+		position: "absolute",
+		bottom: 5,
+		right: 5,
+		zIndex: 2,
+		elevation: 2,
+		justifyContent: "center",
+	},
+	iconStyle: {
+		fontSize: 16,
+		alignSelf: "center",
+	},
+	sectionTitleContainer: {
+		height: 30,
+		paddingHorizontal: 16,
+		paddingBottom: 8,
+		justifyContent: "center",
+	},
+	sectionTitle: {
+		fontSize: 16,
+		fontFamily: "sf-semibold",
+		color: TEXT_DARK,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    user: state.user,
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		user: state.user,
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 export default connect(mapStateToProps, {})(GroupInvite);