user details modal refactor functioning.

This commit is contained in:
Warrick Corfe-Tan 2021-06-16 15:04:15 +10:00
parent e8d06e86b5
commit 7c82ccb3e9
8 changed files with 83 additions and 44 deletions

View File

@ -139,10 +139,10 @@
<!-- DIALOGS-->
<!-- <script type='text/javascript' src='js/views/update_group_dialog_view.js'></script> -->
<script type='text/javascript' src='js/views/invite_contacts_dialog_view.js'></script>
<script type='text/javascript' src='js/views/admin_leave_closed_group_dialog_view.js'></script>
<!-- <script type='text/javascript' src='js/views/invite_contacts_dialog_view.js'></script> -->
<!-- <script type='text/javascript' src='js/views/admin_leave_closed_group_dialog_view.js'></script> -->
<script type='text/javascript' src='js/views/user_details_dialog_view.js'></script>
<!-- <script type='text/javascript' src='js/views/user_details_dialog_view.js'></script> -->
<script type='text/javascript' src='js/views/session_id_reset_view.js'></script>
<!-- CRYPTO -->

View File

@ -448,11 +448,11 @@
// }
// });
Whisper.events.on('leaveClosedGroup', async groupConvo => {
if (appView) {
appView.showLeaveGroupDialog(groupConvo);
}
});
// Whisper.events.on('leaveClosedGroup', async groupConvo => {
// if (appView) {
// appView.showLeaveGroupDialog(groupConvo);
// }
// });
Whisper.Notifications.on('click', (id, messageId) => {
window.showWindow();
@ -471,28 +471,28 @@
});
});
Whisper.events.on('onShowUserDetails', async ({ userPubKey }) => {
const conversation = await window
.getConversationController()
.getOrCreateAndWait(userPubKey, 'private');
// Whisper.events.on('onShowUserDetails', async ({ userPubKey }) => {
// const conversation = await window
// .getConversationController()
// .getOrCreateAndWait(userPubKey, 'private');
const avatarPath = conversation.getAvatarPath();
const profile = conversation.getLokiProfile();
const displayName = profile && profile.displayName;
// const avatarPath = conversation.getAvatarPath();
// const profile = conversation.getLokiProfile();
// const displayName = profile && profile.displayName;
if (appView) {
appView.showUserDetailsDialog({
profileName: displayName,
pubkey: userPubKey,
avatarPath,
onStartConversation: () => {
window.inboxStore.dispatch(
window.actionsCreators.openConversationExternal(conversation.id)
);
},
});
}
});
// if (appView) {
// appView.showUserDetailsDialog({
// profileName: displayName,
// pubkey: userPubKey,
// avatarPath,
// onStartConversation: () => {
// window.inboxStore.dispatch(
// window.actionsCreators.openConversationExternal(conversation.id)
// );
// },
// });
// }
// });
Whisper.events.on('password-updated', () => {

View File

@ -117,12 +117,12 @@
this.el.prepend(resetSessionIDDialog.el);
},
showUserDetailsDialog(options) {
// eslint-disable-next-line no-param-reassign
options.theme = this.getThemeObject();
const dialog = new Whisper.UserDetailsDialogView(options);
this.el.prepend(dialog.el);
},
// showUserDetailsDialog(options) {
// // eslint-disable-next-line no-param-reassign
// options.theme = this.getThemeObject();
// const dialog = new Whisper.UserDetailsDialogView(options);
// this.el.prepend(dialog.el);
// },
getThemeObject() {
const themeSettings = storage.get('theme-setting') || 'light';
const theme = themeSettings === 'light' ? window.lightTheme : window.darkTheme;

View File

@ -5,6 +5,10 @@ import { SessionModal } from './session/SessionModal';
import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
import { SessionIdEditable } from './session/SessionIdEditable';
import { DefaultTheme } from 'styled-components';
import { ConversationController } from '../session/conversations';
import { ConversationTypeEnum } from '../models/conversation';
import { Session } from 'electron';
import { SessionWrapperModal } from './session/SessionWrapperModal';
interface Props {
i18n: any;
@ -12,7 +16,7 @@ interface Props {
avatarPath: string;
pubkey: string;
onClose: any;
onStartConversation: any;
// onStartConversation: any;
theme: DefaultTheme;
}
@ -35,7 +39,7 @@ export class UserDetailsDialog extends React.Component<Props, State> {
const { i18n } = this.props;
return (
<SessionModal
<SessionWrapperModal
title={this.props.profileName}
onClose={this.closeDialog}
theme={this.props.theme}
@ -43,6 +47,8 @@ export class UserDetailsDialog extends React.Component<Props, State> {
<div className="avatar-center">
<div className="avatar-center-inner">{this.renderAvatar()}</div>
</div>
<div className="spacer-md"></div>
<SessionIdEditable editable={false} text={this.props.pubkey} />
<div className="session-modal__button-group__center">
@ -53,7 +59,7 @@ export class UserDetailsDialog extends React.Component<Props, State> {
onClick={this.onClickStartConversation}
/>
</div>
</SessionModal>
</SessionWrapperModal>
);
}
@ -95,8 +101,14 @@ export class UserDetailsDialog extends React.Component<Props, State> {
this.props.onClose();
}
private onClickStartConversation() {
this.props.onStartConversation();
private async onClickStartConversation() {
// this.props.onStartConversation();
const conversation = await ConversationController.getInstance().getOrCreateAndWait(this.props.pubkey, ConversationTypeEnum.PRIVATE);
window.inboxStore?.dispatch(
window.actionsCreators.openConversationExternal(conversation.id)
);
this.closeDialog();
}
}

View File

@ -71,10 +71,10 @@ import { useTheme, withTheme } from 'styled-components';
import { MessageMetadata } from './message/MessageMetadata';
import { PubKey } from '../../session/types';
import { ToastUtils, UserUtils } from '../../session/utils';
import { ConversationController } from '../../session/conversations';
import { MessageRegularProps } from '../../models/messageType';
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
import { addSenderAsModerator, removeSenderFromModerator } from '../../interactions/message';
import { UserDetailsDialog } from '../UserDetailsDialog';
// Same as MIN_WIDTH in ImageGrid.tsx
const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
@ -467,8 +467,8 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
conversationType,
direction,
isPublic,
onShowUserDetails,
firstMessageOfSeries,
updateSessionConversationModal
} = this.props;
if (collapseMetadata || conversationType !== 'group' || direction === 'outgoing') {
@ -480,15 +480,24 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
return <div style={{ marginInlineEnd: '60px' }} />;
}
const onAvatarClick = () => {
updateSessionConversationModal(<UserDetailsDialog
i18n={window.i18n}
profileName={userName}
avatarPath={authorAvatarPath || ''}
pubkey={authorPhoneNumber}
onClose={() => updateSessionConversationModal(null)}
theme={this.props.theme}
/>)
}
return (
<div className="module-message__author-avatar">
<Avatar
avatarPath={authorAvatarPath}
name={userName}
size={AvatarSize.S}
onAvatarClick={() => {
onShowUserDetails(authorPhoneNumber);
}}
onAvatarClick={onAvatarClick}
pubkey={authorPhoneNumber}
/>
{isPublic && isAdmin && (

View File

@ -451,9 +451,22 @@ export class SessionConversation extends React.Component<Props, State> {
onDownloadAttachment: this.saveAttachment,
messageContainerRef: this.messageContainerRef,
onDeleteSelectedMessages: this.deleteSelectedMessages,
updateSessionConversationModal: this.updateSessionConversationModal
};
}
/**
* Setting this to a JSX element that will be rendered if non-null.
* @param update Value to set the modal state to
*/
private updateSessionConversationModal (update: JSX.Element | null) {
this.setState({
...this.state,
modal: update
})
}
public getRightPanelProps() {
const { selectedConversationKey } = this.props;
const conversation = ConversationController.getInstance().getOrThrow(selectedConversationKey);

View File

@ -47,6 +47,7 @@ interface Props {
onClickAttachment: (attachment: any, message: any) => void;
onDownloadAttachment: ({ attachment }: { attachment: any }) => void;
onDeleteSelectedMessages: () => Promise<void>;
updateSessionConversationModal: (modal: JSX.Element | null) => any;
}
export class SessionMessagesList extends React.Component<Props, State> {
@ -320,6 +321,8 @@ export class SessionMessagesList extends React.Component<Props, State> {
};
}
messageProps.updateSessionConversationModal = this.props.updateSessionConversationModal
return <Message {...messageProps} key={messageProps.id} />;
}

View File

@ -228,6 +228,8 @@ export interface MessageRegularProps {
onCopyPubKey?: () => void;
onBanUser?: () => void;
onUnbanUser?: () => void;
// setModal?: any;
updateSessionConversationModal: (modal: JSX.Element | null) => any;
onShowDetail: () => void;
onShowUserDetails: (userPubKey: string) => void;