From 123e68c167d8d3246588513966fbd28e4f20971a Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Fri, 15 Oct 2021 10:19:45 +1100 Subject: [PATCH] WIP: Adding message requests using existing convo list item. --- .../session/LeftPaneMessageSection.tsx | 51 +++++++-- .../session/SessionClosableOverlay.tsx | 106 +++++++++++++++++- ts/models/conversation.ts | 19 ++++ ts/state/ducks/conversations.ts | 1 + ts/test/test-utils/utils/message.ts | 1 + 5 files changed, 164 insertions(+), 14 deletions(-) diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 0aabe6e5d..23a3112eb 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -51,7 +51,7 @@ export type SessionGroupType = SessionComposeToType; interface State { loading: boolean; - overlay: false | SessionComposeToType; + overlay: false | SessionClosableOverlayType; valuePasted: string; } @@ -144,7 +144,7 @@ export class LeftPaneMessageSection extends React.Component { return (
{this.renderHeader()} - {overlay ? this.renderClosableOverlay(overlay) : this.renderConversations()} + {overlay ? this.renderClosableOverlay() : this.renderConversations()}
); } @@ -157,12 +157,18 @@ export class LeftPaneMessageSection extends React.Component { onChange={this.updateSearch} placeholder={window.i18n('searchFor...')} /> +
message requests
{this.renderList()} {this.renderBottomButtons()} ); } + private handleMessageRequestsClick() { + console.warn('handle msg req clicked'); + this.handleToggleOverlay(SessionClosableOverlayType.MessageRequests); + } + public updateSearch(searchTerm: string) { if (!searchTerm) { window.inboxStore?.dispatch(clearSearch()); @@ -201,9 +207,9 @@ export class LeftPaneMessageSection extends React.Component { ); } - private renderClosableOverlay(overlay: SessionComposeToType) { + private renderClosableOverlay() { const { searchTerm, searchResults } = this.props; - const { loading } = this.state; + const { loading, overlay } = this.state; const openGroupElement = ( { /> ); + const messageRequestsElement = ( + { + this.handleToggleOverlay(undefined); + }} + onButtonClick={this.handleMessageButtonClick} + searchTerm={searchTerm} + searchResults={searchResults} + showSpinner={loading} + updateSearch={this.updateSearch} + /> + ); + let overlayElement; switch (overlay) { - case SessionComposeToType.OpenGroup: + case SessionClosableOverlayType.OpenGroup: overlayElement = openGroupElement; break; - case SessionComposeToType.ClosedGroup: + case SessionClosableOverlayType.ClosedGroup: overlayElement = closedGroupElement; break; - default: + case SessionClosableOverlayType.Message: overlayElement = messageElement; + break; + case SessionClosableOverlayType.MessageRequests: + overlayElement = messageRequestsElement; + break; + default: + overlayElement = false; } return overlayElement; @@ -277,7 +304,7 @@ export class LeftPaneMessageSection extends React.Component { buttonType={SessionButtonType.SquareOutline} buttonColor={SessionButtonColor.Green} onClick={() => { - this.handleToggleOverlay(SessionComposeToType.OpenGroup); + this.handleToggleOverlay(SessionClosableOverlayType.OpenGroup); }} /> { buttonType={SessionButtonType.SquareOutline} buttonColor={SessionButtonColor.White} onClick={() => { - this.handleToggleOverlay(SessionComposeToType.ClosedGroup); + this.handleToggleOverlay(SessionClosableOverlayType.ClosedGroup); }} /> ); } - private handleToggleOverlay(conversationType?: SessionComposeToType) { - const overlayState = conversationType || false; + private handleToggleOverlay(overlayType?: SessionClosableOverlayType) { + const overlayState = overlayType || false; this.setState({ overlay: overlayState }); @@ -403,6 +430,6 @@ export class LeftPaneMessageSection extends React.Component { } private handleNewSessionButtonClick() { - this.handleToggleOverlay(SessionComposeToType.Message); + this.handleToggleOverlay(SessionClosableOverlayType.Message); } } diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx index cae8021dd..c643762be 100644 --- a/ts/components/session/SessionClosableOverlay.tsx +++ b/ts/components/session/SessionClosableOverlay.tsx @@ -9,11 +9,18 @@ import { SessionSpinner } from './SessionSpinner'; import { ConversationTypeEnum } from '../../models/conversation'; import { SessionJoinableRooms } from './SessionJoinableDefaultRooms'; import { SpacerLG, SpacerMD } from '../basic/Text'; +import { useSelector } from 'react-redux'; +import { getLeftPaneLists } from '../../state/selectors/conversations'; +import { + ConversationListItemProps, + MemoConversationListItemWithDetails, +} from '../ConversationListItem'; export enum SessionClosableOverlayType { Message = 'message', OpenGroup = 'open-group', ClosedGroup = 'closed-group', + MessageRequests = 'message-requests', } interface Props { @@ -106,6 +113,7 @@ export class SessionClosableOverlay extends React.Component { const isMessageView = overlayMode === SessionClosableOverlayType.Message; const isOpenGroupView = overlayMode === SessionClosableOverlayType.OpenGroup; const isClosedGroupView = overlayMode === SessionClosableOverlayType.ClosedGroup; + const isMessageRequestView = overlayMode === SessionClosableOverlayType.MessageRequests; let title; let buttonText; @@ -133,6 +141,12 @@ export class SessionClosableOverlay extends React.Component { subtitle = window.i18n('createClosedGroupNamePrompt'); placeholder = window.i18n('createClosedGroupPlaceholder'); break; + case SessionClosableOverlayType.MessageRequests: + title = 'Message Requests'; + buttonText = 'requests done'; + subtitle = 'Pending Requests'; + placeholder = 'placeholder'; + break; default: } @@ -172,14 +186,25 @@ export class SessionClosableOverlay extends React.Component { onPressEnter={() => onButtonClick(groupName, selectedMembers)} /> - ) : ( + ) : null} + + {isMessageView ? ( - )} + ) : null} + + {isMessageRequestView ? ( + <> + +
+ + + + ) : null} @@ -266,3 +291,80 @@ export class SessionClosableOverlay extends React.Component { } } } + +const MessageRequestList = () => { + // get all conversations with (accepted / known) + // const convos = useSelector(getConversationLookup); + + const lists = useSelector(getLeftPaneLists); + const conversationx = lists?.conversations as Array; + console.warn({ conversationx }); + + // console.warn({ convos }); + // const allConversations = getConversationController().getConversations(); + // const messageRequests = allConversations.filter(convo => convo.get('isApproved') !== true); + + return ( + <> + {/* {messageRequests.map(convoOfMessage => { */} + {conversationx.map(convoOfMessage => { + return ; + })} + + ); +}; + +// const MessageRequestListItem = (props: { conversation: ConversationModel }) => { +const MessageRequestListItem = (props: { conversation: ConversationListItemProps }) => { + const { conversation } = props; + // const { id: conversationId } = conversation; + + // TODO: add hovering + // TODO: add styling + + /** + * open the conversation selected + */ + // const openConvo = useCallback( + // async (e: React.MouseEvent) => { + // // mousedown is invoked sooner than onClick, but for both right and left click + // if (e.button === 0) { + // await openConversationWithMessages({ conversationKey: conversationId }); + // } + // }, + // [conversationId] + // ); + + // /** + // * show basic highlight animation + // */ + // const handleMouseOver = () => { + // console.warn('hovered'); + // }; + + return ( + //
{ + // e.stopPropagation(); + // e.preventDefault(); + // }} + // // className="message-request__item" + + // // className={classNames( + // // 'module-conversation-list-item', + // // unreadCount && unreadCount > 0 ? 'module-conversation-list-item--has-unread' : null, + // // unreadCount && unreadCount > 0 && mentionedUs + // // ? 'module-conversation-list-item--mentioned-us' + // // : null, + // // isSelected ? 'module-conversation-list-item--is-selected' : null, + // // isBlocked ? 'module-conversation-list-item--is-blocked' : null + // // )} + // > + // {conversation.getName()} + //
+ + + ); +}; diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts index dfc68c9df..3704170a2 100644 --- a/ts/models/conversation.ts +++ b/ts/models/conversation.ts @@ -104,6 +104,7 @@ export interface ConversationAttributes { triggerNotificationsFor: ConversationNotificationSettingType; isTrustedForAttachmentDownload: boolean; isPinned: boolean; + isApproved: boolean; } export interface ConversationAttributesOptionals { @@ -144,6 +145,7 @@ export interface ConversationAttributesOptionals { triggerNotificationsFor?: ConversationNotificationSettingType; isTrustedForAttachmentDownload?: boolean; isPinned: boolean; + isApproved: boolean; } /** @@ -433,6 +435,7 @@ export class ConversationModel extends Backbone.Model { const isBlocked = this.isBlocked(); const subscriberCount = this.get('subscriberCount'); const isPinned = this.isPinned(); + const isApproved = this.isApproved(); const hasNickname = !!this.getNickname(); const isKickedFromGroup = !!this.get('isKickedFromGroup'); const left = !!this.get('left'); @@ -508,6 +511,9 @@ export class ConversationModel extends Backbone.Model { if (isPinned) { toRet.isPinned = isPinned; } + if (isApproved) { + toRet.isApproved = isApproved; + } if (subscriberCount) { toRet.subscriberCount = subscriberCount; } @@ -1375,6 +1381,15 @@ export class ConversationModel extends Backbone.Model { } } + public async setIsApproved(value: boolean) { + if (value !== this.get('isApproved')) { + this.set({ + isApproved: true, + }); + await this.commit(); + } + } + public async setGroupName(name: string) { const profileName = this.get('name'); if (profileName !== name) { @@ -1482,6 +1497,10 @@ export class ConversationModel extends Backbone.Model { return this.get('isPinned'); } + public isApproved() { + return this.get('isApproved'); + } + public getTitle() { if (this.isPrivate()) { const profileName = this.getProfileName(); diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 789d5974e..0de58628c 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -243,6 +243,7 @@ export interface ReduxConversationType { currentNotificationSetting?: ConversationNotificationSettingType; isPinned?: boolean; + isApproved?: boolean; } export interface NotificationForConvoOption { diff --git a/ts/test/test-utils/utils/message.ts b/ts/test/test-utils/utils/message.ts index b45ac39ef..de5d4c7a6 100644 --- a/ts/test/test-utils/utils/message.ts +++ b/ts/test/test-utils/utils/message.ts @@ -95,6 +95,7 @@ export class MockConversation { triggerNotificationsFor: 'all', isTrustedForAttachmentDownload: false, isPinned: false, + isApproved: false, }; }