@plusscommunities/pluss-circles-app-groups 1.2.2-beta.0

package/src/components/groups/NewGroup.js

@@ -0,0 +1,650 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { Dimensions, ImageBackground, Text, ScrollView, TouchableOpacity, View, KeyboardAvoidingView, Platform } from 'react-native';
+import { Icon } from 'react-native-elements';
+import {
+  ProfilePic,
+  FormCard,
+  FormCardSection,
+  Header,
+  Input,
+  Spinner,
+  ImageUploader,
+  InlineButton,
+  StickyFooter,
+  Toggle,
+} from '../common';
+import { TEXT_DARK, LINEGREY, COLOUR_TEAL, getMainBrandingColourFromState } from '../../js/Colors';
+import stylez from '../../js/Styles';
+import NavigationService from '../../js/NavigationService';
+import { COLOUR_PURPLE, COLOUR_TANGERINE, TEXT_LIGHT, getSite, getSiteSettingFromState } from '../../js/index';
+import { createGroup } from '../../actions';
+import EventInvitePopup from '../events/EventInvitePopup';
+import { circleActions } from '../../webapi';
+import { values } from '../../values.config';
+
+const PHOTO_WIDTH = Dimensions.get('window').width - 48;
+const PHOTO_HEIGHT = Dimensions.get('window').width > 600 ? PHOTO_WIDTH * 0.6 : PHOTO_WIDTH * 0.8;
+
+class NewGroup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      title: '',
+
+      submittingGroup: false,
+      groupImage: null,
+
+      selected: [],
+
+      visibility: 'private',
+
+      inviteOpen: false,
+
+      page: 2,
+    };
+
+    this.visibilityOptions = [
+      {
+        text: `Public ${values.entityName}`,
+        val: 'public',
+      },
+      {
+        text: `Private ${values.entityName}`,
+        val: 'private',
+      },
+    ];
+  }
+
+  onPressBack() {
+    NavigationService.goBack();
+  }
+
+  onSubmitSend() {
+    if (!this.props.connected) {
+      return;
+    }
+    if (this.state.submittingGroup) {
+      return;
+    }
+
+    this.setState({ submittingGroup: true });
+
+    const audience = [
+      {
+        userId: this.props.user.uid,
+        profilePic: this.props.user.profilePic,
+        displayName: this.props.user.displayName,
+      },
+    ];
+    if (this.state.selected.length > 0) {
+      this.state.selected.forEach(user => {
+        audience.push({
+          userId: user.userId,
+          displayName: user.displayName,
+          profilePic: user.profilePic,
+        });
+      });
+    }
+
+    circleActions
+      .add(getSite(this.props.user.site), this.state.title, this.state.groupImage, audience, this.state.visibility === 'public')
+      .then(res => {
+        if (this.props.onSubmissionSuccess) this.props.onSubmissionSuccess(res.data);
+        this.props.createGroup(res.data);
+        NavigationService.navigate(values.screenCircleChat, {
+          chat: res.data,
+          new: true,
+          back: values.screenCircleChatList,
+        });
+      })
+      .catch(err => {
+        console.log('Circle creation error');
+        console.log(err);
+        this.setState({ submittingGroup: false });
+      });
+  }
+
+  onPressToggle(option) {
+    this.setState({
+      visibility: option.val,
+    });
+  }
+
+  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,
+    });
+  };
+
+  addToAudience(user) {
+    const newSelected = [...this.state.selected];
+    newSelected.push(user);
+
+    this.setState({ selected: newSelected });
+  }
+
+  removeFromAudience(user) {
+    let newSelected = [...this.state.selected];
+    newSelected = _.filter(newSelected, item => {
+      return item.userId !== user.userId;
+    });
+
+    this.setState({ selected: newSelected });
+  }
+
+  closeInvitePopup() {
+    this.setState({
+      inviteOpen: false,
+    });
+  }
+
+  openInvite() {
+    this.setState({ inviteOpen: true });
+  }
+
+  nextPage() {
+    this.setState({ page: 2, title: this.state.title });
+  }
+
+  clickCreate() {
+    if (this.state.title.length < 1) {
+      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
+        invited={this.state.selected}
+        visible={this.state.inviteOpen}
+        onClose={this.closeInvitePopup.bind(this)}
+        inviteText="Add"
+        invitedText="Remove"
+      />
+    );
+  }
+
+  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 ${_.capitalize(values.entityName)} Cover Image`}
+      />
+    );
+  }
+
+  renderInnerImage() {
+    if (!this.state.uploadingImage && this.state.groupImage === null) {
+      return (
+        <View>
+          <Icon name="camera" type="font-awesome" iconStyle={{ color: TEXT_LIGHT, fontSize: 20, marginBottom: 13 }} />
+          <Text style={{ fontSize: 13, fontFamily: 'sf-regular', color: TEXT_LIGHT }}>Upload {values.entityName} 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" 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>
+      );
+    }
+    return null;
+  }
+
+  renderPage() {
+    return this.renderForm();
+  }
+
+  renderVisibilityToggle() {
+    if (!this.props.circleAllowPublicCircles) {
+      return null;
+    }
+    if (this.props.user.category === 'family') {
+      return null;
+    }
+    return (
+      <View style={styles.toggleContainer}>
+        <Toggle options={this.visibilityOptions} onPress={this.onPressToggle.bind(this)} activeVal={this.state.visibility} />
+      </View>
+    );
+  }
+
+  renderTitleEntry() {
+    return (
+      <View style={styles.container}>
+        <ScrollView style={styles.container} keyboardShouldPersistTaps="handled">
+          <View style={{ paddingHorizontal: 24, paddingBottom: 10, paddingTop: 20 }}>
+            <Input
+              autoFocus
+              label={this.state.title.length > 0 ? `${_.capitalize(values.entityName)} name` : ' '}
+              labelStyle={{ fontSize: 13, color: '#fff' }}
+              placeholder={`${_.capitalize(values.entityName)} name`}
+              placeholderTextColor="rgba(255,255,255,0.5)"
+              value={this.state.title}
+              onChangeText={value => {
+                this.onChangeTitle(value);
+              }}
+              textStyle={{ marginTop: 10, fontSize: 28, color: '#fff', fontFamily: 'sf-semibold' }}
+            />
+          </View>
+        </ScrollView>
+        {this.state.title.length > 0 && (
+          <View style={[styles.footer, { paddingBottom: 16 }]}>
+            <InlineButton
+              color="#fff"
+              textStyle={{ color: this.props.colourBrandingMain }}
+              onPress={this.nextPage.bind(this)}
+              touchableStyle={styles.footerButton}
+              style={{ height: 50 }}
+              fillTouchable
+              large
+            >
+              Create {values.entityName}
+            </InlineButton>
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  renderForm() {
+    return (
+      <ScrollView style={[styles.container, styles.greyContainer]} keyboardShouldPersistTaps="handled">
+        {this.state.submittingGroup && (
+          <View style={{ marginTop: 16 }}>
+            <Spinner size="small" />
+          </View>
+        )}
+        {this.renderVisibilityToggle()}
+        <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>
+      </ScrollView>
+    );
+  }
+
+  renderPreviewAtts() {
+    return (
+      <View style={styles.attendeePreviews}>
+        {this.state.selected.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() {
+    if (this.state.selected.length === 0) {
+      return (
+        <InlineButton
+          color={this.props.colourBrandingMain}
+          onPress={this.openInvite.bind(this)}
+          touchableStyle={styles.footerButton}
+          fillTouchable
+          large
+        >
+          Select members
+        </InlineButton>
+      );
+    }
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        {this.renderPreviewAtts()}
+        <View style={styles.fill}>
+          <InlineButton onPress={this.openInvite.bind(this)} style={styles.inviteButton} color={this.props.colourBrandingMain} large>
+            Select members
+          </InlineButton>
+          <Text style={styles.tix}>
+            <Text>{this.state.selected.length}</Text>
+            {' selected'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' && 'padding'} style={styles.viewContainer}>
+        {this.renderUploadMenu()}
+        <View style={[stylez.genericPageContainer, this.state.page === 1 && { backgroundColor: this.props.colourBrandingMain }]}>
+          <Header
+            leftIcon="close"
+            leftIconType="pluss"
+            leftText={this.state.page !== 1 && 'Cancel'}
+            leftIconStyle={this.state.page !== 1 && { color: this.props.colourBrandingMain }}
+            onPressLeft={this.onPressBack.bind(this)}
+            rightText={this.state.page !== 1 && 'Done'}
+            onPressRight={this.clickCreate.bind(this)}
+            optionalRightStyle={this.state.submittingGroup && { opacity: 0.2 }}
+            text={this.state.page === 1 ? `Create a ${values.entityName}` : this.state.title.length > 1 ? this.state.title : ' '}
+            style={this.state.page === 1 && { backgroundColor: this.props.colourBrandingMain, ...styles.page1Header }}
+            textColour={this.state.page === 1 && '#fff'}
+          />
+          {this.renderPage()}
+
+          {this.state.page === 2 && <StickyFooter style={styles.footer}>{this.renderInviteButton()}</StickyFooter>}
+        </View>
+
+        {this.renderInvitePopup()}
+      </KeyboardAvoidingView>
+    );
+  }
+}
+
+const styles = {
+  footer: {
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  footerButton: {
+    flex: 1,
+  },
+  inviteButton: {
+    height: 36,
+    width: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 5,
+    marginLeft: 10,
+  },
+  inviteButtonText: {
+    color: '#fff',
+    fontFamily: 'sf-semibold',
+    fontSize: 15,
+  },
+  profilePic: {
+    borderWidth: 1,
+    borderColor: '#fff',
+  },
+  fill: {
+    flex: 1,
+    flexDirection: 'row-reverse',
+  },
+  attendeePreviews: {
+    width: 90,
+    height: 36,
+    flexDirection: 'row',
+  },
+  viewContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  greyContainer: {
+    backgroundColor: '#f0f0f5',
+  },
+  section: {
+    backgroundColor: '#fff',
+    marginTop: 16,
+    paddingHorizontal: 24,
+    elevation: 1,
+  },
+  sectionItem: {
+    paddingVertical: 16,
+  },
+  sectionItemUnderline: {
+    borderBottomWidth: 1,
+    borderBottomColor: LINEGREY,
+  },
+  errorDot: {
+    height: 5,
+    width: 5,
+    borderRadius: 3,
+    backgroundColor: COLOUR_TEAL,
+    alignSelf: 'center',
+  },
+  inputView: {
+    width: '100%',
+    marginBottom: 5,
+  },
+  labelStyle: {
+    fontSize: 15,
+    backgroundColor: 'transparent',
+    fontFamily: 'sf-semibold',
+    color: TEXT_DARK,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontFamily: 'sf-bold',
+    fontSize: 17,
+    color: 'white',
+    borderRadius: 5,
+  },
+  uploadButton: {
+    width: '100%',
+    //height: 150,
+    alignContent: 'center',
+    position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    top: 65,
+  },
+  uploadText: {
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    textAlign: 'center',
+    paddingVertical: 7,
+    backgroundColor: 'transparent',
+    paddingHorizontal: 20,
+    color: TEXT_DARK,
+  },
+  pageErrorText: {
+    backgroundColor: 'transparent',
+    color: COLOUR_TANGERINE,
+    fontSize: 18,
+    fontFamily: 'sf-regular',
+    marginTop: 0,
+    textAlign: 'center',
+  },
+  userPopupContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+    ...Platform.select({
+      ios: {
+        paddingTop: 20,
+      },
+    }),
+  },
+  closeContainer: {
+    paddingRight: 20,
+    paddingTop: 10,
+    paddingLeft: 10,
+    paddingBottom: 10,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    borderRadius: 5,
+    zIndex: 2,
+    ...Platform.select({
+      ios: {
+        paddingTop: 30,
+      },
+    }),
+  },
+  close: {
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: {
+      width: 2,
+      height: 1,
+    },
+    textShadowRadius: 1,
+  },
+  listItem: {
+    paddingBottom: 10,
+    paddingHorizontal: 0,
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  listItemTextContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    paddingLeft: 10,
+  },
+  searchingContactsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    paddingTop: 20,
+  },
+  searchingContactsInnerContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  },
+  searchingContacts: {
+    flex: 1,
+    fontSize: 16,
+    fontFamily: 'sf-regular',
+    minWidth: 100,
+  },
+  emptySearchingContacts: {
+    opacity: 0.5,
+  },
+  toText: {
+    fontFamily: 'sf-regular',
+    fontSize: 12,
+    color: TEXT_DARK,
+    opacity: 0.5,
+    marginRight: 10,
+  },
+  selectedContact: {
+    paddingTop: 10,
+    paddingRight: 5,
+    fontFamily: 'sf-bold',
+    fontSize: 16,
+    color: COLOUR_PURPLE,
+  },
+  page1Header: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  imageContainer: {
+    width: PHOTO_WIDTH,
+    height: PHOTO_HEIGHT,
+    backgroundColor: '#fff',
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: LINEGREY,
+    borderRadius: 4,
+  },
+  tix: {
+    fontFamily: 'sf-semibold',
+    color: TEXT_LIGHT,
+    fontSize: 14,
+    textAlign: 'center',
+    flex: 1,
+    alignSelf: 'center',
+  },
+  toggleContainer: {
+    paddingHorizontal: 16,
+    marginTop: 16,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    connected: state.connection.connected,
+    user: state.user,
+    blockedUserKeys: state[values.reducerKeyChats].blockedUsers,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    circleAllowPublicCircles: getSiteSettingFromState(state, values.allowPublicKey),
+  };
+};
+
+export default connect(mapStateToProps, { createGroup })(NewGroup);