@plusscommunities/pluss-circles-web-groups 1.5.6 → 1.5.7-beta.1

package/src/screens/Circles.js

@@ -1,387 +1,527 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import moment from 'moment';
-import { Link } from 'react-router-dom';
-import { PlussCore } from '../feature.config';
-import { circlesLoaded, circleRemoved } from '../actions';
-import { circleActions } from '../apis';
-import { Table } from 'react-bootstrap';
-import FontAwesome from 'react-fontawesome';
-import { values } from '../values.config';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import _ from "lodash";
+import moment from "moment";
+import { Link } from "react-router-dom";
+import { PlussCore } from "../feature.config";
+import { circlesLoaded, circleRemoved } from "../actions";
+import { circleActions } from "../apis";
+import { Table } from "react-bootstrap";
+import FontAwesome from "react-fontawesome";
+import { values } from "../values.config";
 
 const { Components, Session, Helper } = PlussCore;
 
 class Circles extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      userSearch: '',
-    };
-  }
-
-  componentDidMount() {
-    this.getData();
-  }
-
-  getData = () => {
-    const { auth } = this.props;
-    this.setState({ loadingAll: true }, async () => {
-      try {
-        const res = await circleActions.getAll(auth.site);
-        console.log('getData', res.data);
-        this.props.circlesLoaded(res.data);
-        this.setState({ loadingAll: false });
-      } catch (error) {
-        console.error('getData', error);
-        this.setState({ loadingAll: false });
-      }
-    });
-  };
-
-  getCircles() {
-    let result = this.props.circles;
-    if (this.state.selectedTypeFilter) {
-      result = _.filter(result, (circle) => {
-        return this.state.selectedTypeFilter === 'circle' ? !circle.IsPrivate : circle.IsPrivate;
-      });
-    }
-    if (this.state.selectedUserFilter) {
-      result = _.filter(result, (circle) => {
-        return _.some(circle.Audience, (user) => {
-          return user.userId === this.state.selectedUserFilter.userId;
-        });
-      });
-    }
-    return result;
-  }
-
-  getUsers() {
-    let users = [];
-    this.props.circles.forEach((circle) => {
-      circle.Audience.forEach((user) => {
-        users.push(user);
-      });
-    });
-    users = _.sortBy(
-      _.uniqBy(users, (user) => {
-        return user.userId;
-      }),
-      'displayName',
-    );
-    return _.filter(users, (u) => {
-      if (!_.isEmpty(this.state.userSearch)) {
-        return (u.displayName || '').toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1;
-      }
-      return true;
-    });
-  }
-
-  validateCircleAdmin(circle, onlyCreator) {
-    if (Session.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
-      return true;
-    }
-    if (onlyCreator) {
-      return (circle.Creator && circle.Creator.userId === this.props.user.Id) || circle.CreatorId === this.props.user.Id;
-    }
-    return _.some(circle.Audience, (user) => {
-      return user.userId === this.props.user.Id && user.isAdmin;
-    });
-  }
-
-  canAddNew = () => {
-    const { auth } = this.props;
-    return Session.validateAccess(auth.site, values.permission, auth);
-  };
-
-  onAddNew = () => {
-    const { auth } = this.props;
-    if (Session.validateAccess(auth.site, values.permission, auth)) {
-      this.props.history.push(`/${values.featureKey}/add`);
-    }
-  };
-
-  openUserFilter = () => {
-    this.setState({
-      userFilterOpen: true,
-    });
-  };
-
-  closeUserFilter = () => {
-    this.setState({
-      userFilterOpen: false,
-    });
-  };
-
-  selectUserFilter = (user) => {
-    this.setState({
-      selectedUserFilter: user,
-      userFilterOpen: false,
-    });
-  };
-
-  removeUserFilter = (event) => {
-    event.stopPropagation();
-    this.setState({
-      selectedUserFilter: null,
-    });
-  };
-
-  openTypeFilter = () => {
-    this.setState({
-      typeFilterOpen: true,
-    });
-  };
-
-  closeTypeFilter = () => {
-    this.setState({
-      typeFilterOpen: false,
-    });
-  };
-
-  selectTypeFilter = (type) => {
-    this.setState({
-      selectedTypeFilter: type,
-      typeFilterOpen: false,
-    });
-  };
-
-  removeTypeFilter = (event) => {
-    event.stopPropagation();
-    this.setState({
-      selectedTypeFilter: null,
-    });
-  };
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  removeCircle = (circle) => {
-    if (
-      window.confirm(
-        `Are you sure you want to delete that ${values.entityName}? You will no longer be able to access the messages in the ${values.entityName}.`,
-      )
-    ) {
-      this.props.circleRemoved(circle.Id);
-      circleActions
-        .delete(circle.Id)
-        .then((res) => {
-          this.getData();
-        })
-        .catch((res) => {
-          alert('Something went wrong with the request. Please try again.');
-        });
-    }
-  };
-
-  getTypeFilterText = (type) => {
-    if (type === 'private') {
-      return 'Private Message';
-    }
-    return _.capitalize(values.entityName);
-  };
-
-  getTitle = (circle) => {
-    if (circle.IsPrivate) {
-      return `PM: ${circle.Audience.map((user) => {
-        return user.displayName;
-      }).join(', ')}`;
-    }
-    return circle.Title;
-  };
-
-  renderRow(circle) {
-    return (
-      <tr key={circle.Id}>
-        <td className="table-TitleColumn">
-          <Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>{this.getTitle(circle)}</Link>
-        </td>
-        <td>{moment(circle.Changed).local().format('D MMM YYYY')}</td>
-        <td>
-          {circle.Audience.map((user) => {
-            return (
-              <Components.ProfilePic
-                size={30}
-                image={user.profilePic}
-                hoverText={user.displayName}
-                containerClass="circleTableProfilePic"
-              />
-            );
-          })}
-        </td>
-        <td className="table-options">
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            {this.validateCircleAdmin(circle) && !circle.IsPrivate && (
-              <Link to={`/${values.featureKey}/edit/${circle.Id}`}>
-                <FontAwesome
-                  style={{
-                    fontSize: 20,
-                    padding: 5,
-                    marginLeft: 12,
-                    cursor: 'pointer',
-                  }}
-                  name="pencil"
-                />
-              </Link>
-            )}
-            {this.validateCircleAdmin(circle, true) && !circle.IsPrivate && (
-              <a
-                onClick={() => {
-                  this.removeCircle(circle);
-                }}
-              >
-                <FontAwesome
-                  style={{
-                    fontSize: 20,
-                    padding: 5,
-                    marginLeft: 12,
-                    cursor: 'pointer',
-                  }}
-                  name="minus-circle"
-                />
-              </a>
-            )}
-          </div>
-        </td>
-      </tr>
-    );
-  }
-
-  renderFilters() {
-    let userFilter = <Components.Tag className="marginRight-10" onClick={this.openUserFilter} text="User" />;
-    let typeFilter = <Components.Tag className="marginRight-10" onClick={this.openTypeFilter} text="Type" />;
-
-    if (this.state.selectedUserFilter) {
-      userFilter = (
-        <Components.Tag className="marginRight-10" onClick={this.openUserFilter} rightIcon="close" rightClick={this.removeUserFilter}>
-          <Components.UserListing size={15} user={this.state.selectedUserFilter} textClass="tag_text" />
-        </Components.Tag>
-      );
-    }
-    if (this.state.selectedTypeFilter) {
-      typeFilter = (
-        <Components.Tag
-          className="marginRight-10"
-          onClick={this.openTypeFilter}
-          rightIcon="close"
-          rightClick={this.removeTypeFilter}
-          text={this.getTypeFilterText(this.state.selectedTypeFilter)}
-        />
-      );
-    }
-    return (
-      <div className="flex flex-center marginTop-20">
-        <Components.Text type="h5" className="marginRight-20">
-          Filter by
-        </Components.Text>
-        {userFilter}
-        {typeFilter}
-      </div>
-    );
-  }
-
-  renderUserFilterPopup() {
-    if (!this.state.userFilterOpen) {
-      return null;
-    }
-    return (
-      <Components.Popup title="Select User" maxWidth={600} minWidth={400} minHeight={400} hasPadding onClose={this.closeUserFilter}>
-        <Components.GenericInput
-          id="userSearch"
-          type="text"
-          label="Search"
-          placeholder="Enter name"
-          value={this.state.userSearch}
-          onChange={(e) => this.onHandleChange(e)}
-          alwaysShowLabel
-        />
-        {this.getUsers().map((user) => {
-          return (
-            <Components.UserListing
-              key={user.userId}
-              user={user}
-              onClick={() => {
-                this.selectUserFilter(user);
-              }}
-            />
-          );
-        })}
-      </Components.Popup>
-    );
-  }
-
-  renderTypeFilterPopup() {
-    if (!this.state.typeFilterOpen) {
-      return null;
-    }
-    return (
-      <Components.Popup title="Select Type" maxWidth={600} minWidth={400} hasPadding onClose={this.closeTypeFilter}>
-        <Components.Tag
-          onClick={() => {
-            this.selectTypeFilter('circle');
-          }}
-          text={_.capitalize(values.entityName)}
-          className="marginRight-10"
-        />
-        <Components.Tag
-          onClick={() => {
-            this.selectTypeFilter('private');
-          }}
-          text="Private Message"
-        />
-      </Components.Popup>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        {this.renderTypeFilterPopup()}
-        {this.renderUserFilterPopup()}
-        <Components.Header>
-          {this.canAddNew() && <Components.AddButton onClick={this.onAddNew} text={`NEW ${_.upperCase(values.entityName)}`} />}
-        </Components.Header>
-        <div className="pageContainer paddingVertical-20 paddingHorizontal-40">
-          <Components.Text type="h1" className="">
-            {values.textFeatureTitle}
-          </Components.Text>
-          {this.renderFilters()}
-
-          <Table className="plussTable" striped bordered condensed hover style={{ minWidth: '100%' }}>
-            <thead>
-              <tr>
-                <th>Title</th>
-                <th>Last updated</th>
-                <th>Members</th>
-                <th style={{ width: 50 }} />
-              </tr>
-            </thead>
-            <tbody>
-              {this.getCircles().map((circle) => {
-                return this.renderRow(circle);
-              })}
-            </tbody>
-          </Table>
-        </div>
-      </div>
-    );
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			userSearch: "",
+			sortBy: "newest",
+			showUnreadOnly: false,
+		pollingInterval: null,
+		};
+	}
+
+	componentDidMount() {
+		this.getData();
+		// Poll for updates every 10 seconds
+		this.pollingInterval = setInterval(() => {
+			this.getData();
+		}, 10000);
+	}
+
+	getData = () => {
+		const { auth } = this.props;
+		this.setState({ loadingAll: true }, async () => {
+			try {
+				const res = await circleActions.getAll(auth.site);
+				console.log("getData", res.data);
+				this.props.circlesLoaded(res.data);
+				this.setState({ loadingAll: false });
+			} catch (error) {
+				console.error("getData", error);
+				this.setState({ loadingAll: false });
+			}
+		});
+	};
+
+	componentWillUnmount() {
+		if (this.pollingInterval) {
+			clearInterval(this.pollingInterval);
+		}
+	}
+
+	isCircleUnread(circle) {
+		const userId = this.props.user.Id;
+		if (!circle.Unread || !circle.Unread[userId]) {
+			return false;
+		}
+		return circle.Unread[userId] > 0;
+	}
+
+	getUnreadCount(circle) {
+		const userId = this.props.user.Id;
+		if (!circle.Unread || !circle.Unread[userId]) {
+			return 0;
+		}
+		return circle.Unread[userId];
+	}
+
+	selectUnreadFilter = (showUnreadOnly) => {
+		this.setState({ showUnreadOnly });
+	};
+	getCircles() {
+		let result = this.props.circles;
+		if (this.state.selectedTypeFilter) {
+			result = _.filter(result, (circle) => {
+				return this.state.selectedTypeFilter === "circle"
+					? !circle.IsPrivate
+					: circle.IsPrivate;
+			});
+		}
+		if (this.state.selectedUserFilter) {
+			result = _.filter(result, (circle) => {
+				return _.some(circle.Audience, (user) => {
+					return user.userId === this.state.selectedUserFilter.userId;
+				});
+			});
+		}
+		// Apply sorting
+		result = _.sortBy(result, (circle) => {
+			return moment(circle.Changed).valueOf();
+		});
+		if (this.state.sortBy === "newest") {
+			result.reverse();
+		if (this.state.showUnreadOnly) {
+			result = _.filter(result, (circle) => {
+				return this.isCircleUnread(circle);
+			});
+		}
+		}
+		return result;
+	}
+
+	getUsers() {
+		let users = [];
+		this.props.circles.forEach((circle) => {
+			circle.Audience.forEach((user) => {
+				users.push(user);
+			});
+		});
+		users = _.sortBy(
+			_.uniqBy(users, (user) => {
+				return user.userId;
+			}),
+			"displayName",
+		);
+		return _.filter(users, (u) => {
+			if (!_.isEmpty(this.state.userSearch)) {
+				return (
+					(u.displayName || "")
+						.toLowerCase()
+						.indexOf(this.state.userSearch.toLowerCase()) > -1
+				);
+			}
+			return true;
+		});
+	}
+
+	validateCircleAdmin(circle, onlyCreator) {
+		if (
+			Session.validateAccess(
+				this.props.auth.site,
+				values.permission,
+				this.props.auth,
+			)
+		) {
+			return true;
+		}
+		if (onlyCreator) {
+			return (
+				(circle.Creator && circle.Creator.userId === this.props.user.Id) ||
+				circle.CreatorId === this.props.user.Id
+			);
+		}
+		return _.some(circle.Audience, (user) => {
+			return user.userId === this.props.user.Id && user.isAdmin;
+		});
+	}
+
+	canAddNew = () => {
+		const { auth } = this.props;
+		return Session.validateAccess(auth.site, values.permission, auth);
+	};
+
+	onAddNew = () => {
+		const { auth } = this.props;
+		if (Session.validateAccess(auth.site, values.permission, auth)) {
+			this.props.history.push(`/${values.featureKey}/add`);
+		}
+	};
+
+	openUserFilter = () => {
+		this.setState({
+			userFilterOpen: true,
+		});
+	};
+
+	closeUserFilter = () => {
+		this.setState({
+			userFilterOpen: false,
+		});
+	};
+
+	selectUserFilter = (user) => {
+		this.setState({
+			selectedUserFilter: user,
+			userFilterOpen: false,
+		});
+	};
+
+	removeUserFilter = (event) => {
+		event.stopPropagation();
+		this.setState({
+			selectedUserFilter: null,
+		});
+	};
+
+	openTypeFilter = () => {
+		this.setState({
+			typeFilterOpen: true,
+		});
+	};
+
+	closeTypeFilter = () => {
+		this.setState({
+			typeFilterOpen: false,
+		});
+	};
+
+	selectTypeFilter = (type) => {
+		this.setState({
+			selectedTypeFilter: type,
+			typeFilterOpen: false,
+		});
+	};
+
+	removeTypeFilter = (event) => {
+		event.stopPropagation();
+		this.setState({
+			selectedTypeFilter: null,
+		});
+	};
+
+	selectSort = (sortType) => {
+		this.setState({
+			sortBy: sortType,
+		});
+	};
+
+	onHandleChange = (event) => {
+		var stateChange = {};
+		stateChange[event.target.getAttribute("id")] = event.target.value;
+		this.setState(stateChange);
+	};
+
+	removeCircle = (circle) => {
+		if (
+			window.confirm(
+				`Are you sure you want to delete that ${values.entityName}? You will no longer be able to access the messages in the ${values.entityName}.`,
+			)
+		) {
+			this.props.circleRemoved(circle.Id);
+			circleActions
+				.delete(circle.Id)
+				.then((res) => {
+					this.getData();
+				})
+				.catch((res) => {
+					alert("Something went wrong with the request. Please try again.");
+				});
+		}
+	};
+
+	getTypeFilterText = (type) => {
+		if (type === "private") {
+			return "Private Message";
+		}
+		return _.capitalize(values.entityName);
+	};
+
+	getTitle = (circle) => {
+		if (circle.IsPrivate) {
+			return `PM: ${circle.Audience.map((user) => {
+				return user.displayName;
+			}).join(", ")}`;
+		}
+		return circle.Title;
+	};
+
+	renderRow(circle) {
+		return (
+			<tr key={circle.Id}>
+				<td className="table-TitleColumn">
+					<Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>
+						{this.getTitle(circle)}
+					</Link>
+				</td>
+				<td>{moment(circle.Changed).local().format("D MMM YYYY")}</td>
+				<td>
+					{circle.Audience.map((user) => {
+						return (
+							<Components.ProfilePic
+								size={30}
+								image={user.profilePic}
+								hoverText={user.displayName}
+								containerClass="circleTableProfilePic"
+							/>
+						);
+					})}
+				</td>
+				<td className="table-options">
+					<div style={{ display: "flex", alignItems: "center" }}>
+						{this.validateCircleAdmin(circle) && !circle.IsPrivate && (
+							<Link to={`/${values.featureKey}/edit/${circle.Id}`}>
+								<FontAwesome
+									style={{
+										fontSize: 20,
+										padding: 5,
+										marginLeft: 12,
+										cursor: "pointer",
+									}}
+									name="pencil"
+								/>
+							</Link>
+						)}
+						{this.validateCircleAdmin(circle, true) && !circle.IsPrivate && (
+							<a
+								onClick={() => {
+									this.removeCircle(circle);
+								}}
+							>
+								<FontAwesome
+									style={{
+										fontSize: 20,
+										padding: 5,
+										marginLeft: 12,
+										cursor: "pointer",
+									}}
+									name="minus-circle"
+								/>
+							</a>
+						)}
+					</div>
+				</td>
+			</tr>
+		);
+	}
+
+	renderFilters() {
+		let userFilter = (
+			<Components.Tag
+				className="marginRight-10"
+				onClick={this.openUserFilter}
+				text="User"
+			/>
+		);
+
+		let unreadFilter = (
+			<Components.Tag
+				className="marginRight-10"
+				onClick={() => this.selectUnreadFilter(!this.state.showUnreadOnly)}
+				leftIcon={this.state.showUnreadOnly ? "check" : null}
+				text="Unread Only"
+			/>
+		);
+
+		let typeFilter = (
+			<Components.Tag
+				className="marginRight-10"
+				onClick={this.openTypeFilter}
+				text="Type"
+			/>
+		);
+
+		if (this.state.selectedUserFilter) {
+			userFilter = (
+				<Components.Tag
+					className="marginRight-10"
+					onClick={this.openUserFilter}
+					rightIcon="close"
+					rightClick={this.removeUserFilter}
+				>
+					<Components.UserListing
+						size={15}
+						user={this.state.selectedUserFilter}
+						textClass="tag_text"
+					/>
+				</Components.Tag>
+			);
+		}
+		if (this.state.selectedTypeFilter) {
+			typeFilter = (
+				<Components.Tag
+					className="marginRight-10"
+					onClick={this.openTypeFilter}
+					rightIcon="close"
+					rightClick={this.removeTypeFilter}
+					text={this.getTypeFilterText(this.state.selectedTypeFilter)}
+				/>
+			);
+		}
+		return (
+			<div className="flex flex-center marginTop-20">
+				<Components.Text type="h5" className="marginRight-20">
+					Filter by
+				</Components.Text>
+				{userFilter}
+				{unreadFilter}
+				{typeFilter}
+				<Components.Text type="h5" className="marginRight-20 marginLeft-20">
+					Sort by:
+				</Components.Text>
+				<Components.Tag
+					className="marginRight-10"
+					onClick={() => this.selectSort("newest")}
+					leftIcon={this.state.sortBy === "newest" ? "check" : null}
+					text="Newest first"
+				/>
+				<Components.Tag
+					onClick={() => this.selectSort("oldest")}
+					leftIcon={this.state.sortBy === "oldest" ? "check" : null}
+					text="Oldest first"
+				/>
+			</div>
+		);
+	}
+
+	renderUserFilterPopup() {
+		if (!this.state.userFilterOpen) {
+			return null;
+		}
+		return (
+			<Components.Popup
+				title="Select User"
+				maxWidth={600}
+				minWidth={400}
+				minHeight={400}
+				hasPadding
+				onClose={this.closeUserFilter}
+			>
+				<Components.GenericInput
+					id="userSearch"
+					type="text"
+					label="Search"
+					placeholder="Enter name"
+					value={this.state.userSearch}
+					onChange={(e) => this.onHandleChange(e)}
+					alwaysShowLabel
+				/>
+				{this.getUsers().map((user) => {
+					return (
+						<Components.UserListing
+							key={user.userId}
+							user={user}
+							onClick={() => {
+								this.selectUserFilter(user);
+							}}
+						/>
+					);
+				})}
+			</Components.Popup>
+		);
+	}
+
+	renderTypeFilterPopup() {
+		if (!this.state.typeFilterOpen) {
+			return null;
+		}
+		return (
+			<Components.Popup
+				title="Select Type"
+				maxWidth={600}
+				minWidth={400}
+				hasPadding
+				onClose={this.closeTypeFilter}
+			>
+				<Components.Tag
+					onClick={() => {
+						this.selectTypeFilter("circle");
+					}}
+					text={_.capitalize(values.entityName)}
+					className="marginRight-10"
+				/>
+				<Components.Tag
+					onClick={() => {
+						this.selectTypeFilter("private");
+					}}
+					text="Private Message"
+				/>
+			</Components.Popup>
+		);
+	}
+
+	render() {
+		return (
+			<div>
+				{this.renderTypeFilterPopup()}
+				{this.renderUserFilterPopup()}
+				<Components.Header>
+					{this.canAddNew() && (
+						<Components.AddButton
+							onClick={this.onAddNew}
+							text={`NEW ${_.upperCase(values.entityName)}`}
+						/>
+					)}
+				</Components.Header>
+				<div className="pageContainer paddingVertical-20 paddingHorizontal-40">
+					<Components.Text type="h1" className="">
+						{values.textFeatureTitle}
+					</Components.Text>
+					{this.renderFilters()}
+
+					<Table
+						className="plussTable"
+						striped
+						bordered
+						condensed
+						hover
+						style={{ minWidth: "100%" }}
+					>
+						<thead>
+							<tr>
+								<th>Title</th>
+								<th>Last updated</th>
+								<th>Members</th>
+								<th style={{ width: 50 }} />
+							</tr>
+						</thead>
+						<tbody>
+							{this.getCircles().map((circle) => {
+								return this.renderRow(circle);
+							})}
+						</tbody>
+					</Table>
+				</div>
+			</div>
+		);
+	}
 }
 
 const styles = {};
 
 const mapStateToProps = (state) => {
-  const { circles } = state[values.reducerKey];
-  const { auth } = state;
-
-  return {
-    circles,
-    auth,
-    user: Helper.getUserFromState(state),
-  };
+	const { circles } = state[values.reducerKey];
+	const { auth } = state;
+
+	return {
+		circles,
+		auth,
+		user: Helper.getUserFromState(state),
+	};
 };
 
-export default connect(mapStateToProps, { circlesLoaded, circleRemoved })(Circles);
+export default connect(mapStateToProps, { circlesLoaded, circleRemoved })(
+	Circles,
+);