From 5c3cb0a1657566c9256adf769622647e40accb2c Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 21 Jan 2021 17:47:26 +1100 Subject: [PATCH] make moderator dialogs the Session way --- _locales/en/messages.json | 14 +- js/models/messages.js | 21 +- js/modules/loki_app_dot_net_api.js | 24 +- js/modules/signal.js | 2 - js/views/moderators_add_dialog_view.js | 45 +-- js/views/moderators_remove_dialog_view.js | 41 +-- stylesheets/_session.scss | 4 - ts/components/ConversationListItem.tsx | 3 +- ts/components/EditProfileDialog.tsx | 1 - ts/components/UserDetailsDialog.tsx | 1 - ts/components/UserSearchResults.tsx | 3 +- ts/components/conversation/AddMentions.tsx | 5 +- .../AdminLeaveClosedGroupDialog.tsx | 1 - .../conversation/InviteContactsDialog.tsx | 1 - ts/components/conversation/MemberList.tsx | 152 ---------- ts/components/conversation/Message.tsx | 24 +- .../conversation/ModeratorsAddDialog.tsx | 277 ++++++------------ .../conversation/ModeratorsRemoveDialog.tsx | 255 ++++++++++------ ts/components/conversation/Quote.tsx | 3 +- .../conversation/UpdateGroupMembersDialog.tsx | 6 +- .../conversation/UpdateGroupNameDialog.tsx | 1 - ts/components/session/SessionConfirm.tsx | 1 - .../session/SessionIDResetDialog.tsx | 1 - .../session/SessionMemberListItem.tsx | 8 +- ts/components/session/SessionModal.tsx | 1 - .../session/SessionPasswordModal.tsx | 1 - ts/components/session/SessionSeedModal.tsx | 1 - .../conversation/SessionCompositionBox.tsx | 18 +- ts/session/sending/MessageSender.ts | 1 - ts/session/types/PubKey.ts | 7 + ts/session/utils/Toast.tsx | 20 +- ts/window.d.ts | 1 - 32 files changed, 368 insertions(+), 576 deletions(-) delete mode 100644 ts/components/conversation/MemberList.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index becfb34f8..04b259fae 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1731,7 +1731,7 @@ "description": "Toast title when the user tries to remove the creator from a closed group v2 member list." }, "userNeedsToHaveJoinedDesc": { - "message": "Remember that this user needs to have already joined the server for this ADD to work.", + "message": "An error happened. The user needs to have already joined the server for this ADD to work.", "description": "Toast description when the user adds a moderator for an open group." }, "addToTheListBelow": { @@ -1974,6 +1974,12 @@ "removeModerators": { "message": "Remove Moderators" }, + "addAsModerator": { + "message": "Add As Moderator" + }, + "removeFromModerators": { + "message": "Remove From Moderators" + }, "add": { "message": "Add", "androidKey": "fragment_add_public_chat_add_button_title_1" @@ -2209,5 +2215,11 @@ "noBlockedContacts": { "message": "No blocked contacts", "androidKey": "blocked_contacts_fragment__no_blocked_contacts" + }, + "userAddedToModerators": { + "message": "User added to moderator list" + }, + "userRemovedFromModerators": { + "message": "User removed from moderator list" } } diff --git a/js/models/messages.js b/js/models/messages.js index 35f804f16..d37eae81c 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -1102,9 +1102,12 @@ async handleMessageSentSuccess(sentMessage, wrappedEnvelope) { let sentTo = this.get('sent_to') || []; - const isOurDevice = await window.libsession.Utils.UserUtils.isUs( - sentMessage.device - ); + let isOurDevice = false; + if (sentMessage.device) { + isOurDevice = await window.libsession.Utils.UserUtils.isUs( + sentMessage.device + ); + } // FIXME this is not correct and will cause issues with syncing // At this point the only way to check for medium // group is by comparing the encryption type @@ -1183,7 +1186,6 @@ sent_to: sentTo, sent: true, expirationStartTimestamp: Date.now(), - // unidentifiedDeliveries: result.unidentifiedDeliveries, }); await this.commit(); @@ -1201,9 +1203,13 @@ await c.getProfiles(); } } - const isOurDevice = await window.libsession.Utils.UserUtils.isUs( - sentMessage.device - ); + let isOurDevice = false; + if (sentMessage.device) { + isOurDevice = await window.libsession.Utils.UserUtils.isUs( + sentMessage.device + ); + } + const expirationStartTimestamp = Date.now(); if (isOurDevice && !this.get('sync')) { this.set({ sentSync: false }); @@ -1211,7 +1217,6 @@ this.set({ sent: true, expirationStartTimestamp, - // unidentifiedDeliveries: result.unidentifiedDeliveries, }); await this.commit(); diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js index 03d68f80c..2ccf399c6 100644 --- a/js/modules/loki_app_dot_net_api.js +++ b/js/modules/loki_app_dot_net_api.js @@ -773,14 +773,13 @@ class LokiAppDotNetServerAPI { return (!res.err && res.response && res.response.moderators) || []; } - async addModerators(pubKeysParam) { - let pubKeys = pubKeysParam; - if (!Array.isArray(pubKeys)) { - pubKeys = [pubKeys]; - } - pubKeys = pubKeys.map(key => `@${key}`); - const users = await this.getUsers(pubKeys); + async addModerator(pubKeyStr) { + const pubkey = `@${pubKeyStr}`; + const users = await this.getUsers([pubkey]); const validUsers = users.filter(user => !!user.id); + if (!validUsers || validUsers.length === 0) { + return false; + } const results = await Promise.all( validUsers.map(async user => { log.info(`POSTing loki/v1/moderators/${user.id}`); @@ -790,8 +789,12 @@ class LokiAppDotNetServerAPI { return !!(!res.err && res.response && res.response.data); }) ); + const anyFailures = results.some(test => !test); - return anyFailures ? results : true; // return failures or total success + if (anyFailures) { + window.log.info('failed to add moderator:', results); + } + return !anyFailures; } async removeModerators(pubKeysParam) { @@ -812,7 +815,10 @@ class LokiAppDotNetServerAPI { }) ); const anyFailures = results.some(test => !test); - return anyFailures ? results : true; // return failures or total success + if (anyFailures) { + window.log.info('failed to remove moderator:', results); + } + return !anyFailures; } async getSubscribers(channelId, wantObjects) { diff --git a/js/modules/signal.js b/js/modules/signal.js index c4028af76..d7c2db048 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -25,7 +25,6 @@ const { const { Emojify } = require('../../ts/components/conversation/Emojify'); const { Lightbox } = require('../../ts/components/Lightbox'); const { LightboxGallery } = require('../../ts/components/LightboxGallery'); -const { MemberList } = require('../../ts/components/conversation/MemberList'); const { EditProfileDialog } = require('../../ts/components/EditProfileDialog'); const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog'); const { SessionModal } = require('../../ts/components/session/SessionModal'); @@ -225,7 +224,6 @@ exports.setup = (options = {}) => { Emojify, Lightbox, LightboxGallery, - MemberList, EditProfileDialog, UserDetailsDialog, SessionInboxView, diff --git a/js/views/moderators_add_dialog_view.js b/js/views/moderators_add_dialog_view.js index 5c1887a95..d6dc27abe 100644 --- a/js/views/moderators_add_dialog_view.js +++ b/js/views/moderators_add_dialog_view.js @@ -1,4 +1,4 @@ -/* global Whisper, log */ +/* global Whisper */ // eslint-disable-next-line func-names (function() { @@ -10,32 +10,8 @@ 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(); - - // private contacts (not you) that aren't already moderators - const contacts = window - .getConversationController() - .getConversations() - .filter( - d => - !!d && - d.isPrivate() && - !d.isBlocked() && - !d.isMe() && - !modPubKeys.includes(d.id) - ); - - this.contacts = contacts; this.theme = convo.theme; - + this.convo = convo; this.$el.focus(); this.render(); }, @@ -44,10 +20,8 @@ className: 'add-moderators-dialog', Component: window.Signal.Components.AddModeratorsDialog, props: { - contactList: this.contacts, - chatName: this.chatName, - onSubmit: this.onSubmit, onClose: this.close, + convo: this.convo, theme: this.theme, }, }); @@ -58,18 +32,5 @@ close() { this.remove(); }, - async onSubmit(pubKeys) { - log.info(`asked to add moderators: ${pubKeys}`); - window.libsession.Utils.ToastUtils.pushUserNeedsToHaveJoined(); - - const res = await this.channelAPI.serverAPI.addModerators(pubKeys); - if (res !== true) { - // we have errors, deal with them... - // how? - window.log.warn('failed to add moderators:', res); - } else { - window.log.info(`${pubKeys} added as moderators...`); - } - }, }); })(); diff --git a/js/views/moderators_remove_dialog_view.js b/js/views/moderators_remove_dialog_view.js index 46974a441..54c78f0d4 100644 --- a/js/views/moderators_remove_dialog_view.js +++ b/js/views/moderators_remove_dialog_view.js @@ -10,28 +10,7 @@ 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.getConversationController().getConversations(); - 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.theme = convo.theme; + this.convo = convo; this.$el.focus(); this.render(); @@ -41,11 +20,9 @@ className: 'remove-moderators-dialog', Component: window.Signal.Components.RemoveModeratorsDialog, props: { - modList: this.mods, - onSubmit: this.onSubmit, onClose: this.close, - chatName: this.chatName, - theme: this.theme, + convo: this.convo, + theme: this.convo.theme, }, }); @@ -55,17 +32,5 @@ close() { this.remove(); }, - async onSubmit(pubKeys) { - window.log.info(`asked to remove moderators ${pubKeys}`); - - const res = await this.channelAPI.serverAPI.removeModerators(pubKeys); - if (res !== true) { - // we have errors, deal with them... - // how? - window.log.warn('failed to remove moderators:', res); - } else { - window.log.info(`${pubKeys} removed from moderators...`); - } - }, }); })(); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index b15d3a29d..549e94bf7 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -552,10 +552,6 @@ label { .session-modal__body { display: flex; flex-direction: column; - - .contact-selection-list { - width: unset; - } } .session-confirm { diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index f6486dfdc..737d85fe7 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -22,6 +22,7 @@ import { import { createPortal } from 'react-dom'; import { OutgoingMessageStatus } from './conversation/message/OutgoingMessageStatus'; import { DefaultTheme, withTheme } from 'styled-components'; +import { PubKey } from '../session/types'; export type ConversationListItemProps = { id: string; @@ -271,7 +272,7 @@ class ConversationListItem extends React.PureComponent { private renderUser() { const { name, phoneNumber, profileName, isMe, i18n } = this.props; - const shortenedPubkey = window.shortenPubkey(phoneNumber); + const shortenedPubkey = PubKey.shorten(phoneNumber); const displayedPubkey = profileName ? shortenedPubkey : phoneNumber; const displayName = isMe ? i18n('noteToSelf') : profileName; diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx index 6fabff939..86c3d78a3 100644 --- a/ts/components/EditProfileDialog.tsx +++ b/ts/components/EditProfileDialog.tsx @@ -91,7 +91,6 @@ export class EditProfileDialog extends React.Component { return ( { return ( null} onClose={this.closeDialog} theme={this.props.theme} > diff --git a/ts/components/UserSearchResults.tsx b/ts/components/UserSearchResults.tsx index 925619328..126dee9e9 100644 --- a/ts/components/UserSearchResults.tsx +++ b/ts/components/UserSearchResults.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { ConversationListItemProps } from './ConversationListItem'; import classNames from 'classnames'; +import { PubKey } from '../session/types'; export type Props = { contacts: Array; @@ -46,7 +47,7 @@ export class UserSearchResults extends React.Component { const { profileName, phoneNumber } = contact; const { selectedContact } = this.props; - const shortenedPubkey = window.shortenPubkey(phoneNumber); + const shortenedPubkey = PubKey.shorten(phoneNumber); const rowContent = `${profileName} ${shortenedPubkey}`; return ( diff --git a/ts/components/conversation/AddMentions.tsx b/ts/components/conversation/AddMentions.tsx index b9c13962c..71a1be90c 100644 --- a/ts/components/conversation/AddMentions.tsx +++ b/ts/components/conversation/AddMentions.tsx @@ -6,6 +6,7 @@ import { FindMember } from '../../util'; import { useInterval } from '../../hooks/useInterval'; import { ConversationModel } from '../../../js/models/conversations'; import { isUs } from '../../session/utils/User'; +import { PubKey } from '../../session/types'; interface MentionProps { key: string; @@ -46,9 +47,7 @@ const Mention = (props: MentionProps) => { return {displayedName}; } else { return ( - - {window.shortenPubkey(props.text)} - + {PubKey.shorten(props.text)} ); } }; diff --git a/ts/components/conversation/AdminLeaveClosedGroupDialog.tsx b/ts/components/conversation/AdminLeaveClosedGroupDialog.tsx index f47a49005..0da00f1f3 100644 --- a/ts/components/conversation/AdminLeaveClosedGroupDialog.tsx +++ b/ts/components/conversation/AdminLeaveClosedGroupDialog.tsx @@ -27,7 +27,6 @@ class AdminLeaveClosedGroupDialogInner extends React.Component { return ( null} onClose={this.closeDialog} theme={this.props.theme} > diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx index 1ee98fe72..880c5ce34 100644 --- a/ts/components/conversation/InviteContactsDialog.tsx +++ b/ts/components/conversation/InviteContactsDialog.tsx @@ -69,7 +69,6 @@ class InviteContactsDialogInner extends React.Component { return ( null} onClose={this.closeDialog} theme={this.props.theme} > diff --git a/ts/components/conversation/MemberList.tsx b/ts/components/conversation/MemberList.tsx deleted file mode 100644 index 594aaa9d9..000000000 --- a/ts/components/conversation/MemberList.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { Avatar } from '../Avatar'; - -export interface Contact { - id: string; - selected: boolean; - authorProfileName: string; - authorPhoneNumber: string; - authorName: string; - authorAvatarPath: string; - checkmarked: boolean; - existingMember: boolean; -} -interface MemberItemProps { - member: Contact; - selected: boolean; - existingMember: boolean; - onClicked: any; - i18n: any; - checkmarked: boolean; -} - -export class MemberItem extends React.Component { - constructor(props: any) { - super(props); - this.handleClick = this.handleClick.bind(this); - } - - public render() { - const { - authorProfileName: name, - authorPhoneNumber: pubkey, - selected, - existingMember, - checkmarked, - } = this.props.member; - const shortPubkey = window.shortenPubkey(pubkey); - - let markType: 'none' | 'kicked' | 'added' | 'existing' = 'none'; - - if (checkmarked) { - if (existingMember) { - markType = 'kicked'; - } else { - markType = 'added'; - } - } else { - if (existingMember) { - markType = 'existing'; - } else { - markType = 'none'; - } - } - - const markClasses = ['check-mark']; - - switch (markType) { - case 'none': - markClasses.push('invisible'); - break; - case 'existing': - markClasses.push('existing-member'); - break; - case 'kicked': - markClasses.push('existing-member-kicked'); - break; - default: - // do nothing - } - const mark = markType === 'kicked' ? '✘' : '✔'; - - return ( -
- {this.renderAvatar()} - {name} - {shortPubkey} - {mark} -
- ); - } - private handleClick() { - this.props.onClicked(this.props.member); - } - - private renderAvatar() { - const { - authorName, - authorAvatarPath, - authorPhoneNumber, - authorProfileName, - } = this.props.member; - const userName = authorName || authorProfileName || authorPhoneNumber; - - return ( - - ); - } -} - -interface MemberListProps { - members: Array; - selected: any; - onMemberClicked: any; - i18n: any; -} - -export class MemberList extends React.Component { - constructor(props: any) { - super(props); - - this.handleMemberClicked = this.handleMemberClicked.bind(this); - } - - public render() { - const { members, selected } = this.props; - - const itemList = members.map(item => { - const isSelected = item === selected; - - return ( - - ); - }); - - return
{itemList}
; - } - - private handleMemberClicked(member: any) { - this.props.onMemberClicked(member); - } -} diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index e816bc1c2..aa2638e52 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -7,7 +7,7 @@ import { MessageBody } from './MessageBody'; import { ImageGrid } from './ImageGrid'; import { Image } from './Image'; import { ContactName } from './ContactName'; -import { Quote, QuotedAttachmentType } from './Quote'; +import { Quote } from './Quote'; import { EmbeddedContact } from './EmbeddedContact'; // Audio Player @@ -27,7 +27,6 @@ import { isVideo, } from '../../../ts/types/Attachment'; import { AttachmentType } from '../../types/Attachment'; -import { Contact } from '../../types/Contact'; import { getIncrement } from '../../util/timer'; import { isFileDangerous } from '../../util/isFileDangerous'; @@ -36,20 +35,14 @@ import _ from 'lodash'; import { animation, contextMenu, Item, Menu } from 'react-contexify'; import uuid from 'uuid'; import { InView } from 'react-intersection-observer'; -import { DefaultTheme, withTheme } from 'styled-components'; +import { withTheme } from 'styled-components'; import { MessageMetadata } from './message/MessageMetadata'; import { MessageRegularProps } from '../../../js/models/messages'; +import { PubKey } from '../../session/types'; // Same as MIN_WIDTH in ImageGrid.tsx const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200; -interface LinkPreviewType { - title: string; - domain: string; - url: string; - image?: AttachmentType; -} - interface State { expiring: boolean; expired: boolean; @@ -427,7 +420,7 @@ class MessageInner extends React.PureComponent { const withContentAbove = conversationType === 'group' && direction === 'incoming'; - const shortenedPubkey = window.shortenPubkey(quote.authorPhoneNumber); + const shortenedPubkey = PubKey.shorten(quote.authorPhoneNumber); const displayedPubkey = quote.authorProfileName ? shortenedPubkey @@ -624,6 +617,7 @@ class MessageInner extends React.PureComponent { onShowDetail, isPublic, weAreAdmin, + isAdmin, onBanUser, } = this.props; @@ -694,6 +688,12 @@ class MessageInner extends React.PureComponent { {weAreAdmin && isPublic ? ( {window.i18n('banUser')} ) : null} + {/* {weAreAdmin && isPublic && !isAdmin ? ( + {window.i18n('addAsModerator')} + ) : null} + {weAreAdmin && isPublic && isAdmin ? ( + {window.i18n('removeFromModerators')} + ) : null} */} ); } @@ -943,7 +943,7 @@ class MessageInner extends React.PureComponent { return null; } - const shortenedPubkey = window.shortenPubkey(authorPhoneNumber); + const shortenedPubkey = PubKey.shorten(authorPhoneNumber); const displayedPubkey = authorProfileName ? shortenedPubkey diff --git a/ts/components/conversation/ModeratorsAddDialog.tsx b/ts/components/conversation/ModeratorsAddDialog.tsx index 392f3827a..c3a41f56e 100644 --- a/ts/components/conversation/ModeratorsAddDialog.tsx +++ b/ts/components/conversation/ModeratorsAddDialog.tsx @@ -1,225 +1,136 @@ import React from 'react'; -import { Contact, MemberList } from './MemberList'; -import { cleanSearchTerm } from '../../util/cleanSearchTerm'; import { SessionButton, SessionButtonColor, SessionButtonType, } from '../session/SessionButton'; - +import { PubKey } from '../../session/types'; +import { ConversationModel } from '../../../js/models/conversations'; +import { ToastUtils } from '../../session/utils'; +import { SessionModal } from '../session/SessionModal'; +import { DefaultTheme } from 'styled-components'; +import { SessionSpinner } from '../session/SessionSpinner'; +import { Flex } from '../session/Flex'; interface Props { - contactList: Array; - chatName: string; - onSubmit: any; + convo: ConversationModel; onClose: any; + theme: DefaultTheme; } interface State { - contactList: Array; inputBoxValue: string; + addingInProgress: boolean; + firstLoading: boolean; } export class AddModeratorsDialog extends React.Component { - private readonly updateSearchBound: ( - event: React.FormEvent - ) => void; - private readonly inputRef: React.RefObject; + private channelAPI: any; - constructor(props: any) { + constructor(props: Props) { 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 contacts = this.props.contactList; - contacts = contacts.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, - checkmarked: false, - existingMember, - }; - }); + this.addAsModerator = this.addAsModerator.bind(this); + this.onPubkeyBoxChanges = this.onPubkeyBoxChanges.bind(this); + this.state = { - contactList: contacts, inputBoxValue: '', + addingInProgress: false, + firstLoading: true, }; - - window.addEventListener('keyup', this.onKeyUp); } - public updateSearch(event: React.FormEvent) { - const searchTerm = event.currentTarget.value; + public async componentDidMount() { + this.channelAPI = await this.props.convo.getPublicSendData(); - const cleanedTerm = cleanSearchTerm(searchTerm); - if (!cleanedTerm) { + this.setState({ firstLoading: false }); + } + + public async addAsModerator() { + // if we don't have valid data entered by the user + const pubkey = PubKey.from(this.state.inputBoxValue); + if (!pubkey) { + window.log.info( + 'invalid pubkey for adding as moderator:', + this.state.inputBoxValue + ); + ToastUtils.pushInvalidPubKey(); 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.contactList.some( - user => user.authorPhoneNumber === this.state.inputBoxValue - ); - if (!weHave) { - // lookup to verify it's registered? - - // convert pubKey into local object... - const contacts = this.state.contactList; - contacts.push({ - id: this.state.inputBoxValue, - authorPhoneNumber: this.state.inputBoxValue, - authorProfileName: this.state.inputBoxValue, - authorAvatarPath: '', - selected: true, - authorName: this.state.inputBoxValue, - checkmarked: true, - existingMember: false, - }); - this.setState(state => { - return { - ...state, - contactList: contacts, - }; + window.log.info(`asked to add moderator: ${pubkey.key}`); + + try { + this.setState({ + addingInProgress: true, + }); + const res = await this.channelAPI.serverAPI.addModerator([pubkey.key]); + if (!res) { + window.log.warn('failed to add moderators:', res); + + ToastUtils.pushUserNeedsToHaveJoined(); + } else { + window.log.info(`${pubkey.key} added as moderator...`); + ToastUtils.pushUserAddedToModerators(); + + // clear input box + this.setState({ + inputBoxValue: '', }); } - // - } - // clear - if (this.inputRef.current) { - this.inputRef.current.value = ''; + } catch (e) { + window.log.error('Got error while adding moderator:', e); + } finally { + this.setState({ + addingInProgress: false, + }); } - this.setState(state => { - return { - ...state, - inputBoxValue: '', - }; - }); } public render() { const { i18n } = window; + const { addingInProgress, inputBoxValue, firstLoading } = this.state; + const chatName = this.props.convo.get('name'); - const hasContacts = this.state.contactList.length !== 0; + const title = `${i18n('addModerators')}: ${chatName}`; + + const renderContent = !firstLoading; return ( -
-

- {i18n('addModerators')} {this.props.chatName} -

-
-

Add Moderator:

- - -
-
-

Or, from friends:

-
- -
- {hasContacts ? null :

{i18n('noContactsToAdd')}

} -
-
- - -
-
+ this.props.onClose()} + theme={this.props.theme} + > + + {renderContent && ( + <> +

Add Moderator:

+ + + + )} + + + ); } - private onClickOK() { - const selectedContacts = this.state.contactList - .filter(d => d.checkmarked) - .map(d => d.id); - if (selectedContacts.length > 0) { - this.props.onSubmit(selectedContacts); - } - - 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 updatedContacts = this.state.contactList.map(member => { - if (member.id === selected.id) { - return { ...member, checkmarked: !member.checkmarked }; - } else { - return member; - } - }); - - this.setState(state => { - return { - ...state, - contactList: updatedContacts, - }; - }); + private onPubkeyBoxChanges(e: any) { + const val = e.target.value; + this.setState({ inputBoxValue: val }); } } diff --git a/ts/components/conversation/ModeratorsRemoveDialog.tsx b/ts/components/conversation/ModeratorsRemoveDialog.tsx index 74df7d400..98327ad50 100644 --- a/ts/components/conversation/ModeratorsRemoveDialog.tsx +++ b/ts/components/conversation/ModeratorsRemoveDialog.tsx @@ -1,129 +1,134 @@ import React from 'react'; +import { DefaultTheme } from 'styled-components'; +import { ConversationModel } from '../../../js/models/conversations'; +import { ConversationController } from '../../session/conversations'; +import { ToastUtils } from '../../session/utils'; +import { Flex } from '../session/Flex'; import { SessionButton, SessionButtonColor, SessionButtonType, } from '../session/SessionButton'; -import { Contact, MemberList } from './MemberList'; - +import { + ContactType, + SessionMemberListItem, +} from '../session/SessionMemberListItem'; +import { SessionModal } from '../session/SessionModal'; +import { SessionSpinner } from '../session/SessionSpinner'; interface Props { - modList: Array; - chatName: string; - onSubmit: any; + convo: ConversationModel; onClose: any; + theme: DefaultTheme; } interface State { - modList: Array; + modList: Array; + removingInProgress: boolean; + firstLoading: boolean; } export class RemoveModeratorsDialog extends React.Component { + private channelAPI: any; + 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); + this.removeThem = this.removeThem.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'; - } - // TODO: should take existing members into account - const existingMember = false; - - return { - id: d.id, - authorPhoneNumber: d.id, - authorProfileName: name, - selected: false, - authorName: name, - checkmarked: true, - existingMember, - }; - }); this.state = { - modList: mods, + modList: [], + removingInProgress: false, + firstLoading: true, }; + } + + public async componentDidMount() { + this.channelAPI = await this.props.convo.getPublicSendData(); - window.addEventListener('keyup', this.onKeyUp); + void this.refreshModList(); } public render() { - const i18n = window.i18n; + const { i18n } = window; + const { removingInProgress, firstLoading } = this.state; const hasMods = this.state.modList.length !== 0; - return ( -
-

