refactor most of the components to outside of their Session folder (#2072)
* refactor most of the components to outside of their Session folder * finish moving overlay and memberListItem to react hook * fix bug with kicked member len >2 not being displayed also sort admins first in UpdateGroupMembers dialog * fix admin leaving text of groupNotification * add a useFocusMount hook to focus input fields on mount * make click avatar convo item open only user dialog * cleanup config default.json * make sure to use convoController to build sync message * disable showing pubkey on opengroups * add a pause on audio playback Fixes #2079pull/2083/head
Audric Ackermann
3 years ago
committed by
GitHub
parent
95e40c9509
commit
28c7445dce
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Avatar, AvatarSize } from './avatar/Avatar';
|
||||
import { Constants } from '../session';
|
||||
import { SessionIcon } from './icon';
|
||||
import { useConversationUsernameOrShorten } from '../hooks/useParamSelector';
|
||||
|
||||
const AvatarItem = (props: { memberPubkey: string }) => {
|
||||
return <Avatar size={AvatarSize.XS} pubkey={props.memberPubkey} />;
|
||||
};
|
||||
|
||||
export const MemberListItem = (props: {
|
||||
pubkey: string;
|
||||
isSelected: boolean;
|
||||
// this bool is used to make a zombie appear with less opacity than a normal member
|
||||
isZombie?: boolean;
|
||||
onSelect?: (pubkey: string) => void;
|
||||
onUnselect?: (pubkey: string) => void;
|
||||
}) => {
|
||||
const { isSelected, pubkey, isZombie, onSelect, onUnselect } = props;
|
||||
|
||||
const memberName = useConversationUsernameOrShorten(pubkey);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('session-member-item', isSelected && 'selected', isZombie && 'zombie')}
|
||||
onClick={() => {
|
||||
isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey);
|
||||
}}
|
||||
role="button"
|
||||
>
|
||||
<div className="session-member-item__info">
|
||||
<span className="session-member-item__avatar">
|
||||
<AvatarItem memberPubkey={pubkey} />
|
||||
</span>
|
||||
<span className="session-member-item__name">{memberName}</span>
|
||||
</div>
|
||||
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
|
||||
<SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,32 +1,32 @@
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { getConversationController } from '../../session/conversations';
|
||||
import { UserUtils } from '../../session/utils';
|
||||
import { createStore } from '../../state/createStore';
|
||||
import {
|
||||
actions as conversationActions,
|
||||
getEmptyConversationState,
|
||||
openConversationWithMessages,
|
||||
} from '../../state/ducks/conversations';
|
||||
import { initialDefaultRoomState } from '../../state/ducks/defaultRooms';
|
||||
import { initialModalState } from '../../state/ducks/modalDialog';
|
||||
import { initialOnionPathState } from '../../state/ducks/onion';
|
||||
import { initialSearchState } from '../../state/ducks/search';
|
||||
import { initialSectionState } from '../../state/ducks/section';
|
||||
import { initialThemeState } from '../../state/ducks/theme';
|
||||
import { initialUserConfigState } from '../../state/ducks/userConfig';
|
||||
import { StateType } from '../../state/reducer';
|
||||
import { makeLookup } from '../../util';
|
||||
import { LeftPane } from '../LeftPane';
|
||||
import { SessionMainPanel } from '../SessionMainPanel';
|
||||
import { LeftPane } from './leftpane/LeftPane';
|
||||
|
||||
// tslint:disable-next-line: no-submodule-imports
|
||||
import { PersistGate } from 'redux-persist/integration/react';
|
||||
import { persistStore } from 'redux-persist';
|
||||
import { TimerOptionsArray } from '../../state/ducks/timerOptions';
|
||||
import { getEmptyStagedAttachmentsState } from '../../state/ducks/stagedAttachments';
|
||||
import { initialCallState } from '../../state/ducks/call';
|
||||
import { getConversationController } from '../session/conversations';
|
||||
import { UserUtils } from '../session/utils';
|
||||
import { initialCallState } from '../state/ducks/call';
|
||||
import {
|
||||
actions as conversationActions,
|
||||
getEmptyConversationState,
|
||||
openConversationWithMessages,
|
||||
} from '../state/ducks/conversations';
|
||||
import { initialDefaultRoomState } from '../state/ducks/defaultRooms';
|
||||
import { initialModalState } from '../state/ducks/modalDialog';
|
||||
import { initialOnionPathState } from '../state/ducks/onion';
|
||||
import { initialSearchState } from '../state/ducks/search';
|
||||
import { initialSectionState } from '../state/ducks/section';
|
||||
import { getEmptyStagedAttachmentsState } from '../state/ducks/stagedAttachments';
|
||||
import { initialThemeState } from '../state/ducks/theme';
|
||||
import { TimerOptionsArray } from '../state/ducks/timerOptions';
|
||||
import { initialUserConfigState } from '../state/ducks/userConfig';
|
||||
import { StateType } from '../state/reducer';
|
||||
import { makeLookup } from '../util';
|
||||
import { SessionMainPanel } from './SessionMainPanel';
|
||||
import { createStore } from '../state/createStore';
|
||||
|
||||
// Workaround: A react component's required properties are filtering up through connect()
|
||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
import { getShowScrollButton } from '../../state/selectors/conversations';
|
||||
import { getShowScrollButton } from '../state/selectors/conversations';
|
||||
|
||||
import { SessionIconButton } from './icon';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getConversationsCount } from '../../state/selectors/conversations';
|
||||
import { getConversationsCount } from '../state/selectors/conversations';
|
||||
import { SessionIconButton } from './icon';
|
||||
|
||||
type Props = {
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { getInitials } from '../../util/getInitials';
|
||||
import { getInitials } from '../../../util/getInitials';
|
||||
|
||||
type Props = {
|
||||
diameter: number;
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { useMembersAvatars } from '../../hooks/useMembersAvatars';
|
||||
import { useMembersAvatars } from '../../../hooks/useMembersAvatars';
|
||||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
|
||||
type Props = {
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { SessionIcon, SessionIconType } from '../icon';
|
||||
|
||||
import { SessionIcon, SessionIconType } from './icon/';
|
||||
import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
|
||||
|
||||
// THIS IS DROPDOWN ACCORDIAN STYLE OPTIONS SELECTOR ELEMENT, NOT A CONTEXTMENU
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionIcon, SessionIconType } from './icon/';
|
||||
import { SessionIcon, SessionIconType } from '../icon';
|
||||
|
||||
export enum SessionDropDownItemType {
|
||||
Default = 'default',
|
||||
@ -0,0 +1,54 @@
|
||||
import React, { ChangeEvent, KeyboardEvent, useRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useFocusMount } from '../../hooks/useFocusMount';
|
||||
|
||||
type Props = {
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
text?: string;
|
||||
editable?: boolean;
|
||||
onChange?: (value: string) => void;
|
||||
onPressEnter?: any;
|
||||
maxLength?: number;
|
||||
isGroup?: boolean;
|
||||
};
|
||||
|
||||
export const SessionIdEditable = (props: Props) => {
|
||||
const { placeholder, onPressEnter, onChange, editable, text, value, maxLength, isGroup } = props;
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useFocusMount(inputRef, editable);
|
||||
function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
|
||||
if (editable && onChange) {
|
||||
const eventValue = e.target.value?.replace(/(\r\n|\n|\r)/gm, '');
|
||||
onChange(eventValue);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
|
||||
if (editable && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
// tslint:disable-next-line: no-unused-expression
|
||||
onPressEnter && onPressEnter();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames('session-id-editable', !editable && 'session-id-editable-disabled')}>
|
||||
<textarea
|
||||
className={classNames(
|
||||
isGroup ? 'group-id-editable-textarea' : 'session-id-editable-textarea'
|
||||
)}
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
disabled={!editable}
|
||||
spellCheck={false}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={handleChange}
|
||||
onBlur={handleChange}
|
||||
value={value || text}
|
||||
maxLength={maxLength}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { SessionIconButton } from './icon';
|
||||
import { SessionIconButton } from '../icon';
|
||||
|
||||
type Props = {
|
||||
label?: string;
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
import { SessionIcon, SessionIconType } from './icon/';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import styled from 'styled-components';
|
||||
import { noop } from 'lodash';
|
||||
import { SessionIcon, SessionIconType } from '../icon';
|
||||
|
||||
export enum SessionToastType {
|
||||
Info = 'info',
|
||||
@ -1,11 +1,11 @@
|
||||
import { SessionIconButton } from '../icon';
|
||||
import { animation, contextMenu, Item, Menu } from 'react-contexify';
|
||||
import { InputItem } from '../../../session/utils/calling/CallManager';
|
||||
import { setFullScreenCall } from '../../../state/ducks/call';
|
||||
import { CallManager, ToastUtils } from '../../../session/utils';
|
||||
import { InputItem } from '../../session/utils/calling/CallManager';
|
||||
import { setFullScreenCall } from '../../state/ducks/call';
|
||||
import { CallManager, ToastUtils } from '../../session/utils';
|
||||
import React from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getHasOngoingCallWithPubkey } from '../../../state/selectors/call';
|
||||
import { getHasOngoingCallWithPubkey } from '../../state/selectors/call';
|
||||
import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
|
||||
import styled from 'styled-components';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Picker } from 'emoji-mart';
|
||||
import { Constants } from '../../../session';
|
||||
import { Constants } from '../../session';
|
||||
|
||||
type Props = {
|
||||
onEmojiClicked: (emoji: any) => void;
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Flex } from '../../basic/Flex';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import { SessionIcon } from '../icon';
|
||||
|
||||
const DropZoneContainer = styled.div`
|
||||
@ -1,13 +1,13 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Flex } from '../../basic/Flex';
|
||||
import { SessionIcon, SessionIconButton } from '../icon';
|
||||
import styled from 'styled-components';
|
||||
import { getAlt, isAudio } from '../../../types/Attachment';
|
||||
import { Image } from '../../conversation/Image';
|
||||
import { AUDIO_MP3 } from '../../../types/MIME';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getQuotedMessage } from '../../../state/selectors/conversations';
|
||||
import { quoteMessage } from '../../../state/ducks/conversations';
|
||||
import { quoteMessage } from '../../state/ducks/conversations';
|
||||
import { getQuotedMessage } from '../../state/selectors/conversations';
|
||||
import { getAlt, isAudio } from '../../types/Attachment';
|
||||
import { AUDIO_MP3 } from '../../types/MIME';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import { Image } from '../../../ts/components/conversation/Image';
|
||||
|
||||
const QuotedMessageComposition = styled.div`
|
||||
width: 100%;
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { arrayBufferFromFile } from '../../../types/Attachment';
|
||||
import { AttachmentUtil, LinkPreviewUtil } from '../../../util';
|
||||
import { StagedLinkPreviewData } from './composition/CompositionBox';
|
||||
import { default as insecureNodeFetch } from 'node-fetch';
|
||||
import { fetchLinkPreviewImage } from '../../../util/linkPreviewFetch';
|
||||
import { AbortSignal } from 'abort-controller';
|
||||
import { StagedLinkPreview } from '../../conversation/StagedLinkPreview';
|
||||
import { arrayBufferFromFile } from '../../types/Attachment';
|
||||
import { AttachmentUtil, LinkPreviewUtil } from '../../util';
|
||||
import { fetchLinkPreviewImage } from '../../util/linkPreviewFetch';
|
||||
import { StagedLinkPreview } from './StagedLinkPreview';
|
||||
|
||||
export interface StagedLinkPreviewProps extends StagedLinkPreviewData {
|
||||
onClose: (url: string) => void;
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { getMessageById, getMessagesByConversation } from '../../../data/data';
|
||||
import { getConversationController } from '../../../session/conversations';
|
||||
import { AttachmentDownloads } from '../../../session/utils';
|
||||
import { updateConfirmModal } from '../../../state/ducks/modalDialog';
|
||||
import { SessionIcon } from '../../session/icon';
|
||||
import { SessionButtonColor } from '../../session/SessionButton';
|
||||
import { getMessageById, getMessagesByConversation } from '../../../../data/data';
|
||||
import { getConversationController } from '../../../../session/conversations';
|
||||
import { AttachmentDownloads } from '../../../../session/utils';
|
||||
import { updateConfirmModal } from '../../../../state/ducks/modalDialog';
|
||||
import { SessionButtonColor } from '../../../basic/SessionButton';
|
||||
import { SessionIcon } from '../../../icon';
|
||||
|
||||
const StyledTrustSenderUI = styled.div`
|
||||
padding-inline: var(--margins-xs);
|
||||
@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { MessageRenderingProps } from '../../../models/messageType';
|
||||
import { PubKey } from '../../../session/types/PubKey';
|
||||
import { MessageRenderingProps } from '../../../../models/messageType';
|
||||
import { PubKey } from '../../../../session/types';
|
||||
import {
|
||||
getMessageAuthorProps,
|
||||
isGroupConversation,
|
||||
isPublicGroupConversation,
|
||||
} from '../../../state/selectors/conversations';
|
||||
import { Flex } from '../../basic/Flex';
|
||||
import { ContactName } from '../ContactName';
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { Flex } from '../../../basic/Flex';
|
||||
import { ContactName } from '../../ContactName';
|
||||
|
||||
export type MessageAuthorSelectorProps = Pick<
|
||||
MessageRenderingProps,
|
||||
@ -1,12 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
import { getSizeClass, SizeClassType } from '../../util/emoji';
|
||||
import { Emojify } from './Emojify';
|
||||
import { AddNewLines } from './AddNewLines';
|
||||
import { AddMentions } from './AddMentions';
|
||||
import { Linkify } from './Linkify';
|
||||
|
||||
import { RenderTextCallbackType } from '../../types/Util';
|
||||
import { RenderTextCallbackType } from '../../../../types/Util';
|
||||
import { getSizeClass, SizeClassType } from '../../../../util/emoji';
|
||||
import { AddMentions } from '../../AddMentions';
|
||||
import { AddNewLines } from '../../AddNewLines';
|
||||
import { Emojify } from '../../Emojify';
|
||||
import { Linkify } from '../../Linkify';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
@ -1,13 +1,13 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { isImageAttachment } from '../../../types/Attachment';
|
||||
import { SessionIcon } from '../../session/icon';
|
||||
import { ImageGrid } from '../ImageGrid';
|
||||
import { Image } from '../Image';
|
||||
import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../Message';
|
||||
import { MessageRenderingProps } from '../../../models/messageType';
|
||||
import { isImageAttachment } from '../../../../types/Attachment';
|
||||
import { ImageGrid } from '../../ImageGrid';
|
||||
import { Image } from '../../Image';
|
||||
import { MessageRenderingProps } from '../../../../models/messageType';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getMessagePreviewProps } from '../../../state/selectors/conversations';
|
||||
import { getMessagePreviewProps } from '../../../../state/selectors/conversations';
|
||||
import { SessionIcon } from '../../../icon';
|
||||
import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
|
||||
|
||||
export type MessagePreviewSelectorProps = Pick<MessageRenderingProps, 'attachments' | 'previews'>;
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import _ from 'lodash';
|
||||
import { MessageRenderingProps, QuoteClickOptions } from '../../../models/messageType';
|
||||
import { PubKey } from '../../../session/types';
|
||||
import { toggleSelectedMessageId } from '../../../state/ducks/conversations';
|
||||
import { MessageRenderingProps, QuoteClickOptions } from '../../../../models/messageType';
|
||||
import { PubKey } from '../../../../session/types';
|
||||
import { toggleSelectedMessageId } from '../../../../state/ducks/conversations';
|
||||
import {
|
||||
getMessageQuoteProps,
|
||||
isMessageSelectionMode,
|
||||
} from '../../../state/selectors/conversations';
|
||||
import { Quote } from '../Quote';
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { Quote } from './Quote';
|
||||
|
||||
// tslint:disable: use-simple-attributes
|
||||
|
||||
type Props = {
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { MessageRenderingProps } from '../../../models/messageType';
|
||||
import { getMessageStatusProps } from '../../../state/selectors/conversations';
|
||||
import { MessageRenderingProps } from '../../../../models/messageType';
|
||||
import { getMessageStatusProps } from '../../../../state/selectors/conversations';
|
||||
import { OutgoingMessageStatus } from './OutgoingMessageStatus';
|
||||
|
||||
type Props = {
|
||||
@ -1,13 +1,13 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { MessageRenderingProps } from '../../../models/messageType';
|
||||
import { MessageRenderingProps } from '../../../../models/messageType';
|
||||
import {
|
||||
getMessageTextProps,
|
||||
isMessageSelectionMode,
|
||||
} from '../../../state/selectors/conversations';
|
||||
import { SessionIcon } from '../../session/icon';
|
||||
import { MessageBody } from '../MessageBody';
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { SessionIcon } from '../../../icon';
|
||||
import { MessageBody } from './MessageBody';
|
||||
|
||||
type Props = {
|
||||
messageId: string;
|
||||
@ -1,8 +1,8 @@
|
||||
import { ipcRenderer } from 'electron';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { MessageDeliveryStatus } from '../../../models/messageType';
|
||||
import { SessionIcon } from '../../session/icon';
|
||||
import { MessageDeliveryStatus } from '../../../../models/messageType';
|
||||
import { SessionIcon } from '../../../icon';
|
||||
|
||||
const MessageStatusSendingContainer = styled.div`
|
||||
display: inline-block;
|
||||
@ -1,22 +1,22 @@
|
||||
import React, { useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import * as MIME from '../../../ts/types/MIME';
|
||||
import * as GoogleChrome from '../../../ts/util/GoogleChrome';
|
||||
import * as MIME from '../../../../../ts/types/MIME';
|
||||
import * as GoogleChrome from '../../../../../ts/util/GoogleChrome';
|
||||
|
||||
import { MessageBody } from './MessageBody';
|
||||
import { ContactName } from './ContactName';
|
||||
import { PubKey } from '../../session/types';
|
||||
|
||||
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { noop } from 'underscore';
|
||||
import { useDisableDrag } from '../../../../hooks/useDisableDrag';
|
||||
import { useEncryptedFileFetch } from '../../../../hooks/useEncryptedFileFetch';
|
||||
import { PubKey } from '../../../../session/types';
|
||||
import {
|
||||
getSelectedConversationKey,
|
||||
isGroupConversation,
|
||||
isPublicGroupConversation,
|
||||
} from '../../state/selectors/conversations';
|
||||
import { noop } from 'underscore';
|
||||
import { useDisableDrag } from '../../hooks/useDisableDrag';
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { ContactName } from '../../ContactName';
|
||||
import { MessageBody } from './MessageBody';
|
||||
|
||||
export type QuotePropsWithoutListener = {
|
||||
attachment?: QuotedAttachmentType;
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { PropsForDataExtractionNotification } from '../../models/messageType';
|
||||
import { SignalService } from '../../protobuf';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import { SessionIcon } from '../session/icon';
|
||||
import { SpacerSM, Text } from '../basic/Text';
|
||||
import { PropsForDataExtractionNotification } from '../../../../models/messageType';
|
||||
import { SignalService } from '../../../../protobuf';
|
||||
import { Flex } from '../../../basic/Flex';
|
||||
import { SpacerSM, Text } from '../../../basic/Text';
|
||||
import { SessionIcon } from '../../../icon';
|
||||
import { ReadableMessage } from './ReadableMessage';
|
||||
|
||||
export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { SessionIconButton } from '../session/icon';
|
||||
import { PropsForGroupInvitation } from '../../state/ducks/conversations';
|
||||
import { acceptOpenGroupInvitation } from '../../interactions/messageInteractions';
|
||||
import { PropsForGroupInvitation } from '../../../../state/ducks/conversations';
|
||||
import { acceptOpenGroupInvitation } from '../../../../interactions/messageInteractions';
|
||||
import { SessionIconButton } from '../../../icon';
|
||||
import { ReadableMessage } from './ReadableMessage';
|
||||
|
||||
export const GroupInvitation = (props: PropsForGroupInvitation) => {
|
||||
@ -1,11 +1,14 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { PubKey } from '../../../session/types';
|
||||
import { PubKey } from '../../../../../session/types';
|
||||
|
||||
import { CallNotificationType, PropsForCallNotification } from '../../../state/ducks/conversations';
|
||||
import { getSelectedConversation } from '../../../state/selectors/conversations';
|
||||
import { LocalizerKeys } from '../../../types/LocalizerKeys';
|
||||
import { SessionIconType } from '../../session/icon';
|
||||
import {
|
||||
CallNotificationType,
|
||||
PropsForCallNotification,
|
||||
} from '../../../../../state/ducks/conversations';
|
||||
import { getSelectedConversation } from '../../../../../state/selectors/conversations';
|
||||
import { LocalizerKeys } from '../../../../../types/LocalizerKeys';
|
||||
import { SessionIconType } from '../../../../icon';
|
||||
import { ReadableMessage } from '../ReadableMessage';
|
||||
import { NotificationBubble } from './NotificationBubble';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { SessionIcon, SessionIconType } from '../../session/icon';
|
||||
import { SessionIcon, SessionIconType } from '../../../../icon';
|
||||
|
||||
const NotificationBubbleFlex = styled.div`
|
||||
display: flex;
|
||||
@ -1,217 +1,134 @@
|
||||
import React from 'react';
|
||||
import { ApiV2 } from '../../opengroup/opengroupV2';
|
||||
import React, { useState } from 'react';
|
||||
import { ApiV2 } from '../../session/apis/open_group_api/opengroupV2';
|
||||
import { getConversationController } from '../../session/conversations';
|
||||
import { PubKey } from '../../session/types';
|
||||
import { ToastUtils } from '../../session/utils';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
|
||||
import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
|
||||
import { SessionSpinner } from '../session/SessionSpinner';
|
||||
import _ from 'lodash';
|
||||
import { SessionWrapperModal } from '../session/SessionWrapperModal';
|
||||
import { updateRemoveModeratorsModal } from '../../state/ducks/modalDialog';
|
||||
interface Props {
|
||||
import { SessionWrapperModal } from '../SessionWrapperModal';
|
||||
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
|
||||
import { SessionSpinner } from '../basic/SessionSpinner';
|
||||
import { MemberListItem } from '../MemberListItem';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useConversationPropsById } from '../../hooks/useParamSelector';
|
||||
|
||||
type Props = {
|
||||
conversationId: string;
|
||||
}
|
||||
|
||||
interface State {
|
||||
modList: Array<ContactType>;
|
||||
removingInProgress: boolean;
|
||||
firstLoading: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
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.removeThem = this.removeThem.bind(this);
|
||||
|
||||
this.state = {
|
||||
modList: [],
|
||||
removingInProgress: false,
|
||||
firstLoading: true,
|
||||
};
|
||||
async function removeMods(convoId: string, modsToRemove: Array<string>) {
|
||||
if (modsToRemove.length === 0) {
|
||||
window?.log?.info('No moderators removed. Nothing todo');
|
||||
return false;
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.refreshModList();
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { i18n } = window;
|
||||
const { removingInProgress, firstLoading } = this.state;
|
||||
const hasMods = this.state.modList.length !== 0;
|
||||
|
||||
const convo = getConversationController().get(this.props.conversationId);
|
||||
|
||||
const chatName = convo.get('name');
|
||||
|
||||
const title = `${i18n('removeModerators')}: ${chatName}`;
|
||||
|
||||
const renderContent = !firstLoading;
|
||||
|
||||
return (
|
||||
<SessionWrapperModal title={title} onClose={this.closeDialog}>
|
||||
<Flex container={true} flexDirection="column" alignItems="center">
|
||||
{renderContent && (
|
||||
<>
|
||||
<p>Existing moderators:</p>
|
||||
<div className="contact-selection-list">{this.renderMemberList()}</div>
|
||||
|
||||
{hasMods ? null : <p>{i18n('noModeratorsToRemove')}</p>}
|
||||
<SessionSpinner loading={removingInProgress} />
|
||||
|
||||
<div className="session-modal__button-group">
|
||||
<SessionButton
|
||||
buttonType={SessionButtonType.Brand}
|
||||
buttonColor={SessionButtonColor.Green}
|
||||
onClick={this.removeThem}
|
||||
disabled={removingInProgress}
|
||||
text={i18n('ok')}
|
||||
/>
|
||||
<SessionButton
|
||||
buttonType={SessionButtonType.Brand}
|
||||
buttonColor={SessionButtonColor.Primary}
|
||||
onClick={this.closeDialog}
|
||||
disabled={removingInProgress}
|
||||
text={i18n('cancel')}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<SessionSpinner loading={firstLoading} />
|
||||
</Flex>
|
||||
</SessionWrapperModal>
|
||||
window?.log?.info(`asked to remove moderators: ${modsToRemove}`);
|
||||
|
||||
try {
|
||||
let res;
|
||||
const convo = getConversationController().get(convoId);
|
||||
|
||||
const roomInfos = convo.toOpenGroupV2();
|
||||
const modsToRemovePubkey = _.compact(modsToRemove.map(m => PubKey.from(m)));
|
||||
res = await Promise.all(
|
||||
modsToRemovePubkey.map(async m => {
|
||||
return ApiV2.removeModerator(m, roomInfos);
|
||||
})
|
||||
);
|
||||
// all moderators are removed means all promise resolved with bool= true
|
||||
res = res.every(r => !!r);
|
||||
|
||||
if (!res) {
|
||||
window?.log?.warn('failed to remove moderators:', res);
|
||||
|
||||
ToastUtils.pushFailedToRemoveFromModerator();
|
||||
return false;
|
||||
} else {
|
||||
window?.log?.info(`${modsToRemove} removed from moderators...`);
|
||||
ToastUtils.pushUserRemovedFromModerators();
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
window?.log?.error('Got error while removing moderator:', e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
window.inboxStore?.dispatch(updateRemoveModeratorsModal(null));
|
||||
}
|
||||
|
||||
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) => (
|
||||
<SessionMemberListItem
|
||||
member={member}
|
||||
key={member.id}
|
||||
index={index}
|
||||
isSelected={selectedContacts.some(m => m === member.id)}
|
||||
onSelect={(selectedMember: ContactType) => {
|
||||
this.onModClicked(selectedMember);
|
||||
}}
|
||||
onUnselect={(selectedMember: ContactType) => {
|
||||
this.onModClicked(selectedMember);
|
||||
}}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
private onModClicked(selected: ContactType) {
|
||||
const updatedContacts = this.state.modList.map(member => {
|
||||
if (member.id === selected.id) {
|
||||
return { ...member, checkmarked: !member.checkmarked };
|
||||
} else {
|
||||
return member;
|
||||
}
|
||||
});
|
||||
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
modList: updatedContacts,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private refreshModList() {
|
||||
let modPubKeys: Array<string> = [];
|
||||
const convo = getConversationController().get(this.props.conversationId);
|
||||
|
||||
modPubKeys = convo.getGroupAdmins() || [];
|
||||
|
||||
const convos = getConversationController().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';
|
||||
export const RemoveModeratorsDialog = (props: Props) => {
|
||||
const { conversationId } = props;
|
||||
const [removingInProgress, setRemovingInProgress] = useState(false);
|
||||
const [modsToRemove, setModsToRemove] = useState<Array<string>>([]);
|
||||
const { i18n } = window;
|
||||
const dispatch = useDispatch();
|
||||
const closeDialog = () => {
|
||||
dispatch(updateRemoveModeratorsModal(null));
|
||||
};
|
||||
|
||||
const removeModsCall = async () => {
|
||||
if (modsToRemove.length) {
|
||||
setRemovingInProgress(true);
|
||||
const removed = await removeMods(conversationId, modsToRemove);
|
||||
setRemovingInProgress(false);
|
||||
if (removed) {
|
||||
closeDialog();
|
||||
}
|
||||
// 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,
|
||||
});
|
||||
let res;
|
||||
const convo = getConversationController().get(this.props.conversationId);
|
||||
|
||||
const roomInfos = convo.toOpenGroupV2();
|
||||
const modsToRemove = _.compact(removedMods.map(m => PubKey.from(m)));
|
||||
res = await Promise.all(
|
||||
modsToRemove.map(async m => {
|
||||
return ApiV2.removeModerator(m, roomInfos);
|
||||
})
|
||||
);
|
||||
// all moderators are removed means all promise resolved with bool= true
|
||||
res = res.every(r => !!r);
|
||||
};
|
||||
|
||||
if (!res) {
|
||||
window?.log?.warn('failed to remove moderators:', res);
|
||||
|
||||
ToastUtils.pushFailedToRemoveFromModerator();
|
||||
} else {
|
||||
window?.log?.info(`${removedMods} removed from moderators...`);
|
||||
ToastUtils.pushUserRemovedFromModerators();
|
||||
this.closeDialog();
|
||||
}
|
||||
} catch (e) {
|
||||
window?.log?.error('Got error while removing moderator:', e);
|
||||
} finally {
|
||||
this.refreshModList();
|
||||
}
|
||||
const convoProps = useConversationPropsById(conversationId);
|
||||
if (!convoProps || !convoProps.isPublic || !convoProps.weAreAdmin) {
|
||||
throw new Error('RemoveModeratorsDialog: convoProps invalid');
|
||||
}
|
||||
}
|
||||
|
||||
const existingMods = convoProps.groupAdmins || [];
|
||||
const hasMods = existingMods.length !== 0;
|
||||
|
||||
const title = `${i18n('removeModerators')}: ${convoProps.name}`;
|
||||
return (
|
||||
<SessionWrapperModal title={title} onClose={closeDialog}>
|
||||
<Flex container={true} flexDirection="column" alignItems="center">
|
||||
{hasMods ? (
|
||||
<div className="contact-selection-list">
|
||||
{existingMods.map(modId => (
|
||||
<MemberListItem
|
||||
key={modId}
|
||||
pubkey={modId}
|
||||
isSelected={modsToRemove.some(m => m === modId)}
|
||||
onSelect={(selectedMember: string) => {
|
||||
const updatedList = [...modsToRemove, selectedMember];
|
||||
setModsToRemove(updatedList);
|
||||
}}
|
||||
onUnselect={(selectedMember: string) => {
|
||||
const updatedList = modsToRemove.filter(m => m !== selectedMember);
|
||||
setModsToRemove(updatedList);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p>{i18n('noModeratorsToRemove')}</p>
|
||||
)}
|
||||
<SessionSpinner loading={removingInProgress} />
|
||||
|
||||
<div className="session-modal__button-group">
|
||||
<SessionButton
|
||||
buttonType={SessionButtonType.Brand}
|
||||
buttonColor={SessionButtonColor.Green}
|
||||
onClick={removeModsCall}
|
||||
disabled={removingInProgress}
|
||||
text={i18n('ok')}
|
||||
/>
|
||||
<SessionButton
|
||||
buttonType={SessionButtonType.Brand}
|
||||
buttonColor={SessionButtonColor.Primary}
|
||||
onClick={closeDialog}
|
||||
disabled={removingInProgress}
|
||||
text={i18n('cancel')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SessionSpinner loading={removingInProgress} />
|
||||
</Flex>
|
||||
</SessionWrapperModal>
|
||||
);
|
||||
};
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue