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

package/src/components/groups/EditGroup.js

@@ -1,548 +1,617 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { Platform, Dimensions, ImageBackground, Text, ScrollView, TouchableOpacity, View, KeyboardAvoidingView } from 'react-native';
-import { Icon } from '@rneui/themed';
+import React, { Component } from "react";
+import _ from "lodash";
+import { connect } from "react-redux";
 import {
-  ProfilePic,
-  FormCard,
-  FormCardSection,
-  Header,
-  Spinner,
-  ImageUploader,
-  InlineButton,
-  StickyFooter,
-  TextStyle,
-  UserListing,
-} from '../common';
-import { LINEGREY, BG_GREY, getMainBrandingColourFromState } from '../../js/Colors';
-import NavigationService from '../../js/NavigationService';
-import { TEXT_LIGHT } from '../../js/index';
-import { createGroup, loadGroups, editGroup } from '../../actions';
-import EventInvitePopup from '../events/EventInvitePopup';
-import { values } from '../../values.config';
-import { Colours } from '@plusscommunities/pluss-core-app';
-
-const PHOTO_WIDTH = Dimensions.get('window').width - 48;
+	Platform,
+	Dimensions,
+	ImageBackground,
+	Text,
+	ScrollView,
+	TouchableOpacity,
+	View,
+	KeyboardAvoidingView,
+} from "react-native";
+import { Icon } from "@rneui/themed";
+import {
+	ProfilePic,
+	FormCard,
+	FormCardSection,
+	Header,
+	Spinner,
+	ImageUploader,
+	InlineButton,
+	StickyFooter,
+	TextStyle,
+	UserListing,
+} from "../common";
+import {
+	LINEGREY,
+	BG_GREY,
+	getMainBrandingColourFromState,
+} from "../../js/Colors";
+import NavigationService from "../../js/NavigationService";
+import { TEXT_LIGHT } from "../../js/index";
+import { createGroup, loadGroups, editGroup } from "../../actions";
+import EventInvitePopup from "../events/EventInvitePopup";
+import { values } from "../../values.config";
+import { Colours } from "@plusscommunities/pluss-core-app";
+
+const PHOTO_WIDTH = Dimensions.get("window").width - 48;
 
 class EditGroup extends Component {
-  state = {
-    group: null,
-    message: '',
-    title: '',
-    error: null,
-
-    submittingGroup: false,
-    groupImage: null,
-
-    showUserSelect: false,
-    allUsers: [],
-    audience: [],
-    invites: [],
-    contacts: [],
-    selected: [],
-    pending: [],
-    usersToAdd: [],
-    usersToRemove: [],
-    searchText: '',
-    showErrors: false,
-
-    inviteOpen: false,
-  };
-
-  componentDidMount() {
-    this.parseGroup(this.props.groups);
-  }
-
-  onPressBack() {
-    NavigationService.goBack();
-  }
-
-  onSubmitSend() {
-    this.setState({ error: null });
-    if (!this.props.connected) {
-      this.setState({ error: 'No internet connection detected.' });
-      return;
-    }
-    if (this.state.submittingGroup || this.state.uploadingImage) {
-      return;
-    }
-
-    this.setState({ submittingGroup: true });
-
-    const group = {
-      ...this.state.group,
-      Title: this.state.title,
-      CreatorId: this.state.group.CreatorId,
-    };
-
-    if (this.state.groupImage != null && !_.isEmpty(this.state.groupImage)) {
-      group.Image = this.state.groupImage;
-    }
-
-    this.props.editGroup(group, this.state.usersToAdd, this.state.usersToRemove);
-    this.onPressBack();
-  }
-
-  onChangeTitle(value) {
-    this.setState({ title: value });
-  }
-
-  onUploadStarted = () => {
-    this.setState({
-      uploadingImage: true,
-    });
-  };
-
-  onUploadSuccess = uri => {
-    this.setState({
-      uploadingImage: false,
-      groupImage: uri.replace('/general/', '/general1400/'),
-    });
-  };
-
-  onUploadFailed = () => {
-    this.setState({
-      uploadingImage: false,
-      groupImage: null,
-    });
-  };
-
-  getInvited() {
-    return [
-      ..._.filter(this.state.group.Invites || [], u => {
-        return this.state.usersToRemove.indexOf(u.userId) === -1;
-      }),
-      ...this.state.usersToAdd,
-    ];
-  }
-
-  getPendingChanges() {
-    return [...this.state.usersToRemove, ...this.state.usersToAdd];
-  }
-
-  getAttendees() {
-    return [
-      ..._.filter(this.state.group.Audience || [], u => {
-        return this.state.usersToRemove.indexOf(u.userId) === -1;
-      }),
-      ...this.state.usersToAdd,
-    ];
-  }
-
-  parseGroup(groupz) {
-    const newStates = {};
-    let newGrop = {};
-    _.forEach(groupz, group => {
-      if (!_.isUndefined(this.props.chat.key) && group.Id === this.props.chat.key) {
-        newGrop = { ...group };
-      } else if (group.Id === this.props.chat.Id) {
-        newGrop = { ...group };
-      }
-    });
-
-    newStates.group = { ...newGrop };
-    newStates.title = newGrop.Title;
-    if (!_.isEmpty(newGrop.Image)) {
-      newStates.groupImage = newGrop.Image;
-    }
-    newStates.audience = [...newGrop.Audience];
-    if (!_.isUndefined(newGrop.Invites)) {
-      newStates.invites = [...newGrop.Invites];
-      newStates.allUsers = [...newGrop.Invites, ...newGrop.Audience];
-    } else {
-      newStates.allUsers = [...newGrop.Audience];
-    }
-
-    this.setState(newStates);
-  }
-
-  addToAudience(user) {
-    const indexToRemove = this.state.usersToRemove.indexOf(user.userId);
-    if (indexToRemove > -1) {
-      const newUsersToRemove = [...this.state.usersToRemove];
-      newUsersToRemove.splice(indexToRemove, 1);
-      this.setState({
-        usersToRemove: newUsersToRemove,
-      });
-    } else {
-      const newUsersToAdd = [...this.state.usersToAdd];
-      newUsersToAdd.push(user);
-      this.setState({ usersToAdd: newUsersToAdd });
-    }
-  }
-
-  removeFromAudience(user) {
-    const indexToAdd = _.findIndex(this.state.usersToAdd, u => {
-      return u.userId === user.userId;
-    });
-    if (indexToAdd > -1) {
-      const newUsersToAdd = [...this.state.usersToAdd];
-      newUsersToAdd.splice(indexToAdd, 1);
-      this.setState({
-        usersToAdd: newUsersToAdd,
-      });
-    } else {
-      const newUsersToRemove = [...this.state.usersToRemove];
-      newUsersToRemove.push(user.userId);
-      this.setState({ usersToRemove: newUsersToRemove });
-    }
-  }
-
-  toggleAdmin = user => {
-    const index = this.state.group.Audience.indexOf(user);
-    if (index > -1) {
-      const newUsers = [...this.state.group.Audience];
-      newUsers[index].isAdmin = !newUsers[index].isAdmin;
-      this.setState({ group: { ...this.state.group, Audience: newUsers } });
-    }
-  };
-
-  closeInvitePopup() {
-    this.setState({
-      inviteOpen: false,
-      inviteAttendeeList: null,
-      inviteRepToShow: null,
-      inviteRepIdToShow: null,
-    });
-  }
-
-  openInvite() {
-    this.setState({ inviteOpen: true });
-  }
-
-  nextPage() {
-    this.setState({ page: 2, title: this.state.title });
-  }
-
-  clickCreate() {
-    if (this.state.title.length < 1) {
-      this.setState({ showErrors: true });
-      return;
-    }
-    if (this.state.uploadingImage) {
-      return;
-    }
-    this.onSubmitSend();
-  }
-
-  showUploadMenu() {
-    if (this.state.uploadingImage || this.state.submittingGroup) {
-      return;
-    }
-    this.imageUploader.showUploadMenu();
-  }
-
-  renderInvitePopup() {
-    return (
-      <EventInvitePopup
-        isNewEvent
-        onNewEventInvite={this.addToAudience.bind(this)}
-        onNewEventRemove={this.removeFromAudience.bind(this)}
-        isSearchable
-        source="residents"
-        attendees={this.getAttendees()}
-        attendingStatusText="Member"
-        invited={this.getInvited()}
-        invitedText="Added"
-        visible={this.state.inviteOpen}
-        onClose={this.closeInvitePopup.bind(this)}
-        showStatusText
-        editButtons
-      />
-    );
-  }
-
-  renderUploadMenu() {
-    return (
-      <ImageUploader
-        ref={ref => (this.imageUploader = ref)}
-        onUploadStarted={this.onUploadStarted}
-        onUploadSuccess={this.onUploadSuccess}
-        onUploadFailed={this.onUploadFailed}
-        onLibrarySelected={this.onUploadSuccess}
-        size={{ width: 700 }}
-        quality={0.8}
-        fileName={'groupImage'}
-        popupTitle={`Add ${values.entityName} Cover Image`}
-      />
-    );
-  }
-
-  renderInnerImage() {
-    if (!this.state.uploadingImage && this.state.groupImage === null) {
-      return (
-        <View>
-          <Icon
-            name="camera"
-            //style={styles.uploadButtonInner}
-            type="font-awesome"
-            iconStyle={{ color: TEXT_LIGHT, fontSize: 20, marginBottom: 13 }}
-          />
-          <Text style={{ fontSize: 13, fontFamily: 'sf-regular', color: TEXT_LIGHT }}>Upload group image</Text>
-        </View>
-      );
-    }
-    return this.renderImage();
-  }
-
-  renderImage() {
-    if (this.state.uploadingImage) {
-      return <Spinner />;
-    }
-    if (this.state.groupImage) {
-      return (
-        <ImageBackground
-          style={{ flex: 1, height: '100%', width: '100%', borderRadius: 4, justifyContent: 'center', alignContent: 'center' }}
-          imageStyle={{ borderRadius: 4 }}
-          source={{ uri: this.state.groupImage }}
-        >
-          <View>
-            <Icon
-              name="camera"
-              //style={styles.uploadButtonInner}
-              type="font-awesome"
-              iconStyle={{ color: '#fff', fontSize: 20, marginBottom: 13 }}
-            />
-            <Text style={{ fontSize: 13, fontFamily: 'sf-regular', color: '#fff', textAlign: 'center' }}>
-              Upload {values.entityName} image
-            </Text>
-          </View>
-        </ImageBackground>
-      );
-    }
-  }
-
-  renderPage() {
-    return (
-      <View>
-        <FormCard style={{ marginTop: 16 }}>
-          <FormCardSection
-            label={`${_.capitalize(values.entityName)} name`}
-            placeholder={`${_.capitalize(values.entityName)} name`}
-            textValue={this.state.title}
-            onChangeText={value => {
-              this.onChangeTitle(value);
-            }}
-            editable={this.state.submittingGroup === false}
-            isValid={() => {
-              return this.state.title.length > 1;
-            }}
-            required
-          />
-        </FormCard>
-        <View style={{ padding: 24 }}>
-          <TouchableOpacity activeOpacity={0.8} onPress={this.showUploadMenu.bind(this)}>
-            <View style={styles.imageContainer}>{this.renderInnerImage()}</View>
-          </TouchableOpacity>
-        </View>
-        <View style={{ paddingVertical: 24, paddingHorizontal: 8 }}>
-          <View style={{ paddingHorizontal: 16 }}>
-            <TextStyle type="detailLabel">Members</TextStyle>
-          </View>
-          {this.getAttendees().map(user => {
-            return (
-              <UserListing
-                key={user.userId}
-                user={user}
-                rightContent={(() => {
-                  if (this.state.usersToAdd.indexOf(user) > -1) {
-                    return null;
-                  }
-                  return (
-                    <InlineButton
-                      onPress={() => {
-                        this.toggleAdmin(user);
-                      }}
-                      style={{ borderColor: this.props.colourBrandingMain, borderWidth: 1 }}
-                      textStyle={{ color: this.props.colourBrandingMain }}
-                    >
-                      {user.isAdmin ? 'Remove admin' : 'Make admin'}
-                    </InlineButton>
-                  );
-                })()}
-                statusText={(() => {
-                  if (this.state.usersToAdd.indexOf(user) > -1) {
-                    return 'Added';
-                  }
-                  if (user.isAdmin) {
-                    return 'Admin';
-                  }
-                  return 'Member';
-                })()}
-              />
-            );
-          })}
-        </View>
-      </View>
-    );
-  }
-
-  renderPreviewAtts() {
-    return (
-      <View style={styles.attendeePreviews}>
-        {this.state.allUsers.map((user, index) => {
-          if (index < 3) {
-            return (
-              <ProfilePic ProfilePic={user.profilePic} Diameter={36} style={[styles.profilePic, { left: index * -20 }]} key={user.userId} />
-            );
-          }
-          return null;
-        })}
-      </View>
-    );
-  }
-
-  renderInviteButton() {
-    const changes = this.getPendingChanges();
-    return (
-      <View style={{ flexDirection: 'row' }}>
-        {this.renderPreviewAtts()}
-        <View style={styles.fill}>
-          <InlineButton
-            onPress={this.openInvite.bind(this)}
-            style={[styles.inviteButton, { borderColor: this.props.colourBrandingMain }]}
-            color="#fff"
-            textStyle={{ color: this.props.colourBrandingMain }}
-          >
-            Manage members
-          </InlineButton>
-          <View style={styles.attendingContainer}>
-            <Text style={styles.tix} numberOfLines={1}>
-              <Text>{this.state.group.Audience.length}</Text>
-              {' members'}
-            </Text>
-            <Text style={[styles.tix, changes.length > 0 && { color: Colours.COLOUR_RED }]} numberOfLines={1}>
-              <Text>{changes.length}</Text>
-              {' changes made'}
-            </Text>
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  render() {
-    if (!this.state.group) {
-      return null;
-    }
-    return (
-      <KeyboardAvoidingView behavior={'padding'} style={{ position: 'relative', flex: 1, backgroundColor: '#fff' }}>
-        <View style={styles.greyContainer}>
-          {this.renderUploadMenu()}
-          <Header
-            leftIcon="close"
-            leftIconType="pluss"
-            leftText="Cancel"
-            leftIconStyle={{ color: this.props.colourBrandingMain }}
-            onPressLeft={this.onPressBack.bind(this)}
-            rightText="Done"
-            onPressRight={this.clickCreate.bind(this)}
-            optionalRightStyle={this.state.submittingGroup && { opacity: 0.2 }}
-            text={this.state.title.length > 1 ? this.state.title : ' '}
-          />
-          <ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps={'handled'}>
-            {this.state.submittingGroup && (
-              <View style={{ marginTop: 16 }}>
-                <Spinner size={'small'} />
-              </View>
-            )}
-            {this.renderPage()}
-          </ScrollView>
-
-          <StickyFooter style={styles.footer}>{this.renderInviteButton()}</StickyFooter>
-        </View>
-
-        {this.renderInvitePopup()}
-      </KeyboardAvoidingView>
-    );
-  }
+	state = {
+		group: null,
+		message: "",
+		title: "",
+		error: null,
+
+		submittingGroup: false,
+		groupImage: null,
+
+		showUserSelect: false,
+		allUsers: [],
+		audience: [],
+		invites: [],
+		contacts: [],
+		selected: [],
+		pending: [],
+		usersToAdd: [],
+		usersToRemove: [],
+		searchText: "",
+		showErrors: false,
+
+		inviteOpen: false,
+	};
+
+	componentDidMount() {
+		this.parseGroup(this.props.groups);
+	}
+
+	onPressBack() {
+		NavigationService.goBack();
+	}
+
+	onSubmitSend() {
+		this.setState({ error: null });
+		if (!this.props.connected) {
+			this.setState({ error: "No internet connection detected." });
+			return;
+		}
+		if (this.state.submittingGroup || this.state.uploadingImage) {
+			return;
+		}
+
+		this.setState({ submittingGroup: true });
+
+		const group = {
+			...this.state.group,
+			Title: this.state.title,
+			CreatorId: this.state.group.CreatorId,
+		};
+
+		if (this.state.groupImage != null && !_.isEmpty(this.state.groupImage)) {
+			group.Image = this.state.groupImage;
+		}
+
+		this.props.editGroup(
+			group,
+			this.state.usersToAdd,
+			this.state.usersToRemove,
+		);
+		this.onPressBack();
+	}
+
+	onChangeTitle(value) {
+		this.setState({ title: value });
+	}
+
+	onUploadStarted = () => {
+		this.setState({
+			uploadingImage: true,
+		});
+	};
+
+	onUploadSuccess = (uri) => {
+		this.setState({
+			uploadingImage: false,
+			groupImage: uri.replace("/general/", "/general1400/"),
+		});
+	};
+
+	onUploadFailed = () => {
+		this.setState({
+			uploadingImage: false,
+			groupImage: null,
+		});
+	};
+
+	getInvited() {
+		return [
+			..._.filter(this.state.group.Invites || [], (u) => {
+				return this.state.usersToRemove.indexOf(u.userId) === -1;
+			}),
+			...this.state.usersToAdd,
+		];
+	}
+
+	getPendingChanges() {
+		return [...this.state.usersToRemove, ...this.state.usersToAdd];
+	}
+
+	getAttendees() {
+		return [
+			..._.filter(this.state.group.Audience || [], (u) => {
+				return this.state.usersToRemove.indexOf(u.userId) === -1;
+			}),
+			...this.state.usersToAdd,
+		];
+	}
+
+	parseGroup(groupz) {
+		const newStates = {};
+		let newGrop = {};
+		_.forEach(groupz, (group) => {
+			if (
+				!_.isUndefined(this.props.chat.key) &&
+				group.Id === this.props.chat.key
+			) {
+				newGrop = { ...group };
+			} else if (group.Id === this.props.chat.Id) {
+				newGrop = { ...group };
+			}
+		});
+
+		newStates.group = { ...newGrop };
+		newStates.title = newGrop.Title;
+		if (!_.isEmpty(newGrop.Image)) {
+			newStates.groupImage = newGrop.Image;
+		}
+		newStates.audience = [...newGrop.Audience];
+		if (!_.isUndefined(newGrop.Invites)) {
+			newStates.invites = [...newGrop.Invites];
+			newStates.allUsers = [...newGrop.Invites, ...newGrop.Audience];
+		} else {
+			newStates.allUsers = [...newGrop.Audience];
+		}
+
+		this.setState(newStates);
+	}
+
+	addToAudience(user) {
+		const indexToRemove = this.state.usersToRemove.indexOf(user.userId);
+		if (indexToRemove > -1) {
+			const newUsersToRemove = [...this.state.usersToRemove];
+			newUsersToRemove.splice(indexToRemove, 1);
+			this.setState({
+				usersToRemove: newUsersToRemove,
+			});
+		} else {
+			const newUsersToAdd = [...this.state.usersToAdd];
+			newUsersToAdd.push(user);
+			this.setState({ usersToAdd: newUsersToAdd });
+		}
+	}
+
+	removeFromAudience(user) {
+		const indexToAdd = _.findIndex(this.state.usersToAdd, (u) => {
+			return u.userId === user.userId;
+		});
+		if (indexToAdd > -1) {
+			const newUsersToAdd = [...this.state.usersToAdd];
+			newUsersToAdd.splice(indexToAdd, 1);
+			this.setState({
+				usersToAdd: newUsersToAdd,
+			});
+		} else {
+			const newUsersToRemove = [...this.state.usersToRemove];
+			newUsersToRemove.push(user.userId);
+			this.setState({ usersToRemove: newUsersToRemove });
+		}
+	}
+
+	toggleAdmin = (user) => {
+		const index = this.state.group.Audience.indexOf(user);
+		if (index > -1) {
+			const newUsers = [...this.state.group.Audience];
+			newUsers[index].isAdmin = !newUsers[index].isAdmin;
+			this.setState({ group: { ...this.state.group, Audience: newUsers } });
+		}
+	};
+
+	closeInvitePopup() {
+		this.setState({
+			inviteOpen: false,
+			inviteAttendeeList: null,
+			inviteRepToShow: null,
+			inviteRepIdToShow: null,
+		});
+	}
+
+	openInvite() {
+		this.setState({ inviteOpen: true });
+	}
+
+	nextPage() {
+		this.setState({ page: 2, title: this.state.title });
+	}
+
+	clickCreate() {
+		if (this.state.title.length < 1) {
+			this.setState({ showErrors: true });
+			return;
+		}
+		if (this.state.uploadingImage) {
+			return;
+		}
+		this.onSubmitSend();
+	}
+
+	showUploadMenu() {
+		if (this.state.uploadingImage || this.state.submittingGroup) {
+			return;
+		}
+		this.imageUploader.showUploadMenu();
+	}
+
+	renderInvitePopup() {
+		return (
+			<EventInvitePopup
+				isNewEvent
+				onNewEventInvite={this.addToAudience.bind(this)}
+				onNewEventRemove={this.removeFromAudience.bind(this)}
+				isSearchable
+				source="residents"
+				attendees={this.getAttendees()}
+				attendingStatusText="Member"
+				invited={this.getInvited()}
+				invitedText="Added"
+				visible={this.state.inviteOpen}
+				onClose={this.closeInvitePopup.bind(this)}
+				showStatusText
+				editButtons
+			/>
+		);
+	}
+
+	renderUploadMenu() {
+		return (
+			<ImageUploader
+				ref={(ref) => (this.imageUploader = ref)}
+				onUploadStarted={this.onUploadStarted}
+				onUploadSuccess={this.onUploadSuccess}
+				onUploadFailed={this.onUploadFailed}
+				onLibrarySelected={this.onUploadSuccess}
+				size={{ width: 700 }}
+				quality={0.8}
+				fileName={"groupImage"}
+				popupTitle={`Add ${values.entityName} Cover Image`}
+			/>
+		);
+	}
+
+	renderInnerImage() {
+		if (!this.state.uploadingImage && this.state.groupImage === null) {
+			return (
+				<View>
+					<Icon
+						name="camera"
+						//style={styles.uploadButtonInner}
+						type="font-awesome"
+						iconStyle={{ color: TEXT_LIGHT, fontSize: 20, marginBottom: 13 }}
+					/>
+					<Text
+						style={{
+							fontSize: 13,
+							fontFamily: "sf-regular",
+							color: TEXT_LIGHT,
+						}}
+					>
+						Upload group image
+					</Text>
+				</View>
+			);
+		}
+		return this.renderImage();
+	}
+
+	renderImage() {
+		if (this.state.uploadingImage) {
+			return <Spinner />;
+		}
+		if (this.state.groupImage) {
+			return (
+				<ImageBackground
+					style={{
+						flex: 1,
+						height: "100%",
+						width: "100%",
+						borderRadius: 4,
+						justifyContent: "center",
+						alignContent: "center",
+					}}
+					imageStyle={{ borderRadius: 4 }}
+					source={{ uri: this.state.groupImage }}
+				>
+					<View>
+						<Icon
+							name="camera"
+							//style={styles.uploadButtonInner}
+							type="font-awesome"
+							iconStyle={{ color: "#fff", fontSize: 20, marginBottom: 13 }}
+						/>
+						<Text
+							style={{
+								fontSize: 13,
+								fontFamily: "sf-regular",
+								color: "#fff",
+								textAlign: "center",
+							}}
+						>
+							Upload {values.entityName} image
+						</Text>
+					</View>
+				</ImageBackground>
+			);
+		}
+	}
+
+	renderPage() {
+		return (
+			<View>
+				<FormCard style={{ marginTop: 16 }}>
+					<FormCardSection
+						label={`${_.capitalize(values.entityName)} name`}
+						placeholder={`${_.capitalize(values.entityName)} name`}
+						textValue={this.state.title}
+						onChangeText={(value) => {
+							this.onChangeTitle(value);
+						}}
+						editable={this.state.submittingGroup === false}
+						isValid={() => {
+							return this.state.title.length > 1;
+						}}
+						required
+					/>
+				</FormCard>
+				<View style={{ padding: 24 }}>
+					<TouchableOpacity
+						activeOpacity={0.8}
+						onPress={this.showUploadMenu.bind(this)}
+					>
+						<View style={styles.imageContainer}>{this.renderInnerImage()}</View>
+					</TouchableOpacity>
+				</View>
+				<View style={{ paddingVertical: 24, paddingHorizontal: 8 }}>
+					<View style={{ paddingHorizontal: 16 }}>
+						<TextStyle type="detailLabel">Members</TextStyle>
+					</View>
+					{this.getAttendees().map((user) => {
+						return (
+							<UserListing
+								key={user.userId}
+								user={user}
+								rightContent={(() => {
+									if (this.state.usersToAdd.indexOf(user) > -1) {
+										return null;
+									}
+									return (
+										<InlineButton
+											onPress={() => {
+												this.toggleAdmin(user);
+											}}
+											style={{
+												borderColor: this.props.colourBrandingMain,
+												borderWidth: 1,
+											}}
+											textStyle={{ color: this.props.colourBrandingMain }}
+										>
+											{user.isAdmin ? "Remove admin" : "Make admin"}
+										</InlineButton>
+									);
+								})()}
+								statusText={(() => {
+									if (this.state.usersToAdd.indexOf(user) > -1) {
+										return "Added";
+									}
+									if (user.isAdmin) {
+										return "Admin";
+									}
+									return "Member";
+								})()}
+							/>
+						);
+					})}
+				</View>
+			</View>
+		);
+	}
+
+	renderPreviewAtts() {
+		return (
+			<View style={styles.attendeePreviews}>
+				{this.state.allUsers.map((user, index) => {
+					if (index < 3) {
+						return (
+							<ProfilePic
+								ProfilePic={user.profilePic}
+								Diameter={36}
+								style={[styles.profilePic, { left: index * -20 }]}
+								key={user.userId}
+							/>
+						);
+					}
+					return null;
+				})}
+			</View>
+		);
+	}
+
+	renderInviteButton() {
+		const changes = this.getPendingChanges();
+		return (
+			<View style={{ flexDirection: "row" }}>
+				{this.renderPreviewAtts()}
+				<View style={styles.fill}>
+					<InlineButton
+						onPress={this.openInvite.bind(this)}
+						style={[
+							styles.inviteButton,
+							{ borderColor: this.props.colourBrandingMain },
+						]}
+						color="#fff"
+						textStyle={{ color: this.props.colourBrandingMain }}
+					>
+						Manage members
+					</InlineButton>
+					<View style={styles.attendingContainer}>
+						<Text style={styles.tix} numberOfLines={1}>
+							<Text>{this.state.group.Audience.length}</Text>
+							{" members"}
+						</Text>
+						<Text
+							style={[
+								styles.tix,
+								changes.length > 0 && { color: Colours.COLOUR_RED },
+							]}
+							numberOfLines={1}
+						>
+							<Text>{changes.length}</Text>
+							{" changes made"}
+						</Text>
+					</View>
+				</View>
+			</View>
+		);
+	}
+
+	render() {
+		if (!this.state.group) {
+			return null;
+		}
+		return (
+			<KeyboardAvoidingView
+				behavior={"padding"}
+				style={{ position: "relative", flex: 1, backgroundColor: "#fff" }}
+			>
+				<View style={styles.greyContainer}>
+					{this.renderUploadMenu()}
+					<Header
+						leftIcon="close"
+						leftIconType="pluss"
+						leftText="Cancel"
+						leftIconStyle={{ color: this.props.colourBrandingMain }}
+						onPressLeft={this.onPressBack.bind(this)}
+						rightText="Done"
+						onPressRight={this.clickCreate.bind(this)}
+						optionalRightStyle={this.state.submittingGroup && { opacity: 0.2 }}
+						text={this.state.title.length > 1 ? this.state.title : " "}
+					/>
+					<ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps={"handled"}>
+						{this.state.submittingGroup && (
+							<View style={{ marginTop: 16 }}>
+								<Spinner size={"small"} />
+							</View>
+						)}
+						{this.renderPage()}
+					</ScrollView>
+
+					<StickyFooter style={styles.footer}>
+						{this.renderInviteButton()}
+					</StickyFooter>
+				</View>
+
+				{this.renderInvitePopup()}
+			</KeyboardAvoidingView>
+		);
+	}
 }
 
 const styles = {
-  footer: {
-    paddingHorizontal: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  footerButton: {
-    flex: 1,
-  },
-  profilePic: {
-    borderWidth: 1,
-    borderColor: '#fff',
-  },
-  fill: {
-    flex: 1,
-    flexDirection: 'row-reverse',
-    justifyContent: 'space-between',
-  },
-  attendeePreviews: {
-    width: 90,
-    height: 36,
-    flexDirection: 'row',
-  },
-  inviteButton: {
-    height: 36,
-    //width: 142,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 5,
-    marginLeft: 8,
-    borderWidth: 1,
-    flex: 1,
-  },
-  viewContainer: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  container: {
-    flex: 1,
-    position: 'relative',
-  },
-  greyContainer: {
-    flex: 1,
-    backgroundColor: BG_GREY,
-  },
-  uploadButton: {
-    width: '100%',
-    //height: 150,
-    alignContent: 'center',
-    position: 'absolute',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    top: 65,
-  },
-  imageContainer: {
-    width: PHOTO_WIDTH,
-    height: PHOTO_WIDTH * 0.8,
-    backgroundColor: '#fff',
-    borderStyle: 'dashed',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: LINEGREY,
-    borderRadius: 4,
-  },
-  attendingContainer: {
-    paddingLeft: 8,
-  },
-  tix: {
-    fontFamily: 'sf-semibold',
-    color: TEXT_LIGHT,
-    fontSize: 14,
-    flex: 1,
-  },
+	footer: {
+		paddingHorizontal: 16,
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	footerButton: {
+		flex: 1,
+	},
+	profilePic: {
+		borderWidth: 1,
+		borderColor: "#fff",
+	},
+	fill: {
+		flex: 1,
+		flexDirection: "row-reverse",
+		justifyContent: "space-between",
+	},
+	attendeePreviews: {
+		width: 90,
+		height: 36,
+		flexDirection: "row",
+	},
+	inviteButton: {
+		height: 36,
+		//width: 142,
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 5,
+		marginLeft: 8,
+		borderWidth: 1,
+		flex: 1,
+	},
+	viewContainer: {
+		flex: 1,
+		backgroundColor: "#fff",
+	},
+	container: {
+		flex: 1,
+		position: "relative",
+	},
+	greyContainer: {
+		flex: 1,
+		backgroundColor: BG_GREY,
+	},
+	uploadButton: {
+		width: "100%",
+		//height: 150,
+		alignContent: "center",
+		position: "absolute",
+		flexDirection: "row",
+		justifyContent: "center",
+		top: 65,
+	},
+	imageContainer: {
+		width: PHOTO_WIDTH,
+		height: PHOTO_WIDTH * 0.8,
+		backgroundColor: "#fff",
+		borderStyle: "dashed",
+		justifyContent: "center",
+		alignItems: "center",
+		borderWidth: 1,
+		borderColor: LINEGREY,
+		borderRadius: 4,
+	},
+	attendingContainer: {
+		paddingLeft: 8,
+	},
+	tix: {
+		fontFamily: "sf-semibold",
+		color: TEXT_LIGHT,
+		fontSize: 14,
+		flex: 1,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    connected: state.connection.connected,
-    user: state.user,
-    blockedUserKeys: state[values.reducerKeyChats].blockedUsers,
-    groups: state[values.reducerKey].list,
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		connected: state.connection.connected,
+		user: state.user,
+		blockedUserKeys: state[values.reducerKeyChats].blockedUsers,
+		groups: state[values.reducerKey].list,
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
-export default connect(mapStateToProps, { createGroup, loadGroups, editGroup })(EditGroup);
+export default connect(mapStateToProps, { createGroup, loadGroups, editGroup })(
+	EditGroup,
+);