mirror of
https://github.com/ilyakooo0/urbit.git
synced 2025-01-05 22:03:50 +03:00
chat: incorporate group filter component
This commit is contained in:
Matilde Park
parent
891018159a
commit
612a88272f
@ -255,6 +255,16 @@ class UrbitApi {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setSelected(selected) {
|
||||
store.handleEvent({
|
||||
data: {
|
||||
local: {
|
||||
selected: selected
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export let api = new UrbitApi();
|
||||
|
||||
231
pkg/interface/chat/src/js/components/lib/group-filter.js
Normal file
231
pkg/interface/chat/src/js/components/lib/group-filter.js
Normal file
@ -0,0 +1,231 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
export class GroupFilter extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
open: false,
|
||||
selected: [],
|
||||
groups: [],
|
||||
searchTerm: "",
|
||||
results: []
|
||||
}
|
||||
this.toggleOpen = this.toggleOpen.bind(this);
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this);
|
||||
this.groupIndex = this.groupIndex.bind(this);
|
||||
this.search = this.search.bind(this);
|
||||
this.addGroup = this.addGroup.bind(this);
|
||||
this.deleteGroup = this.deleteGroup.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('mousedown', this.handleClickOutside);
|
||||
this.groupIndex();
|
||||
let selected = localStorage.getItem("urbit-selectedGroups");
|
||||
if (selected) {
|
||||
this.setState({selected: JSON.parse(selected)}, (() => {
|
||||
window.api.setSelected(this.state.selected);
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('mousedown', this.handleClickOutside);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps !== this.props) {
|
||||
this.groupIndex();
|
||||
}
|
||||
}
|
||||
|
||||
handleClickOutside(evt) {
|
||||
if ((this.dropdown && !this.dropdown.contains(evt.target))
|
||||
&& (this.toggleButton && !this.toggleButton.contains(evt.target))) {
|
||||
this.setState({ open: false });
|
||||
}
|
||||
}
|
||||
|
||||
toggleOpen() {
|
||||
this.setState({open: !this.state.open});
|
||||
}
|
||||
|
||||
groupIndex() {
|
||||
const { props, state } = this;
|
||||
let index = [];
|
||||
let associations = !!props.associations ? props.associations.contacts : {};
|
||||
index = Object.keys(associations).map((each) => {
|
||||
let eachGroup = [];
|
||||
eachGroup.push(each);
|
||||
let name = each;
|
||||
if (associations[each].metadata) {
|
||||
name = (associations[each].metadata.title !== "")
|
||||
? associations[each].metadata.title : name;
|
||||
}
|
||||
eachGroup.push(name);
|
||||
return eachGroup;
|
||||
});
|
||||
this.setState({groups: index})
|
||||
}
|
||||
|
||||
search(evt) {
|
||||
this.setState({searchTerm: evt.target.value});
|
||||
let term = evt.target.value.toLowerCase();
|
||||
|
||||
if (term.length < 3) {
|
||||
return this.setState({results: []})
|
||||
}
|
||||
|
||||
let groupMatches = [];
|
||||
groupMatches = this.state.groups.filter(e => {
|
||||
return (e[0].includes(term) || e[1].includes(term));
|
||||
});
|
||||
this.setState({results: groupMatches});
|
||||
}
|
||||
|
||||
addGroup(group) {
|
||||
let selected = this.state.selected;
|
||||
if (!(group in selected)) {
|
||||
selected.push(group);
|
||||
}
|
||||
this.setState({
|
||||
searchTerm: "",
|
||||
selected: selected,
|
||||
results: []
|
||||
}, (() => {
|
||||
window.api.setSelected(this.state.selected);
|
||||
localStorage.setItem("urbit-selectedGroups", JSON.stringify(this.state.selected));
|
||||
}))
|
||||
}
|
||||
|
||||
deleteGroup(group) {
|
||||
let selected = this.state.selected;
|
||||
selected = selected.filter(e => {
|
||||
return e !== group;
|
||||
});
|
||||
this.setState({selected: selected}, (() => {
|
||||
window.api.setSelected(this.state.selected);
|
||||
localStorage.setItem("urbit-selectedGroups", JSON.stringify(this.state.selected));
|
||||
}))
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let currentGroup = "All Groups";
|
||||
|
||||
if (state.selected.length > 0) {
|
||||
let titles = state.selected.map((each) => {
|
||||
return each[1];
|
||||
})
|
||||
currentGroup = titles.join(" + ");
|
||||
}
|
||||
|
||||
let buttonOpened = (state.open)
|
||||
? "bg-gray5 bg-gray1-d white-d" : "hover-bg-gray5 hover-bg-gray1-d white-d";
|
||||
|
||||
let dropdownClass = (state.open)
|
||||
? "absolute db z-2 bg-white bg-gray0-d white-d ba b--gray3 b--gray1-d"
|
||||
: "dn";
|
||||
|
||||
let inviteCount = (props.invites && props.invites.length > 0)
|
||||
? <template className="dib fr">
|
||||
<p className="dib bg-green2 bg-gray2-d white fw6 ph1 br1 v-mid" style={{ marginBottom: 2 }}>
|
||||
{props.invites.length}
|
||||
</p>
|
||||
<span className="dib v-mid ml1">
|
||||
<img
|
||||
className="v-mid"
|
||||
src="/~launch/img/Chevron.png"
|
||||
style={{ height: 16, width: 16, paddingBottom: 1 }}
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
: <template className="dib fr">
|
||||
<span className="dib v-top ml1">
|
||||
<img className="v-mid"
|
||||
src="/~launch/img/Chevron.png"
|
||||
style={{ height: 16, width: 16, paddingBottom: 1 }}
|
||||
/>
|
||||
</span>
|
||||
</template>;
|
||||
|
||||
let selectedGroups = <div/>
|
||||
let searchResults = <div/>
|
||||
|
||||
if (state.results.length > 0) {
|
||||
let groupResults = state.results.map((group => {
|
||||
return(
|
||||
<li
|
||||
key={group[0]}
|
||||
className="tl list white-d f9 pv2 ph3 pointer hover-bg-gray4 hover-bg-gray1-d inter" onClick={() => this.addGroup(group)}>
|
||||
<span className="mix-blend-diff white">{(group[1]) ? group[1] : group[0]}</span>
|
||||
</li>
|
||||
)
|
||||
}))
|
||||
searchResults = (
|
||||
<div className={"tl absolute bg-white bg-gray0-d white-d pv3 z-1 w-100 ba b--gray4 b--white-d overflow-y-scroll"} style={{maxWidth: "15.67rem", maxHeight: "8rem"}}>
|
||||
<p className="f9 tl gray2 ph3 pb2">Groups</p>
|
||||
{groupResults}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state.selected.length > 0) {
|
||||
let allSelected = this.state.selected.map((each) => {
|
||||
let name = each[1];
|
||||
return(
|
||||
<span
|
||||
key={each[0]}
|
||||
className={"f9 inter black pa2 bg-gray5 bg-gray1-d " +
|
||||
"ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}
|
||||
>
|
||||
{name}
|
||||
<span
|
||||
className="white-d ml3 mono pointer"
|
||||
onClick={e => this.deleteGroup(each)}>
|
||||
x
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
})
|
||||
selectedGroups = (
|
||||
<div className={
|
||||
"f9 gray2 bb bl br b--gray3 b--gray2-d bg-gray0-d " +
|
||||
"white-d pa3 db w-100 inter bg-gray5 lh-solid tl"
|
||||
} style={{width: 253}}>
|
||||
{allSelected}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ml1 dib">
|
||||
<div className={buttonOpened}
|
||||
onClick={() => this.toggleOpen()}
|
||||
ref={(el) => this.toggleButton = el}>
|
||||
<p className="dib f9 pointer pa1 mw5 truncate v-mid">{currentGroup}</p>
|
||||
</div>
|
||||
<div className={dropdownClass}
|
||||
style={{ maxHeight: "24rem", width: 285 }}
|
||||
ref={(el) => { this.dropdown = el }}>
|
||||
<p className="tc bb b--gray3 b--gray1-d gray3 pv4 f9">Group Select and Filter</p>
|
||||
<a href="/~groups" className="ma4 bg-gray5 bg-gray1-d f9 tl pa1 br1 db no-underline" style={{paddingLeft: "6.5px", paddingRight: "6.5px"}}>Manage all Groups
|
||||
{inviteCount}
|
||||
</a>
|
||||
<p className="pt4 gray3 f9 tl mh4">Filter Groups</p>
|
||||
<div className="relative pb6 w-100 ph4 pt2">
|
||||
<input className="ba b--gray3 white-d bg-gray0-d inter w-100 f9 pa2" style={{boxSizing: "border-box"}} placeholder="Group name..."
|
||||
onChange={this.search}
|
||||
value={state.searchTerm}
|
||||
/>
|
||||
{searchResults}
|
||||
{selectedGroups}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default GroupFilter;
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { cite } from '../../lib/util';
|
||||
import { IconHome } from "/components/lib/icons/icon-home";
|
||||
import { GroupFilter } from "./group-filter";
|
||||
import { Sigil } from "/components/lib/icons/sigil";
|
||||
|
||||
export class HeaderBar extends Component {
|
||||
@ -8,49 +7,41 @@ export class HeaderBar extends Component {
|
||||
let popout = window.location.href.includes("popout/")
|
||||
? "dn" : "dn db-m db-l db-xl";
|
||||
|
||||
let title = document.title === "Home" ? "" : document.title;
|
||||
// let spinner = !!this.props.spinner
|
||||
// ? this.props.spinner : false;
|
||||
|
||||
let spinner = !!this.props.spinner
|
||||
? this.props.spinner : false;
|
||||
// let spinnerClasses = "";
|
||||
|
||||
let spinnerClasses = "";
|
||||
// if (spinner === true) {
|
||||
// spinnerClasses = "spin-active";
|
||||
// }
|
||||
|
||||
let invites = (this.props.invites && this.props.invites.contacts)
|
||||
? this.props.invites.contacts
|
||||
: {};
|
||||
|
||||
if (spinner === true) {
|
||||
spinnerClasses = "spin-active";
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"bg-white bg-gray0-d w-100 justify-between relative tc pt3 " + popout
|
||||
}
|
||||
style={{ height: 40 }}>
|
||||
<a
|
||||
className="dib gray2 f9 inter absolute left-0"
|
||||
href="/"
|
||||
style={{ top: 14 }}>
|
||||
<IconHome classes={spinnerClasses} />
|
||||
<span
|
||||
className="ml2 white-d v-top lh-title"
|
||||
style={{ paddingTop: 3 }}>
|
||||
Home
|
||||
</span>
|
||||
<div className="fl lh-copy absolute left-0" style={{top: 8}}>
|
||||
<a href="/~groups/me" className="dib v-top">
|
||||
<Sigil
|
||||
ship={"~" + window.ship}
|
||||
classes="v-mid mix-blend-diff"
|
||||
size={16}
|
||||
color={"#000000"}
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
className="f9 white-d inter dib"
|
||||
style={{
|
||||
verticalAlign: "text-top",
|
||||
paddingTop: 3
|
||||
}}>
|
||||
{title}
|
||||
</span>
|
||||
<div className="absolute right-0 lh-copy" style={{ top: 8 }}>
|
||||
<Sigil
|
||||
ship={"~" + window.ship}
|
||||
classes="v-mid mix-blend-diff"
|
||||
size={16}
|
||||
color={"#000000"}
|
||||
/>
|
||||
<span className="mono white-d f9 ml2 c-default">{cite(window.ship)}</span>
|
||||
<GroupFilter invites={invites} associations={this.props.associations}/>
|
||||
<span className="dib f9 v-mid gray2 ml1 mr1 c-default inter">/</span>
|
||||
<a
|
||||
className="dib f9 v-mid inter ml1"
|
||||
href="/"
|
||||
style={{ top: 14 }}>
|
||||
⟵ Messaging</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -52,6 +52,7 @@ export class Root extends Component {
|
||||
inbox={state.inbox}
|
||||
messagePreviews={messagePreviews}
|
||||
associations={associations}
|
||||
selectedGroups={state.selected}
|
||||
contacts={contacts}
|
||||
invites={invites}
|
||||
unreads={unreads}
|
||||
@ -70,6 +71,8 @@ export class Root extends Component {
|
||||
render={props => {
|
||||
return (
|
||||
<Skeleton
|
||||
associations={associations}
|
||||
invites={invites}
|
||||
chatHideonMobile={true}
|
||||
sidebarShown={state.sidebarShown}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
@ -91,6 +94,8 @@ export class Root extends Component {
|
||||
render={props => {
|
||||
return (
|
||||
<Skeleton
|
||||
associations={associations}
|
||||
invites={invites}
|
||||
sidebarHideOnMobile={true}
|
||||
spinner={state.spinner}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
@ -122,6 +127,8 @@ export class Root extends Component {
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
associations={associations}
|
||||
invites={invites}
|
||||
spinner={state.spinner}
|
||||
sidebarHideOnMobile={true}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
@ -174,6 +181,8 @@ export class Root extends Component {
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
associations={associations}
|
||||
invites={invites}
|
||||
sidebarHideOnMobile={true}
|
||||
spinner={state.spinner}
|
||||
popout={popout}
|
||||
@ -224,6 +233,8 @@ export class Root extends Component {
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
associations={associations}
|
||||
invites={invites}
|
||||
sidebarHideOnMobile={true}
|
||||
spinner={state.spinner}
|
||||
sidebarShown={state.sidebarShown}
|
||||
@ -263,12 +274,14 @@ export class Root extends Component {
|
||||
kind: "",
|
||||
who: new Set([])
|
||||
};
|
||||
|
||||
|
||||
let association =
|
||||
station in associations["chat"] ? associations.chat[station] : {};
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
associations={associations}
|
||||
invites={invites}
|
||||
sidebarHideOnMobile={true}
|
||||
spinner={state.spinner}
|
||||
popout={popout}
|
||||
|
||||
@ -19,6 +19,8 @@ export class Sidebar extends Component {
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let selectedGroups = !!props.selectedGroups ? props.selectedGroups : [];
|
||||
|
||||
let associations = alphabetiseAssociations(props.associations.contacts);
|
||||
|
||||
let groupedChannels = {};
|
||||
@ -56,6 +58,13 @@ export class Sidebar extends Component {
|
||||
});
|
||||
|
||||
let groupedItems = Object.keys(associations)
|
||||
.filter((each) => {
|
||||
if (selectedGroups.length === 0) {
|
||||
return true;
|
||||
}
|
||||
let selectedPaths = selectedGroups.map((e) => {return e[0]});
|
||||
return selectedPaths.includes(each)
|
||||
})
|
||||
.map((each, i) => {
|
||||
let channels = groupedChannels[each];
|
||||
if (channels.length === 0) return;
|
||||
|
||||
@ -32,7 +32,7 @@ export class Skeleton extends Component {
|
||||
return (
|
||||
// app outer skeleton
|
||||
<div className={"absolute h-100 w-100 bg-gray0-d " + popoutWindow}>
|
||||
<HeaderBar spinner={this.props.spinner} />
|
||||
<HeaderBar spinner={this.props.spinner} associations={this.props.associations} invites={this.props.invites} />
|
||||
{/* app window borders */}
|
||||
<div className={
|
||||
`cf w-100 flex ` +
|
||||
|
||||
@ -6,6 +6,7 @@ export class LocalReducer {
|
||||
if (data) {
|
||||
this.sidebarToggle(data, state);
|
||||
this.setSpinner(data, state);
|
||||
this.setSelected(data, state);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,4 +23,11 @@ export class LocalReducer {
|
||||
state.spinner = obj.spinner;
|
||||
}
|
||||
}
|
||||
|
||||
setSelected(obj, state) {
|
||||
let data = _.has(obj, 'selected', false);
|
||||
if (data) {
|
||||
state.selected = obj.selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,6 +22,7 @@ class Store {
|
||||
contacts: {}
|
||||
},
|
||||
spinner: false,
|
||||
selected: [],
|
||||
sidebarShown: true,
|
||||
pendingMessages: new Map([]),
|
||||
chatInitialized: false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user