urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 16:51:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: add groupResults prop, fix peer set

Browse Source
This commit is contained in:
Matilde Park 2020-02-20 18:27:09 -05:00
parent f2434f288c
commit b2404d0cdc
2 changed files with 99 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
pkg/interface/chat/src/js/components/lib/invite-search.js
View File

@ -1,8 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import urbitOb from "urbit-ob"; import urbitOb from "urbit-ob";
import { Sigil } from "../lib/icons/sigil"; import { Sigil } from "../lib/icons/sigil";
export class InviteSearch extends Component { export class InviteSearch extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -15,7 +14,7 @@ export class InviteSearch extends Component {
ships: [] ships: []
}, },
inviteError: false inviteError: false
} };
this.search = this.search.bind(this); this.search = this.search.bind(this);
} }
@ -37,7 +36,10 @@ export class InviteSearch extends Component {
peerSet = new Set(); peerSet = new Set();
Object.keys(this.props.groups).map(group => { Object.keys(this.props.groups).map(group => {
if (this.props.groups[group].size > 0) { 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); peers = Array.from(peerSet);
@ -51,7 +53,7 @@ export class InviteSearch extends Component {
this.setState({ searchValue: event.target.value }); this.setState({ searchValue: event.target.value });
if (searchTerm.length < 2) { if (searchTerm.length < 2) {
this.setState({searchResults: { groups: [], ships: [] }}) this.setState({ searchResults: { groups: [], ships: [] } });
} }
if (searchTerm.length > 2) { if (searchTerm.length > 2) {
@ -59,12 +61,17 @@ export class InviteSearch extends Component {
this.setState({ inviteError: false }); this.setState({ inviteError: false });
} }
let groupMatches = this.state.groups.filter(e => { let groupMatches = [];
if (this.props.groupResults) {
groupMatches = this.state.groups.filter(e => {
return e.includes(searchTerm); return e.includes(searchTerm);
}); });
}
let shipMatches = this.state.peers.filter(e => { let shipMatches = this.state.peers.filter(e => {
return e.includes(searchTerm) && !this.props.invites.ships.includes(e); return e.includes(searchTerm) && !this.props.invites.ships.includes(e);
}); });
this.setState({ this.setState({
searchResults: { groups: groupMatches, ships: shipMatches } searchResults: { groups: groupMatches, ships: shipMatches }
}); });
@ -74,34 +81,30 @@ export class InviteSearch extends Component {
isValid = false; isValid = false;
} }
if ((shipMatches.length === 0) && (isValid)) { if (shipMatches.length === 0 && isValid) {
shipMatches.push(searchTerm); shipMatches.push(searchTerm);
this.setState({ this.setState({
searchResults: { groups: groupMatches, ships: shipMatches } searchResults: { groups: groupMatches, ships: shipMatches }
}) });
} }
} }
} }
deleteGroup() { deleteGroup() {
let { ships } = this.props.invites; let { ships } = this.props.invites;
this.setState( this.setState({
{
searchValue: "", searchValue: "",
searchResults: { groups: [], ships: [] } searchResults: { groups: [], ships: [] }
} });
);
this.props.setInvite({ groups: [], ships: ships }); this.props.setInvite({ groups: [], ships: ships });
} }
deleteShip(ship) { deleteShip(ship) {
let { groups, ships } = this.props.invites; let { groups, ships } = this.props.invites;
this.setState( this.setState({
{
searchValue: "", searchValue: "",
searchResults: { groups: [], ships: [] } searchResults: { groups: [], ships: [] }
} });
);
ships = ships.filter(e => { ships = ships.filter(e => {
return e !== ship; return e !== ship;
}); });
@ -109,23 +112,19 @@ export class InviteSearch extends Component {
} }
addGroup(group) { addGroup(group) {
this.setState( this.setState({
{
searchValue: "", searchValue: "",
searchResults: { groups: [], ships: [] } searchResults: { groups: [], ships: [] }
} });
);
this.props.setInvite({ groups: [group], ships: [] }); this.props.setInvite({ groups: [group], ships: [] });
} }
addShip(ship) { addShip(ship) {
let { groups, ships } = this.props.invites; let { groups, ships } = this.props.invites;
this.setState( this.setState({
{
searchValue: "", searchValue: "",
searchResults: { groups: [], ships: [] } searchResults: { groups: [], ships: [] }
} });
);
ships.push(ship); ships.push(ship);
if (groups.length > 0) { if (groups.length > 0) {
return false; return false;
@ -134,7 +133,10 @@ export class InviteSearch extends Component {
} }
submitShipToAdd(ship) { submitShipToAdd(ship) {
let searchTerm = ship.toLowerCase().replace("~", "").trim(); let searchTerm = ship
.toLowerCase()
.replace("~", "")
.trim();
let isValid = true; let isValid = true;
if (!urbitOb.isValidPatp("~" + searchTerm)) { if (!urbitOb.isValidPatp("~" + searchTerm)) {
isValid = false; isValid = false;
@ -156,8 +158,8 @@ export class InviteSearch extends Component {
} }
} }
let participants = <div/> let participants = <div />;
let searchResults = <div/> let searchResults = <div />;
let invErrElem = <span />; let invErrElem = <span />;
if (state.inviteError) { if (state.inviteError) {
@ -168,14 +170,23 @@ export class InviteSearch extends Component {
); );
} }
if ((state.searchResults.groups.length > 0) if (
|| (state.searchResults.ships.length > 0)) { state.searchResults.groups.length > 0 ||
state.searchResults.ships.length > 0
) {
let groupHeader =
state.searchResults.groups.length > 0 ? (
<p className="f9 gray2 ph3">Groups</p>
) : (
""
);
let groupHeader = (state.searchResults.groups.length > 0) let shipHeader =
? <p className="f9 gray2 ph3">Groups</p> : ""; state.searchResults.ships.length > 0 ? (
<p className="f9 gray2 pv2 ph3">Ships</p>
let shipHeader = (state.searchResults.ships.length > 0) ) : (
? <p className="f9 gray2 pv2 ph3">Ships</p> : ""; ""
);
let groupResults = state.searchResults.groups.map(group => { let groupResults = state.searchResults.groups.map(group => {
return ( return (
@ -183,12 +194,13 @@ export class InviteSearch extends Component {
key={group} key={group}
className={ className={
"list mono white-d f8 pv2 ph3 pointer" + "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)}> onClick={e => this.addGroup(group)}>
{group} {group}
</li> </li>
); );
}) });
let shipResults = state.searchResults.ships.map(ship => { let shipResults = state.searchResults.ships.map(ship => {
return ( return (
@ -208,16 +220,20 @@ export class InviteSearch extends Component {
<span className="v-mid ml2">{"~" + ship}</span> <span className="v-mid ml2">{"~" + ship}</span>
</li> </li>
); );
}) });
searchResults = searchResults = (
<div className={"absolute bg-white bg-gray0-d white-d" + <div
" pv3 z-1 w-100 mt1 ba b--white-d overflow-y-scroll mh-16"}> className={
"absolute bg-white bg-gray0-d white-d" +
" pv3 z-1 w-100 mt1 ba b--white-d overflow-y-scroll mh-16"
}>
{groupHeader} {groupHeader}
{groupResults} {groupResults}
{shipHeader} {shipHeader}
{shipResults} {shipResults}
</div> </div>
);
} }
let groupInvites = props.invites.groups || []; let groupInvites = props.invites.groups || [];
@ -230,9 +246,11 @@ export class InviteSearch extends Component {
key={group} key={group}
className={ className={
"f9 mono black pa2 bg-gray5 bg-gray1-d" + "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} {group}
<span className="white-d ml3 mono pointer" <span
className="white-d ml3 mono pointer"
onClick={e => this.deleteGroup(group)}> onClick={e => this.deleteGroup(group)}>
x x
</span> </span>
@ -244,11 +262,16 @@ export class InviteSearch extends Component {
return ( return (
<span <span
key={ship} key={ship}
className={"f9 mono black pa2 bg-gray5 bg-gray1-d" + className={
" ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}> "f9 mono black pa2 bg-gray5 bg-gray1-d" +
" ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"
}>
{"~" + ship} {"~" + ship}
<span className="white-d ml3 mono pointer" <span
onClick={e => this.deleteShip(ship)}>x</span> className="white-d ml3 mono pointer"
onClick={e => this.deleteShip(ship)}>
x
</span>
</span> </span>
); );
}); });
@ -281,8 +304,10 @@ export class InviteSearch extends Component {
ref={e => { ref={e => {
this.textarea = e; this.textarea = e;
}} }}
className={"f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 w-100" className={
+ " db focus-b--black focus-b--white-d mono placeholder-inter"} "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" placeholder="Search for ships or existing groups"
disabled={searchDisabled} disabled={searchDisabled}
rows={1} rows={1}
@ -295,7 +320,8 @@ export class InviteSearch extends Component {
if (e.key === "Enter" || e.key === ",") { if (e.key === "Enter" || e.key === ",") {
e.preventDefault(); e.preventDefault();
this.submitShipToAdd(this.state.searchValue); this.submitShipToAdd(this.state.searchValue);
}}} }
}}
onChange={this.search} onChange={this.search}
value={state.searchValue} value={state.searchValue}
/> />

1
pkg/interface/chat/src/js/components/new.js
View File

@ -246,6 +246,7 @@ export class NewScreen extends Component {
</p> </p>
<InviteSearch <InviteSearch
groups={props.groups} groups={props.groups}
groupResults={true}
invites={{ invites={{
groups: state.groups, groups: state.groups,
ships: state.ships ships: state.ships