@plusscommunities/pluss-circles-app-groups 8.0.9-beta.3 → 8.0.10

package/src/components/notifications/GroupInvite.js

@@ -1,182 +1,183 @@
 import React, { Component } from "react";
-import { Text, View, ImageBackground, TouchableOpacity } from "react-native";
+import { View, ImageBackground, TouchableOpacity } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import _ from "lodash";
 import {
-  TEXT_LIGHT,
-  TEXT_DARK,
-  getFirstName,
-  getMainBrandingColourFromState,
+	TEXT_LIGHT,
+	TEXT_DARK,
+	getFirstName,
+	getMainBrandingColourFromState,
 } from "../../js";
-import { FontAwesome } from "../common"
+import { FontAwesome } from "../common";
 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}>
-              <FontAwesome
-                name="users"
-                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}>
+							<FontAwesome
+								name="users"
+								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),
-  };
+	return {
+		user: state.user,
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 export default connect(mapStateToProps, {})(GroupInvite);

package/src/components/notifications/GroupInviteAction.js

@@ -1,11 +1,6 @@
 import React, { Component } from "react";
-import {
-	ScrollView,
-	Text,
-	View,
-	ImageBackground,
-	Dimensions,
-} from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import { ScrollView, View, ImageBackground, Dimensions } from "react-native";
 import { connect } from "react-redux";
 import _ from "lodash";
 import moment from "moment";

package/src/components/notifications/GroupMessage.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import _ from "lodash";
 import { ProfilePic } from "../common";