add/remove moderator modal dialogs
Ryan Tharp
5 years ago
parent
8916657bb4
commit
5730a88c18
@ -0,0 +1,66 @@
|
||||
/* global Whisper, log */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.AddModeratorsDialogView = Whisper.View.extend({
|
||||
className: 'loki-dialog modal',
|
||||
async initialize(convo) {
|
||||
this.close = this.close.bind(this);
|
||||
this.onSubmit = this.onSubmit.bind(this);
|
||||
|
||||
this.chatName = convo.get('name');
|
||||
this.chatServer = convo.get('server');
|
||||
this.channelId = convo.get('channelId');
|
||||
|
||||
// get current list of moderators
|
||||
this.channelAPI = await convo.getPublicSendData();
|
||||
const modPubKeys = await this.channelAPI.getModerators();
|
||||
const convos = window.getConversations().models;
|
||||
|
||||
// private friends (not you) that aren't already moderators
|
||||
const friends = convos.filter(
|
||||
d =>
|
||||
!!d &&
|
||||
d.isFriend() &&
|
||||
d.isPrivate() &&
|
||||
!d.isMe() &&
|
||||
!modPubKeys.includes(d.id)
|
||||
);
|
||||
|
||||
this.friends = friends;
|
||||
|
||||
this.$el.focus();
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
const view = new Whisper.ReactWrapperView({
|
||||
className: 'add-moderators-dialog',
|
||||
Component: window.Signal.Components.AddModeratorsDialog,
|
||||
props: {
|
||||
friendList: this.friends,
|
||||
chatName: this.chatName,
|
||||
onSubmit: this.onSubmit,
|
||||
onClose: this.close,
|
||||
},
|
||||
});
|
||||
|
||||
this.$el.append(view.el);
|
||||
return this;
|
||||
},
|
||||
close() {
|
||||
this.remove();
|
||||
},
|
||||
async onSubmit(pubKeys) {
|
||||
log.info(`asked to add ${pubKeys}`);
|
||||
const res = await this.channelAPI.serverAPI.addModerators(pubKeys);
|
||||
if (res !== true) {
|
||||
// we have errors, deal with them...
|
||||
// how?
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,64 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.RemoveModeratorsDialogView = Whisper.View.extend({
|
||||
className: 'loki-dialog modal',
|
||||
async initialize(convo) {
|
||||
this.close = this.close.bind(this);
|
||||
this.onSubmit = this.onSubmit.bind(this);
|
||||
|
||||
this.chatName = convo.get('name');
|
||||
this.chatServer = convo.get('server');
|
||||
this.channelId = convo.get('channelId');
|
||||
|
||||
// get current list of moderators
|
||||
this.channelAPI = await convo.getPublicSendData();
|
||||
const modPubKeys = await this.channelAPI.getModerators();
|
||||
const convos = window.getConversations().models;
|
||||
const moderators = modPubKeys
|
||||
.map(
|
||||
pubKey =>
|
||||
convos.find(c => c.id === pubKey) || {
|
||||
id: pubKey, // memberList need a key
|
||||
authorPhoneNumber: pubKey,
|
||||
}
|
||||
)
|
||||
.filter(c => !!c);
|
||||
|
||||
this.mods = moderators;
|
||||
|
||||
this.$el.focus();
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
const view = new Whisper.ReactWrapperView({
|
||||
className: 'remove-moderators-dialog',
|
||||
Component: window.Signal.Components.RemoveModeratorsDialog,
|
||||
props: {
|
||||
modList: this.mods,
|
||||
onSubmit: this.onSubmit,
|
||||
onClose: this.close,
|
||||
chatName: this.chatName,
|
||||
},
|
||||
});
|
||||
|
||||
this.$el.append(view.el);
|
||||
return this;
|
||||
},
|
||||
close() {
|
||||
this.remove();
|
||||
},
|
||||
async onSubmit(pubKeys) {
|
||||
const res = await this.channelAPI.serverAPI.removeModerators(pubKeys);
|
||||
if (res !== true) {
|
||||
// we have errors, deal with them...
|
||||
// how?
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,217 @@
|
||||
import React from 'react';
|
||||
import { Contact, MemberList } from './MemberList';
|
||||
import { cleanSearchTerm } from '../../util/cleanSearchTerm';
|
||||
|
||||
interface Props {
|
||||
friendList: Array<any>;
|
||||
chatName: string;
|
||||
onSubmit: any;
|
||||
onClose: any;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
i18n: any;
|
||||
}
|
||||
}
|
||||
|
||||
interface State {
|
||||
friendList: Array<Contact>;
|
||||
inputBoxValue: string;
|
||||
}
|
||||
|
||||
export class AddModeratorsDialog extends React.Component<Props, State> {
|
||||
private readonly updateSearchBound: (
|
||||
event: React.FormEvent<HTMLInputElement>
|
||||
) => void;
|
||||
private readonly inputRef: React.RefObject<HTMLInputElement>;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.updateSearchBound = this.updateSearch.bind(this);
|
||||
this.onMemberClicked = this.onMemberClicked.bind(this);
|
||||
this.add = this.add.bind(this);
|
||||
this.closeDialog = this.closeDialog.bind(this);
|
||||
this.onClickOK = this.onClickOK.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
this.inputRef = React.createRef();
|
||||
|
||||
let friends = this.props.friendList;
|
||||
friends = friends.map(d => {
|
||||
const lokiProfile = d.getLokiProfile();
|
||||
const name = lokiProfile ? lokiProfile.displayName : 'Anonymous';
|
||||
|
||||
// TODO: should take existing members into account
|
||||
const existingMember = false;
|
||||
|
||||
return {
|
||||
id: d.id,
|
||||
authorPhoneNumber: d.id,
|
||||
authorProfileName: name,
|
||||
selected: false,
|
||||
authorName: name,
|
||||
authorColor: d.getColor(),
|
||||
checkmarked: false,
|
||||
existingMember,
|
||||
};
|
||||
});
|
||||
this.state = {
|
||||
friendList: friends,
|
||||
inputBoxValue: '',
|
||||
};
|
||||
|
||||
window.addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
public updateSearch(event: React.FormEvent<HTMLInputElement>) {
|
||||
const searchTerm = event.currentTarget.value;
|
||||
|
||||
const cleanedTerm = cleanSearchTerm(searchTerm);
|
||||
if (!cleanedTerm) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
inputBoxValue: searchTerm,
|
||||
};
|
||||
});
|
||||
}
|
||||
public add() {
|
||||
// if we have valid data
|
||||
if (this.state.inputBoxValue.length > 64) {
|
||||
const weHave = this.state.friendList.some(
|
||||
user => user.authorPhoneNumber === this.state.inputBoxValue
|
||||
);
|
||||
if (!weHave) {
|
||||
// lookup to verify it's registered?
|
||||
|
||||
// convert pubKey into local object...
|
||||
const friends = this.state.friendList;
|
||||
friends.push({
|
||||
id: this.state.inputBoxValue,
|
||||
authorPhoneNumber: this.state.inputBoxValue,
|
||||
authorProfileName: this.state.inputBoxValue,
|
||||
authorAvatarPath: '',
|
||||
selected: true,
|
||||
authorName: this.state.inputBoxValue,
|
||||
authorColor: '#000000',
|
||||
checkmarked: true,
|
||||
existingMember: false,
|
||||
});
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
friendList: friends,
|
||||
};
|
||||
});
|
||||
}
|
||||
//
|
||||
}
|
||||
// clear
|
||||
if (this.inputRef.current) {
|
||||
this.inputRef.current.value = '';
|
||||
}
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
inputBoxValue: '',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
const i18n = window.i18n;
|
||||
const titleText = `${i18n('addModerators')} ${this.props.chatName}`;
|
||||
|
||||
const hasFriends = this.state.friendList.length !== 0;
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<p className="titleText">{titleText}</p>
|
||||
Add Moderator:
|
||||
<input
|
||||
type="text"
|
||||
ref={this.inputRef}
|
||||
className="module-main-header__search__input"
|
||||
placeholder={i18n('search')}
|
||||
dir="auto"
|
||||
onChange={this.updateSearchBound}
|
||||
/>
|
||||
<button className="add" tabIndex={2} onClick={this.add}>
|
||||
{i18n('add')}
|
||||
</button>
|
||||
From friends:
|
||||
<div className="friend-selection-list">
|
||||
<MemberList
|
||||
members={this.state.friendList}
|
||||
selected={{}}
|
||||
i18n={i18n}
|
||||
onMemberClicked={this.onMemberClicked}
|
||||
/>
|
||||
</div>
|
||||
{hasFriends ? null : (
|
||||
<p className="no-friends">{i18n('noFriendsToAdd')}</p>
|
||||
)}
|
||||
<div className="buttons">
|
||||
<button className="cancel" tabIndex={0} onClick={this.closeDialog}>
|
||||
{i18n('cancel')}
|
||||
</button>
|
||||
<button className="ok" tabIndex={0} onClick={this.onClickOK}>
|
||||
{i18n('ok')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private onClickOK() {
|
||||
this.add(); // process inputBox
|
||||
const selectedFriends = this.state.friendList
|
||||
.filter(d => d.checkmarked)
|
||||
.map(d => d.id);
|
||||
if (selectedFriends.length > 0) {
|
||||
this.props.onSubmit(selectedFriends);
|
||||
}
|
||||
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private onKeyUp(event: any) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
this.onClickOK();
|
||||
break;
|
||||
case 'Esc':
|
||||
case 'Escape':
|
||||
this.closeDialog();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
window.removeEventListener('keyup', this.onKeyUp);
|
||||
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
private onMemberClicked(selected: any) {
|
||||
const updatedFriends = this.state.friendList.map(member => {
|
||||
if (member.id === selected.id) {
|
||||
return { ...member, checkmarked: !member.checkmarked };
|
||||
} else {
|
||||
return member;
|
||||
}
|
||||
});
|
||||
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
friendList: updatedFriends,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
import React from 'react';
|
||||
import { Contact, MemberList } from './MemberList';
|
||||
|
||||
interface Props {
|
||||
modList: Array<any>;
|
||||
chatName: string;
|
||||
onSubmit: any;
|
||||
onClose: any;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
i18n: any;
|
||||
}
|
||||
}
|
||||
|
||||
interface State {
|
||||
modList: Array<Contact>;
|
||||
}
|
||||
|
||||
export class RemoveModeratorsDialog extends React.Component<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.onModClicked = this.onModClicked.bind(this);
|
||||
this.closeDialog = this.closeDialog.bind(this);
|
||||
this.onClickOK = this.onClickOK.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
|
||||
let mods = this.props.modList;
|
||||
mods = mods.map(d => {
|
||||
let name = '';
|
||||
if (d.getLokiProfile) {
|
||||
const lokiProfile = d.getLokiProfile();
|
||||
name = lokiProfile ? lokiProfile.displayName : 'Anonymous';
|
||||
}
|
||||
const authorColor = d.getColor ? d.getColor() : '#000000';
|
||||
// TODO: should take existing members into account
|
||||
const existingMember = false;
|
||||
|
||||
return {
|
||||
id: d.id,
|
||||
authorPhoneNumber: d.id,
|
||||
authorProfileName: name,
|
||||
selected: false,
|
||||
authorName: name,
|
||||
authorColor,
|
||||
checkmarked: true,
|
||||
existingMember,
|
||||
};
|
||||
});
|
||||
this.state = {
|
||||
modList: mods,
|
||||
};
|
||||
|
||||
window.addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const i18n = window.i18n;
|
||||
const titleText = `${i18n('removeModerators')} ${this.props.chatName}`;
|
||||
|
||||
const hasMods = this.state.modList.length !== 0;
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<p className="titleText">{titleText}</p>
|
||||
Existing moderators:
|
||||
<div className="friend-selection-list">
|
||||
<MemberList
|
||||
members={this.state.modList}
|
||||
selected={{}}
|
||||
i18n={i18n}
|
||||
onMemberClicked={this.onModClicked}
|
||||
/>
|
||||
</div>
|
||||
{hasMods ? null : (
|
||||
<p className="no-friends">{i18n('noModeratorsToRemove')}</p>
|
||||
)}
|
||||
<div className="buttons">
|
||||
<button className="cancel" tabIndex={0} onClick={this.closeDialog}>
|
||||
{i18n('cancel')}
|
||||
</button>
|
||||
<button className="ok" tabIndex={0} onClick={this.onClickOK}>
|
||||
{i18n('ok')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private onClickOK() {
|
||||
const removedMods = this.state.modList
|
||||
.filter(d => !d.checkmarked)
|
||||
.map(d => d.id);
|
||||
|
||||
if (removedMods.length > 0) {
|
||||
this.props.onSubmit(removedMods);
|
||||
}
|
||||
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private onKeyUp(event: any) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
this.onClickOK();
|
||||
break;
|
||||
case 'Esc':
|
||||
case 'Escape':
|
||||
this.closeDialog();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
window.removeEventListener('keyup', this.onKeyUp);
|
||||
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
private onModClicked(selected: any) {
|
||||
const updatedFriends = this.state.modList.map(member => {
|
||||
if (member.id === selected.id) {
|
||||
return { ...member, checkmarked: !member.checkmarked };
|
||||
} else {
|
||||
return member;
|
||||
}
|
||||
});
|
||||
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
modList: updatedFriends,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue