diff --git a/pkg/interface/chat/src/js/components/lib/invite-search.js b/pkg/interface/chat/src/js/components/lib/invite-search.js index d3aac8ee1b..a1f152b675 100644 --- a/pkg/interface/chat/src/js/components/lib/invite-search.js +++ b/pkg/interface/chat/src/js/components/lib/invite-search.js @@ -1,8 +1,7 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; import urbitOb from "urbit-ob"; import { Sigil } from "../lib/icons/sigil"; - export class InviteSearch extends Component { constructor(props) { super(props); @@ -15,7 +14,7 @@ export class InviteSearch extends Component { ships: [] }, inviteError: false - } + }; this.search = this.search.bind(this); } @@ -34,10 +33,13 @@ export class InviteSearch extends Component { groups = groups.filter(e => !e.startsWith("/~/")); let peers = [], - peerSet = new Set(); + peerSet = new Set(); Object.keys(this.props.groups).map(group => { if (this.props.groups[group].size > 0) { - peerSet.add(...this.props.groups[group]); + let groupEntries = this.props.groups[group].values(); + for (let member of groupEntries) { + peerSet.add(member); + } } }); peers = Array.from(peerSet); @@ -48,23 +50,28 @@ export class InviteSearch extends Component { search(event) { let searchTerm = event.target.value.toLowerCase().replace("~", ""); - this.setState({searchValue: event.target.value}); + this.setState({ searchValue: event.target.value }); if (searchTerm.length < 2) { - this.setState({searchResults: { groups: [], ships: [] }}) + this.setState({ searchResults: { groups: [], ships: [] } }); } if (searchTerm.length > 2) { if (this.state.inviteError === true) { - this.setState({inviteError: false}); + this.setState({ inviteError: false }); + } + + let groupMatches = []; + if (this.props.groupResults) { + groupMatches = this.state.groups.filter(e => { + return e.includes(searchTerm); + }); } - let groupMatches = this.state.groups.filter(e => { - return e.includes(searchTerm); - }); let shipMatches = this.state.peers.filter(e => { return e.includes(searchTerm) && !this.props.invites.ships.includes(e); }); + this.setState({ searchResults: { groups: groupMatches, ships: shipMatches } }); @@ -74,34 +81,30 @@ export class InviteSearch extends Component { isValid = false; } - if ((shipMatches.length === 0) && (isValid)) { + if (shipMatches.length === 0 && isValid) { shipMatches.push(searchTerm); this.setState({ searchResults: { groups: groupMatches, ships: shipMatches } - }) + }); } } } deleteGroup() { let { ships } = this.props.invites; - this.setState( - { - searchValue: "", - searchResults: { groups: [], ships: [] } - } - ); + this.setState({ + searchValue: "", + searchResults: { groups: [], ships: [] } + }); this.props.setInvite({ groups: [], ships: ships }); } deleteShip(ship) { let { groups, ships } = this.props.invites; - this.setState( - { - searchValue: "", - searchResults: { groups: [], ships: [] } - } - ); + this.setState({ + searchValue: "", + searchResults: { groups: [], ships: [] } + }); ships = ships.filter(e => { return e !== ship; }); @@ -109,23 +112,19 @@ export class InviteSearch extends Component { } addGroup(group) { - this.setState( - { - searchValue: "", - searchResults: { groups: [], ships: [] } - } - ); + this.setState({ + searchValue: "", + searchResults: { groups: [], ships: [] } + }); this.props.setInvite({ groups: [group], ships: [] }); } addShip(ship) { let { groups, ships } = this.props.invites; - this.setState( - { - searchValue: "", - searchResults: { groups: [], ships: [] } - } - ); + this.setState({ + searchValue: "", + searchResults: { groups: [], ships: [] } + }); ships.push(ship); if (groups.length > 0) { return false; @@ -134,7 +133,10 @@ export class InviteSearch extends Component { } submitShipToAdd(ship) { - let searchTerm = ship.toLowerCase().replace("~", "").trim(); + let searchTerm = ship + .toLowerCase() + .replace("~", "") + .trim(); let isValid = true; if (!urbitOb.isValidPatp("~" + searchTerm)) { isValid = false; @@ -156,8 +158,8 @@ export class InviteSearch extends Component { } } - let participants =
- let searchResults =
+ let participants =
; + let searchResults =
; let invErrElem = ; if (state.inviteError) { @@ -168,14 +170,23 @@ export class InviteSearch extends Component { ); } - if ((state.searchResults.groups.length > 0) - || (state.searchResults.ships.length > 0)) { + if ( + state.searchResults.groups.length > 0 || + state.searchResults.ships.length > 0 + ) { + let groupHeader = + state.searchResults.groups.length > 0 ? ( +

Groups

+ ) : ( + "" + ); - let groupHeader = (state.searchResults.groups.length > 0) - ?

Groups

: ""; - - let shipHeader = (state.searchResults.ships.length > 0) - ?

Ships

: ""; + let shipHeader = + state.searchResults.ships.length > 0 ? ( +

Ships

+ ) : ( + "" + ); let groupResults = state.searchResults.groups.map(group => { return ( @@ -183,12 +194,13 @@ export class InviteSearch extends Component { key={group} className={ "list mono white-d f8 pv2 ph3 pointer" + - " hover-bg-gray4 hover-black-d"} + " hover-bg-gray4 hover-black-d" + } onClick={e => this.addGroup(group)}> {group} ); - }) + }); let shipResults = state.searchResults.ships.map(ship => { return ( @@ -208,16 +220,20 @@ export class InviteSearch extends Component { {"~" + ship} ); - }) + }); - searchResults = -
- {groupHeader} - {groupResults} - {shipHeader} - {shipResults} -
+ searchResults = ( +
+ {groupHeader} + {groupResults} + {shipHeader} + {shipResults} +
+ ); } let groupInvites = props.invites.groups || []; @@ -230,9 +246,11 @@ export class InviteSearch extends Component { key={group} className={ "f9 mono black pa2 bg-gray5 bg-gray1-d" + - " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}> + " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default" + }> {group} - this.deleteGroup(group)}> x @@ -243,12 +261,17 @@ export class InviteSearch extends Component { let ships = shipInvites.map(ship => { return ( + key={ship} + className={ + "f9 mono black pa2 bg-gray5 bg-gray1-d" + + " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default" + }> {"~" + ship} - this.deleteShip(ship)}>x + this.deleteShip(ship)}> + x + ); }); @@ -258,7 +281,7 @@ export class InviteSearch extends Component { className={ "f9 gray2 bb bl br b--gray3 b--gray2-d bg-gray0-d " + "white-d pa3 db w-100 inter" - }> + }> Participants {groups} {ships}
@@ -281,8 +304,10 @@ export class InviteSearch extends Component { ref={e => { this.textarea = e; }} - className={"f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 w-100" - + " db focus-b--black focus-b--white-d mono placeholder-inter"} + className={ + "f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 w-100" + + " db focus-b--black focus-b--white-d mono placeholder-inter" + } placeholder="Search for ships or existing groups" disabled={searchDisabled} rows={1} @@ -293,9 +318,10 @@ export class InviteSearch extends Component { }} onKeyPress={e => { if (e.key === "Enter" || e.key === ",") { - e.preventDefault(); - this.submitShipToAdd(this.state.searchValue); - }}} + e.preventDefault(); + this.submitShipToAdd(this.state.searchValue); + } + }} onChange={this.search} value={state.searchValue} /> @@ -307,4 +333,4 @@ export class InviteSearch extends Component { } } -export default InviteSearch; \ No newline at end of file +export default InviteSearch; diff --git a/pkg/interface/chat/src/js/components/new.js b/pkg/interface/chat/src/js/components/new.js index 6ab0dd7745..bb00fb42a0 100644 --- a/pkg/interface/chat/src/js/components/new.js +++ b/pkg/interface/chat/src/js/components/new.js @@ -246,6 +246,7 @@ export class NewScreen extends Component {