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

package/src/components/notifications/GroupInviteAction.js

@@ -1,295 +1,393 @@
-import React, { Component } from 'react';
-import { ScrollView, Text, View, ImageBackground, Dimensions } from 'react-native';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import moment from 'moment';
-import { LinearGradient } from 'expo-linear-gradient';
+import React, { Component } from "react";
 import {
-  getImageSource,
-  TEXT_DARK,
-  TEXT_BLUEGREY,
-  getFirstName,
-  COLOUR_TRANSPARENT,
-  LINEGREY,
-  getMainBrandingColourFromState,
-  StatusBarHeight,
-} from '../../js';
-import { Spinner, ProfilePic, MiddlePopup, InlineButton, BackButton } from '../common';
-import { handleGroupInvite } from '../../actions';
-import { values } from '../../values.config';
+	ScrollView,
+	Text,
+	View,
+	ImageBackground,
+	Dimensions,
+} from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import moment from "moment";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+	getImageSource,
+	TEXT_DARK,
+	TEXT_BLUEGREY,
+	getFirstName,
+	COLOUR_TRANSPARENT,
+	LINEGREY,
+	getMainBrandingColourFromState,
+	StatusBarHeight,
+} from "../../js";
+import {
+	Spinner,
+	ProfilePic,
+	MiddlePopup,
+	InlineButton,
+	BackButton,
+} from "../common";
+import { handleGroupInvite } from "../../actions";
+import { values } from "../../values.config";
 
-const SCREEN_HEIGHT = Dimensions.get('window').height;
+const SCREEN_HEIGHT = Dimensions.get("window").height;
 const CARD_IMAGE_HEIGHT = SCREEN_HEIGHT * 0.3;
-const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_WIDTH = Dimensions.get("window").width;
 
 class GroupInviteAction extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      group: {},
-      loading: false,
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			group: {},
+			loading: false,
+		};
+	}
 
-  UNSAFE_componentWillMount() {
-    // this.loadEvent();
-    this.setState({ group: this.props.group });
-  }
+	UNSAFE_componentWillMount() {
+		// this.loadEvent();
+		this.setState({ group: this.props.group });
+	}
 
-  componentWillUnmount() {
-    this.props.onClose();
-  }
+	componentWillUnmount() {
+		this.props.onClose();
+	}
 
-  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] : ""}`
+			: "";
+	}
 
-  acceptInvite() {
-    if (this.state.loading) {
-      return;
-    }
-    this.setState({ loading: true });
-    this.props.handleGroupInvite(this.state.group, true, this.props.user.uid);
-  }
+	acceptInvite() {
+		if (this.state.loading) {
+			return;
+		}
+		this.setState({ loading: true });
+		this.props.handleGroupInvite(this.state.group, true, this.props.user.uid);
+	}
 
-  declineInvite() {
-    if (!this.state.loading) {
-      this.props.handleGroupInvite(this.state.group, false);
-      this.props.onClose();
-    }
-  }
+	declineInvite() {
+		if (!this.state.loading) {
+			this.props.handleGroupInvite(this.state.group, false);
+			this.props.onClose();
+		}
+	}
 
-  backClose() {
-    // if (!this.state.loading) {
-    this.props.onClose();
-    // }
-  }
+	backClose() {
+		// if (!this.state.loading) {
+		this.props.onClose();
+		// }
+	}
 
-  renderButtons() {
-    if (this.state.loading) {
-      return (
-        <View
-          style={{
-            paddingTop: 15,
-            flexDirection: 'row',
-            width: '100%',
-            justifyContent: 'space-between',
-            borderTopWidth: 1,
-            borderTopColor: LINEGREY,
-          }}
-        >
-          <Spinner />
-        </View>
-      );
-    }
-    return (
-      <View
-        style={{
-          paddingTop: 15,
-          flexDirection: 'row',
-          width: '100%',
-          justifyContent: 'space-between',
-          borderTopWidth: 1,
-          borderTopColor: LINEGREY,
-        }}
-      >
-        <InlineButton
-          large
-          color="#fff"
-          style={{ borderWidth: 1, borderColor: this.props.colourBrandingMain, width: SCREEN_WIDTH / 2 - 24 }}
-          onPress={() => {
-            this.declineInvite();
-          }}
-          textStyle={{ color: this.props.colourBrandingMain }}
-        >
-          Decline Invite
-        </InlineButton>
-        <InlineButton
-          large
-          color={this.props.colourBrandingMain}
-          style={{ borderWidth: 1, borderColor: this.props.colourBrandingMain, width: SCREEN_WIDTH / 2 - 24 }}
-          onPress={() => {
-            this.acceptInvite();
-          }}
-        >
-          {`Join ${_.capitalize(values.entityName)}`}
-        </InlineButton>
-      </View>
-    );
-  }
+	renderButtons() {
+		if (this.state.loading) {
+			return (
+				<View
+					style={{
+						paddingTop: 15,
+						flexDirection: "row",
+						width: "100%",
+						justifyContent: "space-between",
+						borderTopWidth: 1,
+						borderTopColor: LINEGREY,
+					}}
+				>
+					<Spinner />
+				</View>
+			);
+		}
+		return (
+			<View
+				style={{
+					paddingTop: 15,
+					flexDirection: "row",
+					width: "100%",
+					justifyContent: "space-between",
+					borderTopWidth: 1,
+					borderTopColor: LINEGREY,
+				}}
+			>
+				<InlineButton
+					large
+					color="#fff"
+					style={{
+						borderWidth: 1,
+						borderColor: this.props.colourBrandingMain,
+						width: SCREEN_WIDTH / 2 - 24,
+					}}
+					onPress={() => {
+						this.declineInvite();
+					}}
+					textStyle={{ color: this.props.colourBrandingMain }}
+				>
+					Decline Invite
+				</InlineButton>
+				<InlineButton
+					large
+					color={this.props.colourBrandingMain}
+					style={{
+						borderWidth: 1,
+						borderColor: this.props.colourBrandingMain,
+						width: SCREEN_WIDTH / 2 - 24,
+					}}
+					onPress={() => {
+						this.acceptInvite();
+					}}
+				>
+					{`Join ${_.capitalize(values.entityName)}`}
+				</InlineButton>
+			</View>
+		);
+	}
 
-  renderPeople() {
-    // const source = _.filter([...this.state.group.Audience, ...this.state.group.Invites], item => {
-    //     return item != null && item.userId !== this.props.user.uid;
-    // });
-    const source = _.filter([...this.state.group.Audience], item => {
-      return item != null && item.userId !== this.props.user.uid;
-    });
-    if (_.isEmpty(source)) {
-      return null;
-    }
-    return (
-      <View style={{ borderTopColor: LINEGREY, borderTopWidth: 1, paddingTop: 8, paddingBottom: 16 }}>
-        <Text style={[styles.normalText, { fontFamily: 'sf-semibold' }]}>{`Members (${source.length})`}</Text>
-        {source.map(user => {
-          return (
-            <View key={user.userId} style={{ flexDirection: 'row', position: 'relative', marginTop: 8, alignItems: 'center' }}>
-              <ProfilePic Diameter={40} ProfilePic={user.profilePic} />
-              <Text style={[styles.normalText, { fontFamily: 'sf-semibold', marginTop: 0, marginLeft: 14, lineHeight: 16 }]}>
-                {getFirstName(user.displayName)}
-              </Text>
-            </View>
-          );
-        })}
-      </View>
-    );
-  }
+	renderPeople() {
+		// const source = _.filter([...this.state.group.Audience, ...this.state.group.Invites], item => {
+		//     return item != null && item.userId !== this.props.user.uid;
+		// });
+		const source = _.filter([...this.state.group.Audience], (item) => {
+			return item != null && item.userId !== this.props.user.uid;
+		});
+		if (_.isEmpty(source)) {
+			return null;
+		}
+		return (
+			<View
+				style={{
+					borderTopColor: LINEGREY,
+					borderTopWidth: 1,
+					paddingTop: 8,
+					paddingBottom: 16,
+				}}
+			>
+				<Text
+					style={[styles.normalText, { fontFamily: "sf-semibold" }]}
+				>{`Members (${source.length})`}</Text>
+				{source.map((user) => {
+					return (
+						<View
+							key={user.userId}
+							style={{
+								flexDirection: "row",
+								position: "relative",
+								marginTop: 8,
+								alignItems: "center",
+							}}
+						>
+							<ProfilePic Diameter={40} ProfilePic={user.profilePic} />
+							<Text
+								style={[
+									styles.normalText,
+									{
+										fontFamily: "sf-semibold",
+										marginTop: 0,
+										marginLeft: 14,
+										lineHeight: 16,
+									},
+								]}
+							>
+								{getFirstName(user.displayName)}
+							</Text>
+						</View>
+					);
+				})}
+			</View>
+		);
+	}
 
-  render() {
-    if (_.isEmpty(this.state.group)) {
-      return null;
-    }
-    if (this.props.showingAction) {
-      return (
-        <MiddlePopup
-          onClose={() => {
-            this.backClose();
-          }}
-        >
-          <View style={styles.popupContainer}>
-            {/* Top Back Button */}
-            <View style={styles.backButton}>
-              <View style={styles.headerContent}>
-                <BackButton
-                  onPress={() => {
-                    this.backClose();
-                  }}
-                  style={{
-                    marginLeft: 16,
-                  }}
-                />
-              </View>
-            </View>
-            <ScrollView style={styles.scroll} keyboardShouldPersistTaps="always">
-              <View style={[styles.mainHeader, this.state.group.Image == null && { height: 80 }]}>
-                <ImageBackground
-                  Id="image"
-                  style={[styles.image, { backgroundColor: TEXT_BLUEGREY }]}
-                  key={this.state.group.Id}
-                  source={getImageSource(this.state.group.Image)}
-                >
-                  <LinearGradient
-                    style={styles.gradientOverlay}
-                    colors={['rgba(0,0,0,0.7)', COLOUR_TRANSPARENT]}
-                    start={{ x: 0, y: 0 }}
-                    end={{ x: 0, y: 1 }}
-                    locations={[0, 0.5]}
-                  />
-                </ImageBackground>
-              </View>
-              <View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
-                <View style={styles.titleContainer}>
-                  <Text style={styles.eventTitle}>{this.state.group.Title}</Text>
-                  <View style={{ flexDirection: 'row', marginTop: 2, paddingBottom: 8 }}>
-                    <Text style={[styles.eventTitle, { fontFamily: 'sf-semibold', fontSize: 14 }]}>Invited on</Text>
-                    <Text style={[styles.eventTitle, { marginLeft: 24, fontSize: 14, fontFamily: 'sf-regular' }]}>
-                      {moment(this.state.group.Timestamp).format('MMMM Do, YYYY')}
-                    </Text>
-                  </View>
-                </View>
-                {!_.isEmpty(this.state.group.Description) && (
-                  <View style={{ borderTopColor: LINEGREY, borderTopWidth: 1, paddingTop: 8, paddingBottom: 16 }}>
-                    <Text style={[styles.normalText, { fontFamily: 'sf-semibold' }]}>Description</Text>
-                    <Text style={[styles.normalText]}>{this.state.group.Description}</Text>
-                  </View>
-                )}
-                {this.renderPeople()}
-              </View>
-            </ScrollView>
-            <View style={styles.buttonContainer}>{this.renderButtons()}</View>
-          </View>
-        </MiddlePopup>
-      );
-    }
-    return null;
-  }
+	render() {
+		if (_.isEmpty(this.state.group)) {
+			return null;
+		}
+		if (this.props.showingAction) {
+			return (
+				<MiddlePopup
+					onClose={() => {
+						this.backClose();
+					}}
+				>
+					<View style={styles.popupContainer}>
+						{/* Top Back Button */}
+						<View style={styles.backButton}>
+							<View style={styles.headerContent}>
+								<BackButton
+									onPress={() => {
+										this.backClose();
+									}}
+									style={{
+										marginLeft: 16,
+									}}
+								/>
+							</View>
+						</View>
+						<ScrollView
+							style={styles.scroll}
+							keyboardShouldPersistTaps="always"
+						>
+							<View
+								style={[
+									styles.mainHeader,
+									this.state.group.Image == null && { height: 80 },
+								]}
+							>
+								<ImageBackground
+									Id="image"
+									style={[styles.image, { backgroundColor: TEXT_BLUEGREY }]}
+									key={this.state.group.Id}
+									source={getImageSource(this.state.group.Image)}
+								>
+									<LinearGradient
+										style={styles.gradientOverlay}
+										colors={["rgba(0,0,0,0.7)", COLOUR_TRANSPARENT]}
+										start={{ x: 0, y: 0 }}
+										end={{ x: 0, y: 1 }}
+										locations={[0, 0.5]}
+									/>
+								</ImageBackground>
+							</View>
+							<View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
+								<View style={styles.titleContainer}>
+									<Text style={styles.eventTitle}>
+										{this.state.group.Title}
+									</Text>
+									<View
+										style={{
+											flexDirection: "row",
+											marginTop: 2,
+											paddingBottom: 8,
+										}}
+									>
+										<Text
+											style={[
+												styles.eventTitle,
+												{ fontFamily: "sf-semibold", fontSize: 14 },
+											]}
+										>
+											Invited on
+										</Text>
+										<Text
+											style={[
+												styles.eventTitle,
+												{
+													marginLeft: 24,
+													fontSize: 14,
+													fontFamily: "sf-regular",
+												},
+											]}
+										>
+											{moment(this.state.group.Timestamp).format(
+												"MMMM Do, YYYY",
+											)}
+										</Text>
+									</View>
+								</View>
+								{!_.isEmpty(this.state.group.Description) && (
+									<View
+										style={{
+											borderTopColor: LINEGREY,
+											borderTopWidth: 1,
+											paddingTop: 8,
+											paddingBottom: 16,
+										}}
+									>
+										<Text
+											style={[styles.normalText, { fontFamily: "sf-semibold" }]}
+										>
+											Description
+										</Text>
+										<Text style={[styles.normalText]}>
+											{this.state.group.Description}
+										</Text>
+									</View>
+								)}
+								{this.renderPeople()}
+							</View>
+						</ScrollView>
+						<View style={styles.buttonContainer}>{this.renderButtons()}</View>
+					</View>
+				</MiddlePopup>
+			);
+		}
+		return null;
+	}
 }
 
 const styles = {
-  backButton: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    zIndex: 10,
-    elevation: 10,
-    height: 70,
-  },
-  headerContent: {
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-    flex: 1,
-    paddingTop: StatusBarHeight(10),
-  },
-  popupContainer: {
-    borderRadius: 0,
-    backgroundColor: '#fff',
-    width: SCREEN_WIDTH,
-    flex: 1,
-  },
-  scroll: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    paddingBottom: 16,
-    paddingHorizontal: 16,
-  },
-  mainHeader: {
-    position: 'relative',
-    height: CARD_IMAGE_HEIGHT,
-    width: SCREEN_WIDTH,
-  },
-  gradientOverlay: {
-    flex: 1,
-  },
-  image: {
-    backgroundColor: '#fff',
-    position: 'relative',
-    width: undefined,
-    height: undefined,
-    flex: 1,
-  },
-  titleContainer: {
-    /* flex: 1,
+	backButton: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		zIndex: 10,
+		elevation: 10,
+		height: 70,
+	},
+	headerContent: {
+		alignSelf: "stretch",
+		flexDirection: "row",
+		flex: 1,
+		paddingTop: StatusBarHeight(10),
+	},
+	popupContainer: {
+		borderRadius: 0,
+		backgroundColor: "#fff",
+		width: SCREEN_WIDTH,
+		flex: 1,
+	},
+	scroll: {
+		flex: 1,
+		backgroundColor: "#fff",
+	},
+	buttonContainer: {
+		paddingBottom: 16,
+		paddingHorizontal: 16,
+	},
+	mainHeader: {
+		position: "relative",
+		height: CARD_IMAGE_HEIGHT,
+		width: SCREEN_WIDTH,
+	},
+	gradientOverlay: {
+		flex: 1,
+	},
+	image: {
+		backgroundColor: "#fff",
+		position: "relative",
+		width: undefined,
+		height: undefined,
+		flex: 1,
+	},
+	titleContainer: {
+		/* flex: 1,
         flexDirection: 'row-reverse', */
-    paddingTop: 20,
-  },
-  eventTitle: {
-    fontFamily: 'sf-bold',
-    fontSize: 24,
-    lineHeight: 32,
-    color: TEXT_DARK,
-    backgroundColor: 'transparent',
-  },
-  normalText: {
-    fontFamily: 'sf-regular',
-    fontSize: 14,
-    lineHeight: 20,
-    color: TEXT_DARK,
-    marginTop: 6,
-    backgroundColor: 'transparent',
-  },
+		paddingTop: 20,
+	},
+	eventTitle: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		lineHeight: 32,
+		color: TEXT_DARK,
+		backgroundColor: "transparent",
+	},
+	normalText: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		lineHeight: 20,
+		color: TEXT_DARK,
+		marginTop: 6,
+		backgroundColor: "transparent",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    user: state.user,
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		user: state.user,
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
-export default connect(mapStateToProps, { handleGroupInvite })(GroupInviteAction);
+export default connect(mapStateToProps, { handleGroupInvite })(
+	GroupInviteAction,
+);