From ea4dc050092353dee793f4f95644c9eab6315501 Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 19 Feb 2020 12:05:48 +1100 Subject: [PATCH] Upgrade typescript, finding messaages --- bower.json | 4 +- js/background.js | 7 +- js/conversation_controller.js | 19 + js/models/conversations.js | 1 + js/modules/signal.js | 4 +- js/views/session_conversation_view.js | 46 ++- package.json | 6 +- stylesheets/_session_conversation.scss | 135 ++++--- .../session/LeftPaneMessageSection.tsx | 5 +- .../session/SessionChannelSettings.tsx | 2 +- .../session/SessionCompositionBox.tsx | 85 +++++ ts/components/session/SessionConversation.tsx | 328 ++++++++++++------ ts/components/session/SessionEmojiPanel.tsx | 29 ++ .../session/SessionGroupSettings.tsx | 2 +- ts/components/session/SessionProgress.tsx | 106 ++++++ ts/global.d.ts | 7 +- 16 files changed, 582 insertions(+), 204 deletions(-) create mode 100644 ts/components/session/SessionCompositionBox.tsx create mode 100644 ts/components/session/SessionEmojiPanel.tsx create mode 100644 ts/components/session/SessionProgress.tsx diff --git a/bower.json b/bower.json index 04a267455..8b2fbba06 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { - "name": "loki-messenger", + "name": "session-desktop", "version": "0.0.0", - "homepage": "https://github.com/loki-project/loki-messenger", + "homepage": "https://github.com/loki-project/session-desktop", "license": "GPLV3", "private": true, "dependencies": { diff --git a/js/background.js b/js/background.js index 18f057940..f5e55bea3 100644 --- a/js/background.js +++ b/js/background.js @@ -988,11 +988,16 @@ return toastID; }; - window.renderConversationView = () => { + window.renderConversationView = conversationKey => { const sessionConversation = new Whisper.SessionConversationView({ el: $('#main-view'), + conversationKey, }); sessionConversation.render(); + + console.log(conversationKey); + console.log(conversationKey); + console.log(conversationKey); }; window.getFriendsFromContacts = contacts => { diff --git a/js/conversation_controller.js b/js/conversation_controller.js index 5e102420d..c661f4ed6 100644 --- a/js/conversation_controller.js +++ b/js/conversation_controller.js @@ -59,6 +59,25 @@ window.getInboxCollection = () => inboxCollection; window.getConversations = () => conversations; + window.getConversationByKey = key => { + // Key is pubkey or public chat name + const conversation = conversations.models.filter(conv => conv.id === key)[0] || null; + + return conversation; + } + window.getMessagesByKey = async key => { + const conversation = window.getConversationByKey(key); + + // Grab messages and push to conv object. + await conversation.fetchMessages(); + + const messagesModel = conversation.messageCollection.models; + const messages = messagesModel.map(conv => conv.attributes); + + return messages; + } + + window.ConversationController = { get(id) { if (!this._initialFetchComplete) { diff --git a/js/models/conversations.js b/js/models/conversations.js index 7471c5798..d1d655f9f 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -131,6 +131,7 @@ this.messageCollection.on('change:errors', this.handleMessageError, this); this.messageCollection.on('send-error', this.onMessageError, this); + this.throttledBumpTyping = _.throttle(this.bumpTyping, 300); const debouncedUpdateLastMessage = _.debounce( this.updateLastMessage.bind(this), diff --git a/js/modules/signal.js b/js/modules/signal.js index cee645009..435b943c3 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -58,7 +58,9 @@ const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog'); const { DevicePairingDialog, } = require('../../ts/components/DevicePairingDialog'); -const { SessionConversation } = require('../../ts/components/session/SessionConversation'); +const { + SessionConversation, +} = require('../../ts/components/session/SessionConversation'); const { SettingsView, } = require('../../ts/components/session/settings/SessionSettings'); diff --git a/js/views/session_conversation_view.js b/js/views/session_conversation_view.js index 423dd28ce..4d3d4807b 100644 --- a/js/views/session_conversation_view.js +++ b/js/views/session_conversation_view.js @@ -2,27 +2,25 @@ // eslint-disable-next-line func-names (function() { - 'use strict'; - - window.Whisper = window.Whisper || {}; - - Whisper.SessionConversationView = Whisper.View.extend({ - initialize(options) { - this.props = { - ...options, - }; - }, - - render() { - this.conversationView = new Whisper.ReactWrapperView({ - className: 'session-conversation-wrapper', - Component: window.Signal.Components.SessionConversation, - props: this.props, - }); - - this.$el.prepend(this.conversationView.el); - }, - }); - })(); - - \ No newline at end of file + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.SessionConversationView = Whisper.View.extend({ + initialize(options) { + this.props = { + ...options, + }; + }, + + render() { + this.conversationView = new Whisper.ReactWrapperView({ + className: 'session-conversation-wrapper', + Component: window.Signal.Components.SessionConversation, + props: this.props, + }); + + this.$el.prepend(this.conversationView.el); + }, + }); +})(); diff --git a/package.json b/package.json index 3e3bb8fe1..2db553450 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "session-messenger-desktop", + "name": "session-desktop", "productName": "Session", - "description": "Private messaging from your desktop", + "description": "Send messages not metadata", "repository": "https://github.com/loki-project/loki-messenger.git", "version": "1.0.1", "license": "GPL-3.0", @@ -199,7 +199,7 @@ "tslint": "5.13.0", "tslint-microsoft-contrib": "6.0.0", "tslint-react": "3.6.0", - "typescript": "3.3.3333", + "typescript": "^3.7", "webpack": "4.4.1" }, "engines": { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 615ae9032..56726cb4b 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -1,69 +1,102 @@ $composition-container-height: 60px; .conversation-item { - display: flex; - flex-grow: 1; - flex-direction: column; - height: 100%; + display: flex; + flex-grow: 1; + flex-direction: column; + height: 100%; } .session-conversation-wrapper { - position: absolute; - width: 100%; - height: 100%; - background-color: $session-shade-2; + position: absolute; + width: 100%; + height: 100%; + background-color: $session-shade-2; } -.messages-container{ - display: flex; - flex-grow: 1; - flex-direction: column; +.messages-container { + display: flex; + flex-grow: 1; + flex-direction: column; + padding: $session-margin-lg; } .composition-container { + display: flex; + justify-content: center; + align-items: center; + background-color: $session-shade-4; + padding: 0px $session-margin-md; + min-height: $composition-container-height; + + & > .session-icon-button { + margin-right: $session-margin-sm; + } + .session-icon-button { + opacity: 0.8; + + .send { + background-color: $session-shade-14; + padding: $session-margin-xs; + border-radius: 50%; + height: 30px; + width: 30px; + } + } + + .send-message-input { display: flex; - justify-content: center; - align-items: center; - background-color: $session-shade-4; - padding: 0px $session-margin-md; + flex-grow: 1; min-height: $composition-container-height; - - & > .session-icon-button { - margin-right: $session-margin-sm; - } - .session-icon-button { - opacity: 0.8; - - .send { - background-color: $session-shade-14; - padding: $session-margin-xs; - border-radius: 50%; - height: 30px; - width: 30px; - } - } - - .send-message-input { + padding: $composition-container-height / 3 0px; + + textarea { + font-family: 'SF Pro Text'; + min-height: $composition-container-height / 3; + max-height: 2 * $composition-container-height; + margin-right: $session-margin-md; + color: $session-color-white; + resize: none; display: flex; flex-grow: 1; - min-height: $composition-container-height - - textarea { - min-height: $composition-container-height / 3; - max-height: 3 * $composition-container-height; - margin-right: $session-margin-md; - color: $session-color-white; - resize: none; - display: flex; - flex-grow: 1; - background: transparent; - outline: none; - border: none; - font-size: $session-font-md; - line-height: $session-font-h2; - padding: $composition-container-height / 3 0px; - - } + background: transparent; + outline: none; + border: none; + font-size: $session-font-md; + line-height: $session-font-h2; + letter-spacing: 0.5px; } + } +} + + + +.session-emoji-panel { + position: absolute; + bottom: 68px; + right: 0px; + min-height: 400px; + min-width: 400px; + background-color: $session-shade-4; + border: 1px solid $session-shade-6; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + padding: $session-margin-lg; } + +.session-progress { + position: relative; + background-color: rgba(30, 30, 30, 0.5); + + &__progress { + transition: opacity 0.15s; + position: absolute; + left: 0px; + font-size: 0px; + height: 3px; + + background-color: $session-color-green; + + } +} \ No newline at end of file diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index a1cd62359..2032d3986 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -109,7 +109,7 @@ export class LeftPaneMessageSection extends React.Component { key, style, }: RowRendererParamsType): JSX.Element => { - const { openConversationInternal } = this.props; + // const { openConversationInternal } = this.props; const conversations = this.getCurrentConversations(); @@ -118,13 +118,14 @@ export class LeftPaneMessageSection extends React.Component { } const conversation = conversations[index]; + const conversationKey = conversation.id; return ( window.renderConversationView(conversationKey)} i18n={window.i18n} /> ); diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx index 7b01ce114..6134f506f 100644 --- a/ts/components/session/SessionChannelSettings.tsx +++ b/ts/components/session/SessionChannelSettings.tsx @@ -234,7 +234,7 @@ export class SessionChannelSettings extends React.Component {
{window.i18n('members', memberCount)}
-
+
)} { + private textarea: React.RefObject; + + constructor(props: any) { + super(props); + + this.state = { + message: '', + showEmojiPanel: false, + }; + + this.textarea = React.createRef(); + this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this); + } + + render() { + const { placeholder } = this.props; + const { showEmojiPanel } = this.state; + + return ( +
+ + + +
+ +
+ + +
+ +
+ + { showEmojiPanel && + ( ) + } + +
+ ); + } + + public toggleEmojiPanel() { + this.setState({ + showEmojiPanel: !this.state.showEmojiPanel, + }) + } +} diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx index 7caaf1144..7fcaf6bf8 100644 --- a/ts/components/session/SessionConversation.tsx +++ b/ts/components/session/SessionConversation.tsx @@ -1,120 +1,218 @@ import React from 'react'; -import TextareaAutosize from 'react-autosize-textarea'; - import { ConversationHeader } from '../conversation/ConversationHeader'; -import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; +import { SessionCompositionBox } from './SessionCompositionBox'; +import { SessionProgress } from './SessionProgress' + +import { Message } from '../conversation/Message'; + + + +interface Props { + getHeaderProps: any; + conversationKey: any; +} + +interface State { + sendingProgess: number; + prevSendingProgess: number; + loadingMessages: boolean; + messages: any; +} + +export class SessionConversation extends React.Component { + constructor(props: any) { + super(props); + this.state = { + sendingProgess: 0, + prevSendingProgess: 0, + loadingMessages: false, + messages: {}, + }; + } -interface Props{ - getHeaderProps: any; + async componentWillMount() { + const { conversationKey } = this.props; + + this.setState({ + messages: await window.getMessagesByKey(conversationKey) + }) -}; - -interface State{}; - - -export class SessionConversation extends React.Component { - constructor(props: any) { - super(props); - this.state = {}; - } - - render() { - // const headerProps = this.props.getHeaderProps; - - // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL - // SessionConversationStack is created - const conversation = window.getConversations().models[0]; - - return ( -
- -
- {this.renderHeader(conversation)} -
- -
- THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW -
- -
- - - -
- -
- - -
- -
-
-
- ) - } - - renderHeader(conversation: any) { - return ( - null} - onDeleteMessages={() => null} - onDeleteContact={() => null} - onResetSession={() => null} - onCloseOverlay={() => null} - onDeleteSelectedMessages={() => null} - onArchive={() => null} - onMoveToInbox={() => null} - onShowSafetyNumber={() => null} - onShowAllMedia={() => null} - onShowGroupMembers={() => null} - onGoBack={() => null} - onBlockUser={() => null} - onUnblockUser={() => null} - onClearNickname={() => null} - onChangeNickname={() => null} - onCopyPublicKey={() => null} - onLeaveGroup={() => null} - onAddModerators={() => null} - onRemoveModerators={() => null} - onInviteFriends={() => null} - /> - ); - } -} \ No newline at end of file + } + + render() { + // const headerProps = this.props.getHeaderProps; + const { conversationKey } = this.props; + + // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL + // SessionConversationStack is created + + // Get conversation by Key (NOT cid) + const conversation = window.getConversationByKey(conversationKey); + + console.log(`Conversation key: `, conversationKey); + + return ( +
+
+ {this.renderHeader(conversation)} +
+ + + + +
+ {this.renderMessages(conversationKey)} + +
+ + null} + /> +
+ ); + } + + public renderMessages(conversationKey: string ) { + const { messages } = this.state; + + // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE + const messagesLength = messages.length; + + console.log(`Messages`, messages); + + let messageList = []; + + messages?.keys.map(key => { + const message = messages[key]; + return (<>THIS IS A MESSAGE) + }); + console.log(messages); + + return messages; + + // for(let i = messagesLength - 1; i > 0; i--){ + // messageList.push({ + // isDeletable: true, + // text: 'fdgdfg', + // direction: 'incoming', + // timestamp: '1581565995228', + // i18n: window.i18n, + // authorPhoneNumber: messages[i].source, + // conversationType: 'direct', + // previews: [], + // isExpired: false, + // convoId: messages[i].conversationId, + // selected: false, + // multiSelectMode: false, + // onSelectMessage: () => null, + // onSelectMessageUnchecked: () => null, + // onShowDetail : () => null, + // onShowUserDetails: () => null, + // }); + // } + + // console.log(`[vince] MessageList: `, messageList); + + // return messages && ( + // null} + // onSelectMessageUnchecked = {() => null} + // onShowDetail = {() => null} + // onShowUserDetails = {() => null} + // /> + // ) + + // return ( + // <> + // { + // messageList.map(message => { + // return ( + // + // )} + // ); + // } + // + // ); + } + + public renderHeader(conversation: any) { + return ( + null} + onDeleteMessages={() => null} + onDeleteContact={() => null} + onResetSession={() => null} + onCloseOverlay={() => null} + onDeleteSelectedMessages={() => null} + onArchive={() => null} + onMoveToInbox={() => null} + onShowSafetyNumber={() => null} + onShowAllMedia={() => null} + onShowGroupMembers={() => null} + onGoBack={() => null} + onBlockUser={() => null} + onUnblockUser={() => null} + onClearNickname={() => null} + onChangeNickname={() => null} + onCopyPublicKey={() => null} + onLeaveGroup={() => null} + onAddModerators={() => null} + onRemoveModerators={() => null} + onInviteFriends={() => null} + /> + ); + } +} diff --git a/ts/components/session/SessionEmojiPanel.tsx b/ts/components/session/SessionEmojiPanel.tsx new file mode 100644 index 000000000..f42ec6c1b --- /dev/null +++ b/ts/components/session/SessionEmojiPanel.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + + +interface Props {} + +interface State { + // FIXME Use Emoji-Mart categories + category: null +} + +export class SessionEmojiPanel extends React.Component { + + constructor(props: any) { + super(props); + + this.state = { + category: null, + }; + } + + render() { + + return ( +
+ THIS IS EMOJI STUFF +
+ ); + } +} diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx index b81cac542..5882e05b1 100644 --- a/ts/components/session/SessionGroupSettings.tsx +++ b/ts/components/session/SessionGroupSettings.tsx @@ -238,7 +238,7 @@ export class SessionGroupSettings extends React.Component {
{window.i18n('members', memberCount)}
-
+
)} { + public static defaultProps = { + fadeOnComplete: true, + }; + + constructor(props: any) { + super(props); + + const { visible, value, prevValue } = this.props; + + this.state = { + visible, + startFade: false, + value: prevValue || value, + }; + } + + public componentWillMount() { + setTimeout(() => { + this.setState({ + value: this.props.value, + }); + }, 20); + } + + public render() { + const { startFade, value } = this.state; + const { prevValue } = this.props; + + // Duration will be the decimal (in seconds) of + // the percentage differnce, else 0.25s; + // Minimum shift duration of 0.25s; + const shiftDuration = this.getShiftDuration(this.props.value, prevValue); + + // 1. Width depends on progress. + // 2. Opacity is the inverse of fade. + // 3. Transition duration scales with the + // distance it needs to travel + const style = { + width: `${this.state.value}%`, + opacity: `${Number(!startFade)}`, + transition: `width ${shiftDuration.toFixed(2)}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`, + }; + + if (value >= 100) { + this.onComplete(); + } + + return ( +
+
+   +
+
+ ); + } + + public onComplete() { + const { fadeOnComplete } = this.props; + + // Fade + if ( fadeOnComplete ) { + this.setState({ + startFade: true, + }); + } + + } + + private getShiftDuration(value: number, prevValue?: number) { + // Generates a shift duration which is based upon the distance requred to travel. + // Follows the curve of y = (1-c)*sqrt(x) + c + // Input values are between 0 and 100. + // Max time = 1.0s. + + const minTime = 0.25; + if (!prevValue) { + return minTime; + } + + const distance = Math.abs(value - prevValue) / 100; + return (1 - minTime) * Math.sqrt(distance) + minTime; + } +} diff --git a/ts/global.d.ts b/ts/global.d.ts index 059c471cb..bf6aade1d 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -2,18 +2,19 @@ interface Window { CONSTANTS: any; versionInfo: any; - renderConversationView: any; - - Events: any; Lodash: any; deleteAllData: any; clearLocalData: any; + getAccountManager: any; getConversations: any; + getConversationByKey: any; + getMessagesByKey: any; getFriendsFromContacts: any; + mnemonic: any; clipboard: any; attemptConnection: any;