merge ZbayLite into master 2.2.7v2

src/main/websockets/client.js

@@ -29,6 +29,7 @@ export const connect = address =>
         console.log(err)
       })
       socket.on('open', async function (a) {
+        console.log('opened websocket client connection')
         const privKey = identity.signerPrivKey
         const message = messages.createMessage({
           messageData: {

src/renderer/components/widgets/channels/ChannelInput/ChannelInput.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useRef } from 'react'
 import PropTypes from 'prop-types'
 import * as R from 'ramda'
 import classNames from 'classnames'
@@ -148,7 +148,7 @@ export const ChannelInput = ({
   classes,
   onChange,
   onKeyPress,
-  message,
+  message: initialMessage,
   inputState,
   infoClass,
   setInfoClass,
@@ -168,15 +168,17 @@ export const ChannelInput = ({
   contactUsername,
   isDM
 }) => {
+  const messageRef = React.useRef()
   const refSelected = React.useRef()
   const refMentionsToSelect = React.useRef()
   const inputRef = React.createRef()
   const [focused, setFocused] = React.useState(false)
   const [selected, setSelected] = React.useState(0)
   const [emojiHovered, setEmojiHovered] = React.useState(false)
   const [openEmoji, setOpenEmoji] = React.useState(false)
-  const [htmlMessage, setHtmlMessage] = React.useState(message)
-  const [typingIndicator, setTypingIndicator] = React.useState(false)
+  const [htmlMessage, setHtmlMessage] = React.useState(initialMessage)
+  const [message, setMessage] = React.useState(initialMessage)
+  const typingIndicator = !!message
 
   const showTypingIndicator = isDM && isContactTyping && isContactConnected
 
@@ -206,20 +208,21 @@ export const ChannelInput = ({
     }
   }, [message])
   React.useEffect(() => {
-    setHtmlMessage(message)
-  }, [id]),
-      React.useEffect(() => {
-          if (htmlMessage) {
-            setTypingIndicator(true)
-          } else {
-            setTypingIndicator(false)
-          }
-      }, [htmlMessage])
+    setMessage(initialMessage)
+    setHtmlMessage(initialMessage)
+    return () => {
+      onChange(messageRef.current)
+    }
+  }, [id])
+  React.useEffect(() => {
+    messageRef.current = message
+  }, [message])
+
   React.useEffect(() => {
-    if  (!isContactConnected) return
+    if (!isContactConnected) return
     sendTypingIndicator(typingIndicator)
   }, [typingIndicator])
-  
+
   const findMentions = text => {
     const splitedMsg = text.replace(/ /g, String.fromCharCode(160)).split(String.fromCharCode(160))
     const lastMention = splitedMsg[splitedMsg.length - 1].startsWith('@')
@@ -266,6 +269,23 @@ export const ChannelInput = ({
     }
     return splitedMsg.join(String.fromCharCode(160))
   }
+
+  const t2 = sanitizeHtml(htmlMessage)
+  const sanitizedHtml = findMentions(t2)
+  const onChangeCb = useCallback(
+    e => {
+      if (inputState === INPUT_STATE.AVAILABLE) {
+        setMessage(e.nativeEvent.target.innerText)
+        if (!e.nativeEvent.target.innerText) {
+          setHtmlMessage('')
+        } else {
+          setHtmlMessage(e.target.value)
+        }
+      }
+      setAnchorEl(e.currentTarget.lastElementChild)
+    },
+    [setAnchorEl, onChange, setHtmlMessage]
+  )
   return (
     <Grid
       container
@@ -295,7 +315,7 @@ export const ChannelInput = ({
               currentMsg[currentMsg.length - 1] =
                 '@' + refMentionsToSelect.current[refSelected.current].nickname
               currentMsg.push(String.fromCharCode(160))
-              onChange(currentMsg.join(String.fromCharCode(160)))
+              setMessage(currentMsg.join(String.fromCharCode(160)))
               setHtmlMessage(currentMsg.join(String.fromCharCode(160)))
               inputRef.current.el.current.focus()
             }}
@@ -351,18 +371,8 @@ export const ChannelInput = ({
                     setFocused(true)
                   }
                 }}
-                html={findMentions(sanitizeHtml(htmlMessage))}
-                onChange={e => {
-                  if (inputState === INPUT_STATE.AVAILABLE) {
-                    onChange(e.nativeEvent.target.innerText)
-                    if (!e.nativeEvent.target.innerText) {
-                      setHtmlMessage('')
-                    } else {
-                      setHtmlMessage(e.target.value)
-                    }
-                  }
-                  setAnchorEl(e.currentTarget.lastElementChild)
-                }}
+                html={sanitizedHtml}
+                onChange={onChangeCb}
                 onKeyDown={e => {
                   if (refMentionsToSelect.current.length) {
                     if (e.nativeEvent.keyCode === 40) {
@@ -398,7 +408,10 @@ export const ChannelInput = ({
                     e.nativeEvent.keyCode === 13 &&
                     e.target.innerText !== ''
                   ) {
+                    onChange(e.target.innerText)
                     onKeyPress(e)
+                    setMessage('')
+                    setHtmlMessage('')
                     scrollToBottom()
                   } else {
                     if (e.nativeEvent.keyCode === 13) {
@@ -438,7 +451,7 @@ export const ChannelInput = ({
                     <Picker
                       onEmojiClick={(e, emoji) => {
                         setHtmlMessage(message + emoji.emoji)
-                        onChange(message + emoji.emoji)
+                        setMessage(message + emoji.emoji)
                         setOpenEmoji(false)
                       }}
                     />
@@ -468,7 +481,10 @@ export const ChannelInput = ({
           </Grid>
         </Grid>
       )}
-      <TypingIndicator contactUsername={contactUsername} showTypingIndicator={showTypingIndicator} />
+      <TypingIndicator
+        contactUsername={contactUsername}
+        showTypingIndicator={showTypingIndicator}
+      />
     </Grid>
   )
 }

src/renderer/components/widgets/channels/ChannelMessages.tsx

@@ -179,89 +179,84 @@ export const ChannelMessages: React.FC<IChannelMessagesProps> = ({
       ref={scrollbarRef}
       autoHideTimeout={500}
       renderView={renderView}
-      onScrollFrame={onScrollFrame}
-    >
+      onScrollFrame={onScrollFrame}>
       <List
         disablePadding
         ref={msgRef}
-        id="messages-scroll"
+        id='messages-scroll'
         className={classes.list}
-        style={{ marginTop: offset }}
-      >
-        {isOwner && <WelcomeMessage message={welcomeMessages["main"]} />}
-
+        style={{ marginTop: offset }}>
+        {isOwner && <WelcomeMessage message={welcomeMessages['main']} />}
+
         {!isRescanned && !isDM && <RescanMessage />}
         {/* {isOffer && !showLoader && (
           <WelcomeMessage message={welcomeMessages['offer'](tag, username)} />
         )} */}
         {Object.keys(groupedMessages || []).map((key, i) => {
-          const messagesArray = groupedMessages[key];
-          const today = DateTime.utc();
-          const groupName = DateTime.fromSeconds(parseInt(key)).toFormat(
-            "cccc, LLL d"
-          );
-          const displayTitle = DateTime.fromSeconds(parseInt(key)).hasSame(
-            today,
-            "day"
-          )
-            ? "Today"
-            : groupName;
+          const messagesArray = groupedMessages[key]
+          const today = DateTime.utc()
+          const groupName = DateTime.fromSeconds(parseInt(key)).toFormat('cccc, LLL d')
+          const displayTitle = DateTime.fromSeconds(parseInt(key)).hasSame(today, 'day')
+            ? 'Today'
+            : groupName
           return (
             <>
               <MessagesDivider title={displayTitle} />
-              {messagesArray.map((msg) => {
-                const MessageComponent = typeToMessageComponent[msg.type];
+              {messagesArray.map(msg => {
+                const MessageComponent = typeToMessageComponent[msg.type]
                 if (!msg.type) {
                   if (msg.keys) {
                     return (
                       <ChannelRegisteredMessage
                         message={msg}
-                        address={
-                          users[msg.owner] ? users[msg.owner].address : ""
-                        }
+                        address={users[msg.owner] ? users[msg.owner].address : ''}
                         username={
                           users[msg.owner]
                             ? users[msg.owner].nickname
                             : `anon${msg.owner.substring(0, 16)}`
                         }
                         onChannelClick={() => {
-                          onLinkedChannel(publicChannels[msg.name]);
+                          onLinkedChannel(publicChannels[msg.name])
                         }}
                       />
-                    );
+                    )
                   } else {
-                    return <UserRegisteredMessage message={msg} />;
+                    return <UserRegisteredMessage message={msg} />
                   }
                 }
-                return (
-                  <MessageComponent
-                    key={msg.id}
-                    message={msg}
-                    contactId={contactId}
-                  />
-                );
+                return <MessageComponent key={msg.id} message={msg} contactId={contactId} />
               })}
             </>
-          );
+          )
         })}
-        { isDM && ( <Grid container className={classes.root}>
-          <Grid item xs className={classes.item}>
-          <Typography variant='caption' className={classes.info}>
-            {isConnected ? <span>Connected to <span className={classes.bold}>@{name}</span> via Tor. Your message will be sent directly, not via Zcash memo.</span> : <span>Disconnected from <span className={classes.bold}>@{name}</span>. Your message will be sent via Zcash memo.</span>}
-          </Typography>
+        {isDM && name && (
+          <Grid container className={classes.root}>
+            <Grid item xs className={classes.item}>
+              <Typography variant='caption' className={classes.info}>
+                {isConnected ? (
+                  <span>
+                    Connected to <span className={classes.bold}>@{name}</span> via Tor. Your message
+                    will be sent directly, not via Zcash memo.
+                  </span>
+                ) : (
+                  <span>
+                    Disconnected from <span className={classes.bold}>@{name}</span>. Your message
+                    will be sent via Zcash memo.
+                  </span>
+                )}
+              </Typography>
+            </Grid>
           </Grid>
-      </Grid>
-             )
-          }
+        )}
         {isNewUser && (
           <WelcomeMessage
             message={
               <span>
-                Welcome to Zbay! To start quickly, Zbay includes username and
-                channel registration data in the app itself. To verify this
-                data, which takes ~1 hour but may add some security,
+                Welcome to Zbay! To start quickly, Zbay includes username and channel registration
+                data in the app itself. To verify this data, which takes ~1 hour but may add some
+                security,
                 <span className={classes.link} onClick={onRescan}>
-                  {" "}
+                  {' '}
                   restart & re-sync
                 </span>
                 . Otherwise, say hi and introduce yourself!
@@ -271,7 +266,7 @@ export const ChannelMessages: React.FC<IChannelMessagesProps> = ({
         )}
       </List>
     </Scrollbars>
-  );
+  )
 };
 
 const typeToMessageComponent = {

src/renderer/containers/widgets/channels/ChannelInput.js

@@ -70,7 +70,7 @@ export const ChannelInput = ({
       id={id}
       users={users}
       onChange={e => {
-        onChange(e)
+        onChange({ value: e, id })
         resetDebounce()
       }}
       onKeyPress={e => {

src/renderer/containers/widgets/channels/DirectMessageInput.js

@@ -71,12 +71,12 @@ export const ChannelInput = ({
   const isFromZbayUser = channelName !== 'Unknown'
   return (
     <ChannelInputComponent
-        isDM
+      isDM
       infoClass={infoClass}
       id={id}
       setInfoClass={setInfoClass}
       onChange={e => {
-        onChange(e)
+        onChange({ value: e, id })
         resetDebounce()
       }}
       onKeyPress={sendDirectMessageOnEnter}

src/renderer/containers/widgets/channels/OfferInput.js

@@ -60,7 +60,7 @@ export const ChannelInput = ({
       id={id}
       setInfoClass={setInfoClass}
       onChange={e => {
-        onChange(e)
+        onChange({ value: e, id })
         resetDebounce()
       }}
       onKeyPress={sendItemMessageOnEnter}

src/renderer/store/handlers/channel.ts

@@ -87,7 +87,7 @@ export const initialState: Channel = new Channel({
 
 const setLoading = createAction<boolean>(actionTypes.SET_CHANNEL_LOADING)
 const setSpentFilterValue = createAction(actionTypes.SET_SPENT_FILTER_VALUE, (_, value) => value)
-const setMessage = createAction<string>(actionTypes.SET_CHANNEL_MESSAGE)
+const setMessage = createAction<{ value: string; id: string }>(actionTypes.SET_CHANNEL_MESSAGE)
 const setChannelId = createAction<string>(actionTypes.SET_CHANNEL_ID)
 const isSizeCheckingInProgress = createAction<boolean>(actionTypes.IS_SIZE_CHECKING_IN_PROGRESS)
 const messageSizeStatus = createAction<boolean>(actionTypes.MESSAGE_SIZE_STATUS)
@@ -221,6 +221,7 @@ const sendOnEnter = (event, resetTab) => async (dispatch, getState) => {
   const messageToSend = channelSelectors.message(getState())
   const users = usersSelectors.users(getState())
   const useTor = appSelectors.useTor(getState())
+  const id = channelSelectors.id(getState())
   let message
   if (enterPressed && !shiftPressed) {
     event.preventDefault()
@@ -234,7 +235,7 @@ const sendOnEnter = (event, resetTab) => async (dispatch, getState) => {
     })
     const isMergedMessageTooLong = await dispatch(_checkMessageSize(message.message))
     if (!isMergedMessageTooLong) {
-      dispatch(setMessage(''))
+      dispatch(setMessage({ value: '', id: id }))
       const myUser = usersSelectors.myUser(getState())
       const messageDigest = crypto.createHash('sha256')
       const messageEssentials = R.pick(['createdAt', 'message'])(message)
@@ -446,9 +447,9 @@ export const reducer = handleActions<Channel, PayloadType<ChannelActions>>(
       produce(state, draft => {
         draft.spentFilterValue = new BigNumber(value)
       }),
-    [setMessage.toString()]: (state, { payload: value }: ChannelActions['setMessage']) =>
+    [setMessage.toString()]: (state, { payload: { value, id } }: ChannelActions['setMessage']) =>
       produce(state, draft => {
-        draft.message[draft.id] = value
+        draft.message[id] = value
       }),
     [setChannelId.toString()]: (state, { payload: id }: ChannelActions['setChannelId']) =>
       produce(state, draft => {