@plusscommunities/pluss-circles-web 1.5.4-auth.0 → 1.5.6

package/src/screens/AddCircle.js

@@ -1,487 +1,546 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { PlussCore } from '../feature.config';
-import { circleActions } from '../apis';
-import { circlesLoaded, circleUpdated } from '../actions';
-import { values } from '../values.config';
+import React, { Component } from "react";
+import { withRouter } from "react-router";
+import _ from "lodash";
+import { connect } from "react-redux";
+import { PlussCore } from "../feature.config";
+import { circleActions } from "../apis";
+import { circlesLoaded, circleUpdated } from "../actions";
+import { values } from "../values.config";
 
 const { Actions, Components, Session, Apis, Colours, Helper } = PlussCore;
 
 class AddCircle extends Component {
-  constructor(props) {
-    super(props);
-
-    const circleId = Helper.safeReadParams(props, 'circleId');
-    this.state = {
-      circleId,
-      circle: _.find(props.circles, (c) => {
-        return c.Id === circleId;
-      }),
-      title: '',
-      showWarnings: false,
-      success: false,
-      users: [],
-      selectedUsers: [],
-      userSearch: '',
-      isPublic: false,
-      selectedOption: 'visibility',
-    };
-  }
-
-  componentDidMount() {
-    Session.checkLoggedIn(this, this.props.auth);
-    this.props.addRecentlyCreated(values.entityKey);
-    this.getUsers();
-
-    this.checkGetCircle();
-  }
-
-  getUsers = () => {
-    Apis.userActions
-      .fetchUsers(this.props.auth.site)
-      .then((res) => {
-        this.setState({
-          loadingAll: false,
-        });
-        if (res.userFetchFail) {
-          return;
-        }
-        if (res.data != null && !_.isEmpty(res.data.results.Items)) {
-          this.setState({
-            users: _.sortBy(res.data.results.Items, (u) => {
-              return (u.displayName || '').toLowerCase();
-            }).map((u) => {
-              return { ...u, userId: u.userId || u.Id };
-            }),
-          });
-        }
-      })
-      .catch((error) => {
-        this.setState({ loadingAll: false });
-      });
-  };
-
-  getShownUsers = () => {
-    return _.filter(this.state.users, (u) => {
-      if (
-        _.some(this.state.selectedUsers, (selectedUser) => {
-          return u.userId === selectedUser.userId;
-        })
-      ) {
-        return false;
-      }
-      if (!_.isEmpty(this.state.userSearch)) {
-        return (u.displayName || '').toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1;
-      }
-      return true;
-    });
-  };
-
-  parseCircle = (circle) => {
-    const selectedUsers = circle.Audience.map((user) => {
-      return {
-        userId: user.userId,
-        profilePic: user.profilePic,
-        displayName: user.displayName,
-        isAdmin: user.isAdmin,
-      };
-    });
-    const newState = {
-      title: circle.Title,
-      isPublic: !!circle.IsPublic,
-      selectedUsers,
-    };
-    this.setState(newState);
-
-    if (!_.isEmpty(circle.Image)) {
-      this.checkSetImage(circle.Image);
-    }
-  };
-
-  checkSetImage(url) {
-    if (this.imageInput) {
-      this.setState({
-        image: url,
-      });
-      this.imageInput.setValue(url);
-    } else {
-      setTimeout(() => {
-        this.checkSetImage(url);
-      }, 100);
-    }
-  }
-
-  checkGetCircle = () => {
-    if (!this.state.circleId) {
-      return;
-    }
-    if (this.state.circle) {
-      return this.parseCircle(this.state.circle);
-    }
-    const { auth } = this.props;
-    this.setState({ loadingAll: true }, async () => {
-      try {
-        const res = await circleActions.getAll(auth.site);
-        console.log('getData', res.data);
-        const circle = _.find(res.data, (c) => {
-          return c.Id === this.state.circleId;
-        });
-
-        this.props.circlesLoaded(res.data);
-        this.setState({ loadingAll: false, circle });
-        this.parseCircle(circle);
-      } catch (error) {
-        console.error('getData', error);
-        this.setState({ loadingAll: false });
-      }
-    });
-  };
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  onImageUpdated = (url) => {
-    this.setState({
-      image: url,
-    });
-  };
-
-  toggleSelf = () => {
-    this.setState({
-      includeSelf: !this.state.includeSelf,
-    });
-  };
-
-  onSelectUser = (user) => {
-    const newState = {
-      selectedUsers: _.xor(this.state.selectedUsers, [user]),
-    };
-    if (_.isEmpty(this.state.title) && _.includes(newState.selectedUsers, user)) {
-      newState.title = `${user.displayName.split(' ')[0]}'s Circle`;
-    }
-    this.setState(newState);
-  };
-
-  onSave = () => {
-    this.setState({ showWarnings: false });
-    if (!this.validateForm()) {
-      this.setState({ showWarnings: true });
-      return;
-    }
-    if (this.state.updating) return;
-    this.setState({ updating: true });
-    const audience = this.state.selectedUsers.map((user) => {
-      return {
-        userId: user.userId,
-        profilePic: user.profilePic,
-        displayName: user.displayName,
-        isAdmin: user.isAdmin,
-      };
-    });
-
-    if (this.state.circleId) {
-      circleActions
-        .edit(this.state.circleId, this.state.title, this.state.image, audience, this.state.isPublic)
-        .then((res) => {
-          this.setState({
-            success: true,
-            updating: false,
-          });
-          console.log('success');
-          this.props.circleUpdated(res.data);
-        })
-        .catch((err) => {
-          console.log('error');
-          this.setState({ updating: false });
-          alert('Something went wrong with the request. Please try again.');
-        });
-    } else {
-      circleActions
-        .add(this.props.auth.site, this.state.title, this.state.image, audience, this.state.isPublic)
-        .then((res) => {
-          this.setState({
-            success: true,
-            updating: false,
-          });
-          console.log('success');
-          this.props.circleUpdated(res.data);
-        })
-        .catch((err) => {
-          console.log('error');
-          this.setState({ updating: false });
-          alert('Something went wrong with the request. Please try again.');
-        });
-    }
-  };
-
-  getSelectableUsers() {
-    return _.filter(this.state.users, (user) => {
-      if (
-        _.some(this.state.selectedUsers, (selectedUser) => {
-          return user.userId === selectedUser.userId;
-        })
-      ) {
-        return false;
-      }
-      return true;
-    });
-  }
-
-  validateForm() {
-    if (_.isEmpty(this.state.title)) return false;
-    return true;
-  }
-
-  addAdmin = (user) => {
-    user.isAdmin = true;
-    this.setState({
-      selectedUsers: [...this.state.selectedUsers],
-    });
-  };
-
-  removeAdmin = (user) => {
-    user.isAdmin = false;
-    this.setState({
-      selectedUsers: [...this.state.selectedUsers],
-    });
-  };
-
-  renderSuccess() {
-    if (!this.state.success) return null;
-    return (
-      <Components.SuccessPopup
-        text={`${_.capitalize(values.entityName)} has been ${this.state.circleId == null ? 'added' : 'edited'}`}
-        buttons={[
-          {
-            type: 'outlined',
-            onClick: () => {
-              window.history.back();
-            },
-            text: `Back to ${values.textFeatureTitle}`,
-          },
-        ]}
-      />
-    );
-  }
-
-  renderSubmit() {
-    if (this.state.updating) {
-      return <Components.Button buttonType="secondary">Saving...</Components.Button>;
-    }
-
-    return (
-      <div>
-        <Components.Button
-          inline
-          buttonType="tertiary"
-          onClick={() => this.props.history.push(`/${values.featureKey}`)}
-          isActive
-          style={{ marginRight: 16 }}
-        >
-          Cancel
-        </Components.Button>
-        <Components.Button inline buttonType="primary" onClick={this.onSave} isActive={this.validateForm()}>
-          Save
-        </Components.Button>
-      </div>
-    );
-  }
-
-  renderVisibility() {
-    return (
-      <div className="optionsContent_bottom">
-        <Components.RadioButton
-          label={`Do you want to make this ${values.entityName} a public ${values.entityName}?`}
-          isActive={this.state.isPublic}
-          options={[
-            { Label: 'Yes', Value: true, onChange: () => this.setState({ isPublic: true }) },
-            { Label: 'No', Value: false, onChange: () => this.setState({ isPublic: false }) },
-          ]}
-        />
-        <div className="genericInput-help" style={{ marginTop: 4 }}>
-          {`This will allow anyone in the community to view and join the ${values.entityName}.`}
-        </div>
-      </div>
-    );
-  }
-
-  renderSelectedOption() {
-    return (
-      <div>
-        <div style={{ display: this.state.selectedOption === 'visibility' ? 'block' : 'none' }}>{this.renderVisibility()}</div>
-      </div>
-    );
-  }
-
-  renderOptionsSection() {
-    let options = [
-      {
-        key: 'visibility',
-        icon: 'people3',
-        text: 'Visibility',
-      },
-    ];
-    if (!this.props.circleAllowPublicCircles) {
-      options = _.filter(options, (o) => {
-        return o.key !== 'visibility';
-      });
-    }
-    if (_.isEmpty(options)) {
-      return null;
-    }
-    return (
-      <Components.OptionsSection options={options} selected={this.state.selectedOption} selectOption={this.selectOption}>
-        {this.renderSelectedOption()}
-      </Components.OptionsSection>
-    );
-  }
-
-  renderMain() {
-    return (
-      <div>
-        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
-          <Components.Text type="formTitleLarge" className="marginBottom-24">
-            {this.state.circleId == null ? 'New' : 'Edit'} {_.capitalize(values.entityName)}
-          </Components.Text>
-          {/* Resident Information */}
-          <div className="flex flex-reverse">
-            <Components.ImageInput
-              ref={(ref) => {
-                this.imageInput = ref;
-              }}
-              label="IMAGE"
-              limit={1}
-              refreshCallback={this.onImageUpdated}
-              containerStyle={{ marginLeft: 40 }}
-            />
-            <div className="flex-1">
-              <Components.GenericInput
-                id="title"
-                type="text"
-                label="Title"
-                placeholder={`Name the ${_.capitalize(values.entityName)}`}
-                value={this.state.title}
-                onChange={(e) => this.onHandleChange(e)}
-                isRequired
-                alwaysShowLabel
-                isValid={() => {
-                  return !_.isEmpty(this.state.title);
-                }}
-                showError={() => {
-                  return this.state.showWarnings && _.isEmpty(this.state.title);
-                }}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
-          <Components.Text type="formTitleMedium">Members</Components.Text>
-          <div className="flex marginTop-20">
-            <div className="flex-1">
-              <Components.Text type="formTitleSmall" className="marginBottom-10">
-                Select Users
-              </Components.Text>
-              <Components.GenericInput
-                id="userSearch"
-                type="text"
-                label="Search"
-                placeholder="Enter name"
-                value={this.state.userSearch}
-                onChange={(e) => this.onHandleChange(e)}
-                alwaysShowLabel
-              />
-              {this.getShownUsers().map((user) => {
-                return (
-                  <Components.UserListing
-                    key={user.userId}
-                    user={user}
-                    onClick={() => {
-                      this.onSelectUser(user);
-                    }}
-                  />
-                );
-              })}
-            </div>
-            <div className="flex-1">
-              <Components.Text type="formTitleSmall" className="marginBottom-10">
-                Selected
-              </Components.Text>
-              {this.state.selectedUsers.map((user) => {
-                return (
-                  <Components.UserListing
-                    key={user.userId}
-                    user={user}
-                    rightContent={
-                      <div className="flex flex-reverse flex-center">
-                        <Components.SVGIcon
-                          className="removeIcon marginLeft-8"
-                          icon="close"
-                          colour={Colours.COLOUR_DUSK}
-                          onClick={() => {
-                            this.onSelectUser(user);
-                          }}
-                        />
-                        <Components.StatusButton
-                          isActive={user.isAdmin}
-                          activate={() => {
-                            this.addAdmin(user);
-                          }}
-                          deactivate={() => {
-                            this.removeAdmin(user);
-                          }}
-                          activeText="Admin"
-                          activateText="Make Admin"
-                          deactivateText="Remove Admin"
-                          inactiveText="Not Admin"
-                        />
-                      </div>
-                    }
-                  />
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {this.renderOptionsSection()}
-      </div>
-    );
-  }
-
-  render() {
-    const { success } = this.state;
-
-    return (
-      <Components.OverlayPage>
-        <Components.OverlayPageContents noBottomButtons={success}>
-          <Components.OverlayPageSection className="pageSectionWrapper--newPopup">
-            <div>
-              {this.renderSuccess()}
-              {!success && this.renderMain()}
-            </div>
-          </Components.OverlayPageSection>
-        </Components.OverlayPageContents>
-        <Components.OverlayPageBottomButtons>{this.renderSubmit()}</Components.OverlayPageBottomButtons>
-      </Components.OverlayPage>
-    );
-  }
+	constructor(props) {
+		super(props);
+
+		const circleId = Helper.safeReadParams(props, "circleId");
+		this.state = {
+			circleId,
+			circle: _.find(props.circles, (c) => {
+				return c.Id === circleId;
+			}),
+			title: "",
+			showWarnings: false,
+			success: false,
+			users: [],
+			selectedUsers: [],
+			userSearch: "",
+			isPublic: false,
+			selectedOption: "visibility",
+		};
+	}
+
+	componentDidMount() {
+		Session.checkLoggedIn(this, this.props.auth);
+		this.props.addRecentlyCreated(values.entityKey);
+		this.getUsers();
+
+		this.checkGetCircle();
+	}
+
+	getUsers = () => {
+		Apis.userActions
+			.fetchUsers(this.props.auth.site)
+			.then((res) => {
+				this.setState({
+					loadingAll: false,
+				});
+				if (res.userFetchFail) {
+					return;
+				}
+				if (res.data != null && !_.isEmpty(res.data.results.Items)) {
+					this.setState({
+						users: _.sortBy(res.data.results.Items, (u) => {
+							return (u.displayName || "").toLowerCase();
+						}).map((u) => {
+							return { ...u, userId: u.userId || u.Id };
+						}),
+					});
+				}
+			})
+			.catch((error) => {
+				this.setState({ loadingAll: false });
+			});
+	};
+
+	getShownUsers = () => {
+		return _.filter(this.state.users, (u) => {
+			if (
+				_.some(this.state.selectedUsers, (selectedUser) => {
+					return u.userId === selectedUser.userId;
+				})
+			) {
+				return false;
+			}
+			if (!_.isEmpty(this.state.userSearch)) {
+				return (
+					(u.displayName || "")
+						.toLowerCase()
+						.indexOf(this.state.userSearch.toLowerCase()) > -1
+				);
+			}
+			return true;
+		});
+	};
+
+	parseCircle = (circle) => {
+		const selectedUsers = circle.Audience.map((user) => {
+			return {
+				userId: user.userId,
+				profilePic: user.profilePic,
+				displayName: user.displayName,
+				isAdmin: user.isAdmin,
+			};
+		});
+		const newState = {
+			title: circle.Title,
+			isPublic: !!circle.IsPublic,
+			selectedUsers,
+		};
+		this.setState(newState);
+
+		if (!_.isEmpty(circle.Image)) {
+			this.checkSetImage(circle.Image);
+		}
+	};
+
+	checkSetImage(url) {
+		if (this.imageInput) {
+			this.setState({
+				image: url,
+			});
+			this.imageInput.setValue(url);
+		} else {
+			setTimeout(() => {
+				this.checkSetImage(url);
+			}, 100);
+		}
+	}
+
+	checkGetCircle = () => {
+		if (!this.state.circleId) {
+			return;
+		}
+		if (this.state.circle) {
+			return this.parseCircle(this.state.circle);
+		}
+		const { auth } = this.props;
+		this.setState({ loadingAll: true }, async () => {
+			try {
+				const res = await circleActions.getAll(auth.site);
+				console.log("getData", res.data);
+				const circle = _.find(res.data, (c) => {
+					return c.Id === this.state.circleId;
+				});
+
+				this.props.circlesLoaded(res.data);
+				this.setState({ loadingAll: false, circle });
+				this.parseCircle(circle);
+			} catch (error) {
+				console.error("getData", error);
+				this.setState({ loadingAll: false });
+			}
+		});
+	};
+
+	onHandleChange = (event) => {
+		var stateChange = {};
+		stateChange[event.target.getAttribute("id")] = event.target.value;
+		this.setState(stateChange);
+	};
+
+	onImageUpdated = (url) => {
+		this.setState({
+			image: url,
+		});
+	};
+
+	toggleSelf = () => {
+		this.setState({
+			includeSelf: !this.state.includeSelf,
+		});
+	};
+
+	onSelectUser = (user) => {
+		const newState = {
+			selectedUsers: _.xor(this.state.selectedUsers, [user]),
+		};
+		if (
+			_.isEmpty(this.state.title) &&
+			_.includes(newState.selectedUsers, user)
+		) {
+			newState.title = `${user.displayName.split(" ")[0]}'s Circle`;
+		}
+		this.setState(newState);
+	};
+
+	onSave = () => {
+		this.setState({ showWarnings: false });
+		if (!this.validateForm()) {
+			this.setState({ showWarnings: true });
+			return;
+		}
+		if (this.state.updating) return;
+		this.setState({ updating: true });
+		const audience = this.state.selectedUsers.map((user) => {
+			return {
+				userId: user.userId,
+				profilePic: user.profilePic,
+				displayName: user.displayName,
+				isAdmin: user.isAdmin,
+			};
+		});
+
+		if (this.state.circleId) {
+			circleActions
+				.edit(
+					this.state.circleId,
+					this.state.title,
+					this.state.image,
+					audience,
+					this.state.isPublic,
+				)
+				.then((res) => {
+					this.setState({
+						success: true,
+						updating: false,
+					});
+					console.log("success");
+					this.props.circleUpdated(res.data);
+				})
+				.catch((err) => {
+					console.log("error");
+					this.setState({ updating: false });
+					alert("Something went wrong with the request. Please try again.");
+				});
+		} else {
+			circleActions
+				.add(
+					this.props.auth.site,
+					this.state.title,
+					this.state.image,
+					audience,
+					this.state.isPublic,
+				)
+				.then((res) => {
+					this.setState({
+						success: true,
+						updating: false,
+					});
+					console.log("success");
+					this.props.circleUpdated(res.data);
+				})
+				.catch((err) => {
+					console.log("error");
+					this.setState({ updating: false });
+					alert("Something went wrong with the request. Please try again.");
+				});
+		}
+	};
+
+	getSelectableUsers() {
+		return _.filter(this.state.users, (user) => {
+			if (
+				_.some(this.state.selectedUsers, (selectedUser) => {
+					return user.userId === selectedUser.userId;
+				})
+			) {
+				return false;
+			}
+			return true;
+		});
+	}
+
+	validateForm() {
+		if (_.isEmpty(this.state.title)) return false;
+		return true;
+	}
+
+	addAdmin = (user) => {
+		user.isAdmin = true;
+		this.setState({
+			selectedUsers: [...this.state.selectedUsers],
+		});
+	};
+
+	removeAdmin = (user) => {
+		user.isAdmin = false;
+		this.setState({
+			selectedUsers: [...this.state.selectedUsers],
+		});
+	};
+
+	renderSuccess() {
+		if (!this.state.success) return null;
+		return (
+			<Components.SuccessPopup
+				text={`${_.capitalize(values.entityName)} has been ${this.state.circleId == null ? "added" : "edited"}`}
+				buttons={[
+					{
+						type: "outlined",
+						onClick: () => {
+							window.history.back();
+						},
+						text: `Back to ${values.textFeatureTitle}`,
+					},
+				]}
+			/>
+		);
+	}
+
+	renderSubmit() {
+		if (this.state.updating) {
+			return (
+				<Components.Button buttonType="secondary">Saving...</Components.Button>
+			);
+		}
+
+		return (
+			<div>
+				<Components.Button
+					inline
+					buttonType="tertiary"
+					onClick={() => this.props.history.push(`/${values.featureKey}`)}
+					isActive
+					style={{ marginRight: 16 }}
+				>
+					Cancel
+				</Components.Button>
+				<Components.Button
+					inline
+					buttonType="primary"
+					onClick={this.onSave}
+					isActive={this.validateForm()}
+				>
+					Save
+				</Components.Button>
+			</div>
+		);
+	}
+
+	renderVisibility() {
+		return (
+			<div className="optionsContent_bottom">
+				<Components.RadioButton
+					label={`Do you want to make this ${values.entityName} a public ${values.entityName}?`}
+					isActive={this.state.isPublic}
+					options={[
+						{
+							Label: "Yes",
+							Value: true,
+							onChange: () => this.setState({ isPublic: true }),
+						},
+						{
+							Label: "No",
+							Value: false,
+							onChange: () => this.setState({ isPublic: false }),
+						},
+					]}
+				/>
+				<div className="genericInput-help" style={{ marginTop: 4 }}>
+					{`This will allow anyone in the community to view and join the ${values.entityName}.`}
+				</div>
+			</div>
+		);
+	}
+
+	renderSelectedOption() {
+		return (
+			<div>
+				<div
+					style={{
+						display:
+							this.state.selectedOption === "visibility" ? "block" : "none",
+					}}
+				>
+					{this.renderVisibility()}
+				</div>
+			</div>
+		);
+	}
+
+	renderOptionsSection() {
+		let options = [
+			{
+				key: "visibility",
+				icon: "people3",
+				text: "Visibility",
+			},
+		];
+		if (!this.props.circleAllowPublicCircles) {
+			options = _.filter(options, (o) => {
+				return o.key !== "visibility";
+			});
+		}
+		if (_.isEmpty(options)) {
+			return null;
+		}
+		return (
+			<Components.OptionsSection
+				options={options}
+				selected={this.state.selectedOption}
+				selectOption={this.selectOption}
+			>
+				{this.renderSelectedOption()}
+			</Components.OptionsSection>
+		);
+	}
+
+	renderMain() {
+		return (
+			<div>
+				<div className="padding-60 paddingVertical-40 bottomDivideBorder">
+					<Components.Text type="formTitleLarge" className="marginBottom-24">
+						{this.state.circleId == null ? "New" : "Edit"}{" "}
+						{_.capitalize(values.entityName)}
+					</Components.Text>
+					{/* Resident Information */}
+					<div className="flex flex-reverse">
+						<Components.ImageInput
+							ref={(ref) => {
+								this.imageInput = ref;
+							}}
+							label="IMAGE"
+							limit={1}
+							refreshCallback={this.onImageUpdated}
+							containerStyle={{ marginLeft: 40 }}
+						/>
+						<div className="flex-1">
+							<Components.GenericInput
+								id="title"
+								type="text"
+								label="Title"
+								placeholder={`Name the ${_.capitalize(values.entityName)}`}
+								value={this.state.title}
+								onChange={(e) => this.onHandleChange(e)}
+								isRequired
+								alwaysShowLabel
+								isValid={() => {
+									return !_.isEmpty(this.state.title);
+								}}
+								showError={() => {
+									return this.state.showWarnings && _.isEmpty(this.state.title);
+								}}
+							/>
+						</div>
+					</div>
+				</div>
+				<div className="padding-60 paddingVertical-40 bottomDivideBorder">
+					<Components.Text type="formTitleMedium">Members</Components.Text>
+					<div className="flex marginTop-20">
+						<div className="flex-1">
+							<Components.Text
+								type="formTitleSmall"
+								className="marginBottom-10"
+							>
+								Select Users
+							</Components.Text>
+							<Components.GenericInput
+								id="userSearch"
+								type="text"
+								label="Search"
+								placeholder="Enter name"
+								value={this.state.userSearch}
+								onChange={(e) => this.onHandleChange(e)}
+								alwaysShowLabel
+							/>
+							{this.getShownUsers().map((user) => {
+								return (
+									<Components.UserListing
+										key={user.userId}
+										user={user}
+										onClick={() => {
+											this.onSelectUser(user);
+										}}
+									/>
+								);
+							})}
+						</div>
+						<div className="flex-1">
+							<Components.Text
+								type="formTitleSmall"
+								className="marginBottom-10"
+							>
+								Selected
+							</Components.Text>
+							{this.state.selectedUsers.map((user) => {
+								return (
+									<Components.UserListing
+										key={user.userId}
+										user={user}
+										rightContent={
+											<div className="flex flex-reverse flex-center">
+												<Components.SVGIcon
+													className="removeIcon marginLeft-8"
+													icon="close"
+													colour={Colours.COLOUR_DUSK}
+													onClick={() => {
+														this.onSelectUser(user);
+													}}
+												/>
+												<Components.StatusButton
+													isActive={user.isAdmin}
+													activate={() => {
+														this.addAdmin(user);
+													}}
+													deactivate={() => {
+														this.removeAdmin(user);
+													}}
+													activeText="Admin"
+													activateText="Make Admin"
+													deactivateText="Remove Admin"
+													inactiveText="Not Admin"
+												/>
+											</div>
+										}
+									/>
+								);
+							})}
+						</div>
+					</div>
+				</div>
+
+				{this.renderOptionsSection()}
+			</div>
+		);
+	}
+
+	render() {
+		const { success } = this.state;
+
+		return (
+			<Components.OverlayPage>
+				<Components.OverlayPageContents noBottomButtons={success}>
+					<Components.OverlayPageSection className="pageSectionWrapper--newPopup">
+						<div>
+							{this.renderSuccess()}
+							{!success && this.renderMain()}
+						</div>
+					</Components.OverlayPageSection>
+				</Components.OverlayPageContents>
+				<Components.OverlayPageBottomButtons>
+					{this.renderSubmit()}
+				</Components.OverlayPageBottomButtons>
+			</Components.OverlayPage>
+		);
+	}
 }
 
 const mapStateToProps = (state) => {
-  const { circles } = state[values.reducerKey];
-  const { auth } = state;
-  return {
-    circles,
-    auth,
-    circleAllowPublicCircles: Helper.getSiteSettingFromState(state, values.allowPublicKey),
-  };
+	const { circles } = state[values.reducerKey];
+	const { auth } = state;
+	return {
+		circles,
+		auth,
+		circleAllowPublicCircles: Helper.getSiteSettingFromState(
+			state,
+			values.allowPublicKey,
+		),
+	};
 };
 
-export default connect(mapStateToProps, { circlesLoaded, circleUpdated, addRecentlyCreated: Actions.addRecentlyCreated })(
-  withRouter(AddCircle),
-);
+export default connect(mapStateToProps, {
+	circlesLoaded,
+	circleUpdated,
+	addRecentlyCreated: Actions.addRecentlyCreated,
+})(withRouter(AddCircle));