groups: add invite count to tile
@@ -8,13 +8,36 @@ export default class ContactTile extends Component {
render() {
const { props } = this;
+ let data = _.get(props.data, "invites", false);
+ let inviteNum = 0;
+
+ if (data && "/contacts" in data) {
+ inviteNum = Object.keys(data["/contacts"]).length;
+ }
+
+ let numNotificationsElem =
+ inviteNum > 0 ? (
+ <p
+ className="absolute green2 white-d"
+ style={{
+ bottom: 6,
+ fontWeight: 400,
+ fontSize: 12,
+ lineHeight: "20px"
+ }}>
+ {inviteNum > 99 ? "99+" : inviteNum}
+ </p>
+ ) : (
+ <div />
+ );
+
return (
- <div className={"w-100 h-100 relative bg-white bg-gray0-d " +
- "b--black b--gray1-d ba"}>
+ <div
+ className={
+ "w-100 h-100 relative bg-white bg-gray0-d " + "b--black b--gray1-d ba"
+ }>
<a className="w-100 h-100 db pa2 bn" href="/~groups">
- <p
- className="black white-d absolute f9"
- style={{ left: 8, top: 8 }}>
+ <p className="black white-d absolute f9" style={{ left: 8, top: 8 }}>
Groups
</p>
<img
@@ -24,6 +47,7 @@ export default class ContactTile extends Component {
width={48}
height={48}
/>
+ {numNotificationsElem}
</a>
</div>
);