- {i18n('removeModerators')} {this.props.chatName} -

-
-

Existing moderators:

-
- -
- {hasMods ? null :

{i18n('noModeratorsToRemove')}

} -
-
- - -
-
- ); - } - - private onClickOK() { - const removedMods = this.state.modList - .filter(d => !d.checkmarked) - .map(d => d.id); + const chatName = this.props.convo.get('name'); - if (removedMods.length > 0) { - this.props.onSubmit(removedMods); - } + const title = `${i18n('removeModerators')}: ${chatName}`; - this.closeDialog(); - } + const renderContent = !firstLoading; - private onKeyUp(event: any) { - switch (event.key) { - case 'Enter': - this.onClickOK(); - break; - case 'Esc': - case 'Escape': - this.closeDialog(); - break; - default: - } + return ( + + + {renderContent && ( + <> +

Existing moderators:

+
+ {this.renderMemberList()} +
+ + {hasMods ? null :

{i18n('noModeratorsToRemove')}

} + + +
+ + +
+ + )} + + + + + ); } private closeDialog() { - window.removeEventListener('keyup', this.onKeyUp); - this.props.onClose(); } - private onModClicked(selected: any) { + private renderMemberList() { + const members = this.state.modList; + const selectedContacts = members.filter(d => d.checkmarked).map(d => d.id); + + return members.map((member: ContactType, index: number) => ( + m === member.id)} + onSelect={(selectedMember: ContactType) => { + this.onModClicked(selectedMember); + }} + onUnselect={(selectedMember: ContactType) => { + this.onModClicked(selectedMember); + }} + theme={this.props.theme} + /> + )); + } + + private onModClicked(selected: ContactType) { const updatedContacts = this.state.modList.map(member => { if (member.id === selected.id) { return { ...member, checkmarked: !member.checkmarked }; @@ -139,4 +144,76 @@ export class RemoveModeratorsDialog extends React.Component { }; }); } + + private async refreshModList() { + // get current list of moderators + const modPubKeys = (await this.channelAPI.getModerators()) as Array; + const convos = ConversationController.getInstance().getConversations(); + const moderatorsConvos = modPubKeys + .map( + pubKey => + convos.find(c => c.id === pubKey) || { + id: pubKey, // memberList need a key + authorPhoneNumber: pubKey, + } + ) + .filter(c => !!c); + + const mods = moderatorsConvos.map((d: any) => { + let name = ''; + if (d.getLokiProfile) { + const lokiProfile = d.getLokiProfile(); + 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, + authorAvatarPath: '', + authorName: name, + checkmarked: true, + existingMember, + }; + }); + this.setState({ + modList: mods, + firstLoading: false, + removingInProgress: false, + }); + } + + private async removeThem() { + const removedMods = this.state.modList + .filter(d => !d.checkmarked) + .map(d => d.id); + + if (removedMods.length === 0) { + window.log.info('No moderators removed. Nothing todo'); + return; + } + window.log.info(`asked to remove moderator: ${removedMods}`); + + try { + this.setState({ + removingInProgress: true, + }); + const res = await this.channelAPI.serverAPI.removeModerators(removedMods); + if (!res) { + window.log.warn('failed to remove moderators:', res); + + ToastUtils.pushUserNeedsToHaveJoined(); + } else { + window.log.info(`${removedMods} removed from moderators...`); + ToastUtils.pushUserRemovedToModerators(); + } + } catch (e) { + window.log.error('Got error while adding moderator:', e); + } finally { + await this.refreshModList(); + } + } } diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx index 9608a8d03..aa699feb5 100644 --- a/ts/components/conversation/Quote.tsx +++ b/ts/components/conversation/Quote.tsx @@ -9,6 +9,7 @@ import * as GoogleChrome from '../../../ts/util/GoogleChrome'; import { MessageBody } from './MessageBody'; import { ColorType, LocalizerType } from '../../types/Util'; import { ContactName } from './ContactName'; +import { PubKey } from '../../session/types'; interface Props { attachment?: QuotedAttachmentType; @@ -316,7 +317,7 @@ export class Quote extends React.Component { i18n('you') ) : ( ; + contactList: Array; errorDisplayed: boolean; errorMessage: string; } @@ -97,7 +96,6 @@ export class UpdateGroupMembersDialog extends React.Component { title={titleText} // tslint:disable-next-line: no-void-expression onClose={() => this.closeDialog()} - onOk={() => null} theme={this.props.theme} >
@@ -155,7 +153,7 @@ export class UpdateGroupMembersDialog extends React.Component { // Return members that would comprise the group given the // current state in `users` - private getWouldBeMembers(users: Array) { + private getWouldBeMembers(users: Array) { return users.filter(d => { return ( (d.existingMember && !d.checkmarked) || diff --git a/ts/components/conversation/UpdateGroupNameDialog.tsx b/ts/components/conversation/UpdateGroupNameDialog.tsx index e92445135..f8edfce46 100644 --- a/ts/components/conversation/UpdateGroupNameDialog.tsx +++ b/ts/components/conversation/UpdateGroupNameDialog.tsx @@ -85,7 +85,6 @@ class UpdateGroupNameDialogInner extends React.Component { title={titleText} // tslint:disable-next-line: no-void-expression onClose={() => this.closeDialog()} - onOk={() => null} theme={this.props.theme} >
diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index d5060eda7..42ab6b7ff 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -47,7 +47,6 @@ const SessionConfirmInner = (props: Props) => { null} showExitIcon={false} showHeader={showHeader} theme={props.theme} diff --git a/ts/components/session/SessionIDResetDialog.tsx b/ts/components/session/SessionIDResetDialog.tsx index a69db27ce..d19439d8a 100644 --- a/ts/components/session/SessionIDResetDialog.tsx +++ b/ts/components/session/SessionIDResetDialog.tsx @@ -19,7 +19,6 @@ const SessionIDResetDialogInner = (props: Props) => { return ( null} onClose={() => null} theme={props.theme} > diff --git a/ts/components/session/SessionMemberListItem.tsx b/ts/components/session/SessionMemberListItem.tsx index 101ed1aa2..d728e8cbd 100644 --- a/ts/components/session/SessionMemberListItem.tsx +++ b/ts/components/session/SessionMemberListItem.tsx @@ -4,7 +4,8 @@ import classNames from 'classnames'; import { Avatar } from '../Avatar'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; import { Constants } from '../../session'; -import { DefaultTheme, withTheme } from 'styled-components'; +import { DefaultTheme } from 'styled-components'; +import { PubKey } from '../../session/types'; export interface ContactType { id: string; @@ -41,9 +42,10 @@ class SessionMemberListItemInner extends React.Component { } public render() { - const { isSelected } = this.props; + const { isSelected, member } = this.props; - const name = this.props.member.authorProfileName; + const name = + member.authorProfileName || PubKey.shorten(member.authorPhoneNumber); return (
{ return ( null} onClose={this.closeDialog} theme={this.props.theme} > diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx index c008342ad..207dac966 100644 --- a/ts/components/session/SessionSeedModal.tsx +++ b/ts/components/session/SessionSeedModal.tsx @@ -60,7 +60,6 @@ class SessionSeedModalInner extends React.Component { {!loading && ( null} onClose={onClose} theme={this.props.theme} > diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 5c4c5d9c7..a2c267bd8 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -25,11 +25,11 @@ import { import { AbortController } from 'abort-controller'; import { SessionQuotedMessageComposition } from './SessionQuotedMessageComposition'; import { Mention, MentionsInput } from 'react-mentions'; -import { MemberItem } from '../../conversation/MemberList'; import { CaptionEditor } from '../../CaptionEditor'; import { DefaultTheme } from 'styled-components'; import { ConversationController } from '../../../session/conversations/ConversationController'; import { ConversationType } from '../../../state/ducks/conversations'; +import { SessionMemberListItem } from '../SessionMemberListItem'; export interface ReplyingToMessageProps { convoId: string; @@ -351,7 +351,7 @@ export class SessionCompositionBox extends React.Component { private renderTextArea() { const { i18n } = window; const { message } = this.state; - const { isKickedFromGroup, left, isPrivate, isBlocked } = this.props; + const { isKickedFromGroup, left, isPrivate, isBlocked, theme } = this.props; const messagePlaceHolder = isKickedFromGroup ? i18n('youGotKickedFromGroup') : left @@ -362,6 +362,7 @@ export class SessionCompositionBox extends React.Component { ? i18n('unblockGroupToSend') : i18n('sendMessage'); const typingEnabled = this.isTypingEnabled(); + let index = 0; return ( { _index, focused ) => ( - {}} - existingMember={false} + )} /> diff --git a/ts/session/sending/MessageSender.ts b/ts/session/sending/MessageSender.ts index db3f0b8a8..ba2356324 100644 --- a/ts/session/sending/MessageSender.ts +++ b/ts/session/sending/MessageSender.ts @@ -72,7 +72,6 @@ async function buildEnvelope( source = sskSource; } - return SignalService.Envelope.create({ type, source, diff --git a/ts/session/types/PubKey.ts b/ts/session/types/PubKey.ts index 190220c6d..c647dfa5f 100644 --- a/ts/session/types/PubKey.ts +++ b/ts/session/types/PubKey.ts @@ -54,6 +54,13 @@ export class PubKey { return typeof value === 'string' ? new PubKey(value) : value; } + public static shorten(value: string | PubKey): string { + const valAny = value as PubKey; + const pk = value instanceof PubKey ? valAny.key : value; + + return `(...${pk.substring(pk.length - 6)})`; + } + /** * Try convert `pubKeyString` to `PubKey`. * diff --git a/ts/session/utils/Toast.tsx b/ts/session/utils/Toast.tsx index 9deec367c..3fc8e75b5 100644 --- a/ts/session/utils/Toast.tsx +++ b/ts/session/utils/Toast.tsx @@ -222,9 +222,27 @@ export function pushCannotRemoveCreatorFromGroup() { } export function pushUserNeedsToHaveJoined() { - pushToastInfo( + pushToastWarning( 'userNeedsToHaveJoined', window.i18n('userNeedsToHaveJoined'), window.i18n('userNeedsToHaveJoinedDesc') ); } + +export function pushUserAddedToModerators() { + pushToastSuccess( + 'userAddedToModerators', + window.i18n('userAddedToModerators') + ); +} + +export function pushUserRemovedToModerators() { + pushToastSuccess( + 'userRemovedFromModerators', + window.i18n('userRemovedFromModerators') + ); +} + +export function pushInvalidPubKey() { + pushToastSuccess('invalidPubKey', window.i18n('invalidPubkeyFormat')); +} diff --git a/ts/window.d.ts b/ts/window.d.ts index 5ebf8831a..2b28a4eaf 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -78,7 +78,6 @@ declare global { seedNodeList: any; setPassword: any; setSettingValue: any; - shortenPubkey: (pubKey: string) => string; showEditProfileDialog: any; showResetSessionIdDialog: any; storage: any;