@plusscommunities/pluss-core-web 1.6.13-beta.0 → 1.6.15-beta.0

package/src/components/AudienceIncluder.js

@@ -1,173 +1,217 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { withRouter } from 'react-router';
-import { connect } from 'react-redux';
-import Config from '../config';
-import { SVGIcon } from './SVGIcon';
-import { GenericInput } from './GenericInput';
-import { Text } from './Text';
-import { COLOUR_DUSK } from '../colours';
+import React, { Component } from "react";
+import _ from "lodash";
+import { withRouter } from "react-router";
+import { connect } from "react-redux";
+import Config from "../config";
+import { SVGIcon } from "./SVGIcon";
+import { GenericInput } from "./GenericInput";
+import { Text } from "./Text";
+import { COLOUR_DUSK } from "../colours";
 
 class AudienceIncluder extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showUserAdd: false,
-      userSearch: '',
-      returnList: [],
-      userList: [],
-
-      selectionList: [],
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    this.updateProps(this.props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.updateProps(nextProps);
-  }
-
-  updateProps(props) {
-    var stateChange = { selectionList: props.selectionList, userList: props.userList };
-
-    if (!_.isEmpty(this.state.userSearch) && this.state.userSearch.length > 1) {
-      stateChange.returnList = _.filter(props.userList, (ev) => {
-        return ev.displayName.toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1;
-      });
-
-      stateChange.returnList = _.reject(stateChange.returnList, (item) =>
-        _.find(props.selectionList, (t) => {
-          return t.Id === item.Id;
-        }),
-      );
-    }
-    this.setState(stateChange);
-  }
-
-  showUserAdd() {
-    this.setState({ showUserAdd: true });
-  }
-
-  handleChange(event) {
-    if (this.state.searchUserLoading) {
-      return;
-    }
-    var stateChange = { returnList: [] };
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-
-    if (!_.isEmpty(event.target.value) && event.target.value.length > 1) {
-      stateChange.returnList = _.filter(this.props.userList, (ev) => {
-        return ev.displayName.toLowerCase().indexOf(event.target.value.toLowerCase()) > -1;
-      });
-
-      stateChange.returnList = _.reject(stateChange.returnList, (item) =>
-        _.find(this.state.selectionList, (t) => {
-          return t.Id === item.Id;
-        }),
-      );
-    }
-
-    this.setState(stateChange);
-  }
-
-  renderSearch() {
-    return (
-      <div style={{}}>
-        {this.state.returnList.map((user, index) => {
-          return (
-            <div
-              onClick={() => {
-                this.props.add(user);
-              }}
-              key={user.Id}
-              className="pointer"
-              style={{ marginBottom: 8, display: 'flex', flexDirection: 'row', alignItems: 'center' }}
-            >
-              <img
-                style={{ height: 30, width: 30, borderRadius: 15, marginRight: 16 }}
-                src={user.profilePic != null ? user.profilePic : Config.env.defaultProfileImage}
-                alt="user profilePic"
-              />
-              <div className={`fontMedium fontSize-16 text-dark'`}>{user.displayName}</div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  renderUserAdd() {
-    return (
-      <div className="" style={{ backgroundColor: '#fff' }}>
-        {' '}
-        {/* Search for peeps */}
-        <GenericInput
-          id="userSearch"
-          type="text"
-          label="Search for User"
-          placeholder="Search for user"
-          value={this.state.userSearch}
-          onChange={(e) => this.handleChange(e)}
-          alwaysShowLabel
-        />
-        {this.renderSearch()}
-      </div>
-    );
-  }
-
-  renderAttendees() {
-    if (this.state.selectionList && !_.isEmpty(this.state.selectionList)) {
-      return (
-        <div style={{ marginTop: 16 }}>
-          <Text type="formLabel" className="marginBottom-8">
-            Selected Users
-          </Text>
-          {this.state.selectionList.map((user, index) => {
-            return (
-              <div
-                key={user.Id}
-                style={{ marginBottom: 8, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
-              >
-                <div className="flex" style={{ alignItems: 'center' }}>
-                  <img
-                    style={{ height: 30, width: 30, borderRadius: 15, marginRight: 16 }}
-                    src={user.profilePic != null ? user.profilePic : Config.env.defaultProfileImage}
-                    alt="user profilePic"
-                  />
-                  <div className={`fontMedium fontSize-16 text-dark'`}>{user.displayName}</div>
-                </div>
-                <SVGIcon
-                  className="removeIcon"
-                  icon="close"
-                  onClick={() => {
-                    this.props.remove(user);
-                  }}
-                  colour={COLOUR_DUSK}
-                />
-                {/* <ConfirmActions declineOnly onDecline={() => {}} /> */}
-              </div>
-            );
-          })}
-        </div>
-      );
-    }
-    return null;
-  }
-
-  render() {
-    return (
-      <div>
-        <div>{this.renderUserAdd()}</div>
-        <div>{this.renderAttendees()}</div>
-      </div>
-    );
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			showUserAdd: false,
+			userSearch: "",
+			returnList: [],
+			userList: [],
+
+			selectionList: [],
+		};
+	}
+
+	UNSAFE_componentWillMount() {
+		this.updateProps(this.props);
+	}
+
+	UNSAFE_componentWillReceiveProps(nextProps) {
+		this.updateProps(nextProps);
+	}
+
+	updateProps(props) {
+		var stateChange = {
+			selectionList: props.selectionList,
+			userList: props.userList,
+		};
+
+		if (!_.isEmpty(this.state.userSearch) && this.state.userSearch.length > 1) {
+			stateChange.returnList = _.filter(props.userList, (ev) => {
+				return (
+					ev.displayName
+						.toLowerCase()
+						.indexOf(this.state.userSearch.toLowerCase()) > -1
+				);
+			});
+
+			stateChange.returnList = _.reject(stateChange.returnList, (item) =>
+				_.find(props.selectionList, (t) => {
+					return t.Id === item.Id;
+				}),
+			);
+		}
+		this.setState(stateChange);
+	}
+
+	showUserAdd() {
+		this.setState({ showUserAdd: true });
+	}
+
+	handleChange(event) {
+		if (this.state.searchUserLoading) {
+			return;
+		}
+		var stateChange = { returnList: [] };
+		stateChange[event.target.getAttribute("id")] = event.target.value;
+
+		if (!_.isEmpty(event.target.value) && event.target.value.length > 1) {
+			stateChange.returnList = _.filter(this.props.userList, (ev) => {
+				return (
+					ev.displayName
+						.toLowerCase()
+						.indexOf(event.target.value.toLowerCase()) > -1
+				);
+			});
+
+			stateChange.returnList = _.reject(stateChange.returnList, (item) =>
+				_.find(this.state.selectionList, (t) => {
+					return t.Id === item.Id;
+				}),
+			);
+		}
+
+		this.setState(stateChange);
+	}
+
+	renderSearch() {
+		return (
+			<div style={{}}>
+				{this.state.returnList.map((user, index) => {
+					return (
+						<div
+							onClick={() => {
+								this.props.add(user);
+							}}
+							key={user.Id}
+							className="pointer"
+							style={{
+								marginBottom: 8,
+								display: "flex",
+								flexDirection: "row",
+								alignItems: "center",
+							}}
+						>
+							<img
+								style={{
+									height: 30,
+									width: 30,
+									borderRadius: 15,
+									marginRight: 16,
+								}}
+								src={
+									user.profilePic != null
+										? user.profilePic
+										: Config.env.defaultProfileImage
+								}
+								alt="user profilePic"
+							/>
+							<div className={`fontMedium fontSize-16 text-dark'`}>
+								{user.displayName}
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
+
+	renderUserAdd() {
+		return (
+			<div className="" style={{ backgroundColor: "#fff" }}>
+				{" "}
+				{/* Search for peeps */}
+				<GenericInput
+					id="userSearch"
+					type="text"
+					label="Search for User"
+					placeholder="Search for user"
+					value={this.state.userSearch}
+					onChange={(e) => this.handleChange(e)}
+					alwaysShowLabel
+				/>
+				{this.renderSearch()}
+			</div>
+		);
+	}
+
+	renderAttendees() {
+		if (this.state.selectionList && !_.isEmpty(this.state.selectionList)) {
+			return (
+				<div style={{ marginTop: 16 }}>
+					<Text type="formLabel" className="marginBottom-8">
+						Selected Users
+					</Text>
+					{this.state.selectionList.map((user, index) => {
+						return (
+							<div
+								key={user.Id}
+								style={{
+									marginBottom: 8,
+									display: "flex",
+									flexDirection: "row",
+									justifyContent: "space-between",
+									alignItems: "center",
+								}}
+							>
+								<div className="flex" style={{ alignItems: "center" }}>
+									<img
+										style={{
+											height: 30,
+											width: 30,
+											borderRadius: 15,
+											marginRight: 16,
+										}}
+										src={
+											user.profilePic != null
+												? user.profilePic
+												: Config.env.defaultProfileImage
+										}
+										alt="user profilePic"
+									/>
+									<div className={`fontMedium fontSize-16 text-dark'`}>
+										{user.displayName}
+									</div>
+								</div>
+								<SVGIcon
+									className="removeIcon"
+									icon="close"
+									onClick={() => {
+										this.props.remove(user);
+									}}
+									colour={COLOUR_DUSK}
+								/>
+								{/* <ConfirmActions declineOnly onDecline={() => {}} /> */}
+							</div>
+						);
+					})}
+				</div>
+			);
+		}
+		return null;
+	}
+
+	render() {
+		return (
+			<div>
+				<div>{this.renderUserAdd()}</div>
+				<div>{this.renderAttendees()}</div>
+			</div>
+		);
+	}
 }
 
 const mapStateToProps = (state) => {
-  return { auth: state.auth };
+	return { auth: state.auth };
 };
 
 let exportObj = connect(mapStateToProps, {})(withRouter(AudienceIncluder));