sending messages to self works

src/views/info-view.jsx

@@ -97,6 +97,7 @@ class InfoView extends React.Component {
       muted: false,
       address: null,
       groupTopic: undefined,
+      isSelf: false,
       channel: undefined,
       fullName: undefined,
       description: undefined,
@@ -203,6 +204,8 @@ class InfoView extends React.Component {
       }
     }
 
+    const isSelf = topic.isSelfType();
+
     this.setState({
       owner: acs && acs.isOwner(),
       admin: acs && acs.isAdmin(),
@@ -210,14 +213,19 @@ class InfoView extends React.Component {
       deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
 
-      fullName: clipStr(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
-      description: clipStr(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
+      fullName: isSelf ?
+        props.intl.formatMessage({id: 'self_topic_name'}) :
+        clipStr(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
+      description: isSelf ?
+        props.intl.formatMessage({id: 'self_topic_comment'}) :
+        clipStr(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
       avatar: makeImageUrl(topic.public ? topic.public.photo : null),
       trustedBadges: badges,
       private: clipStr(topic.private && topic.private.comment, MAX_TITLE_LENGTH),
       archived: topic.isArchived(),
       address: topic.name,
       groupTopic: topic.isGroupType(),
+      isSelf: isSelf,
       channel: topic.isChannelType() || topic.chan,
       access: acs ? acs.getMode() : undefined,
       modeGiven: acs ? acs.getGiven() : undefined,
@@ -539,10 +547,13 @@ class InfoView extends React.Component {
           :
           <div id="info-view-content" className="scrollable-panel">
             <div className="panel-form-column">
-              <a href="#" className="flat-button float-right" onClick={(e) => {e.preventDefault(); this.props.onNavigate('general');}}>
-                <i className="material-icons">edit</i>&nbsp;
-                <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
-              </a>
+              {!this.state.isSelf ?
+                <a href="#" className="flat-button float-right" onClick={e => {e.preventDefault(); this.props.onNavigate('general');}}>
+                  <i className="material-icons">edit</i>&nbsp;
+                  <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+                </a>
+                : null
+              }
               <center>
                 <AvatarUpload
                   tinode={this.props.tinode}
@@ -569,24 +580,30 @@ class InfoView extends React.Component {
                 </div>
                 : null
               }
-              <div className="panel-form-row">
-                <div>
-                  <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
-                    description="Label for user address (ID)" /></label>&nbsp;
-                  <tt>{this.state.address}</tt>
+              {!this.state.isSelf ?
+                <div className="panel-form-row">
+                  <div>
+                    <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+                      description="Label for user address (ID)" /></label>&nbsp;
+                    <tt>{this.state.address}</tt>
+                  </div>
+                  <div style={{marginLeft: 'auto'}}>
+                    &nbsp;<a href="#" onClick={this.handleCopyID}>
+                      <i className="material-icons">content_copy</i>
+                    </a>&nbsp;
+                    &nbsp;<a href="#" onClick={this.handleShowQRCode}>
+                      <i className="material-icons">qr_code</i>
+                    </a>&nbsp;
+                  </div>
                 </div>
-                <div style={{marginLeft: 'auto'}}>
-                  &nbsp;<a href="#" onClick={this.handleCopyID}>
-                    <i className="material-icons">content_copy</i>
-                  </a>&nbsp;
-                  &nbsp;<a href="#" onClick={this.handleShowQRCode}>
-                    <i className="material-icons">qr_code</i>
-                  </a>&nbsp;
+                : null
+              }
+              {this.state.trustedBadges.length > 0 ?
+                <div className="group">
+                  <BadgeList trustedBadges={this.state.trustedBadges} />
                 </div>
-              </div>
-              <div className="group">
-                <BadgeList trustedBadges={this.state.trustedBadges} />
-              </div>
+                : null
+              }
               {this.state.description ?
                 <div className="group">
                   <label className="small">
@@ -596,14 +613,17 @@ class InfoView extends React.Component {
                   <div>{this.state.description}</div>
                 </div> : null}
             </div>
-            <div className="hr" />
-            <div className="panel-form-row">
-              <label>
-                <FormattedMessage id="label_muting_topic" defaultMessage="Muted:"
-                  description="Label for Muting/unmuting the topic" />
-              </label>
-              <CheckBox name="P" checked={this.state.muted} onChange={this.handleMuted} />
-            </div>
+            {!this.state.isSelf ?
+              <><div className="hr" />
+              <div className="panel-form-row">
+                <label>
+                  <FormattedMessage id="label_muting_topic" defaultMessage="Muted:"
+                    description="Label for Muting/unmuting the topic" />
+                </label>
+                <CheckBox name="P" checked={this.state.muted} onChange={this.handleMuted} />
+              </div></>
+              : null
+            }
             {this.state.archived ?
               <div className="panel-form-row">
                 <label>
@@ -615,13 +635,16 @@ class InfoView extends React.Component {
               :
               null
             }
-            <div className="hr" />
-            <div className="panel-form-row">
-              <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
-                <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
-                  defaultMessage="Security" description="Navigaton button for security panel." />
-              </a>
-            </div>
+            {!this.state.isSelf ?
+              <><div className="hr" />
+              <div className="panel-form-row">
+                <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+                  <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+                    defaultMessage="Security" description="Navigaton button for security panel." />
+                </a>
+              </div></>
+              : null
+            }
             {this.state.groupTopic && this.state.sharer ?
               <>
                 <div className="hr" />

src/views/messages-view.jsx

@@ -76,7 +76,7 @@ const messages = defineMessages({
     id: 'drag_file',
     defaultMessage: 'Drag file here',
     description: 'Prompt on the file drag-n-drop overlay banner'
-  }
+  },
 });
 
 // Checks if the access permissions are granted but not yet accepted.
@@ -377,7 +377,14 @@ class MessagesView extends React.Component {
           onlineSubs: subs
         });
 
-        if (topic.public) {
+        if (topic.isSelfType()) {
+          Object.assign(nextState, {
+            title: nextProps.intl.formatMessage({
+              id: 'self_topic_name'
+            }),
+            avatar: true
+          });
+        } else if (topic.public) {
           Object.assign(nextState, {
             title: topic.public.fn,
             avatar: makeImageUrl(topic.public.photo)
@@ -627,7 +634,14 @@ class MessagesView extends React.Component {
   }
 
   handleDescChange(desc) {
-    if (desc.public) {
+    if (Tinode.isSelfTopicName(this.props.topic)) {
+      this.setState({
+        title: this.props.intl.formatMessage({
+          id: 'self_topic_name'
+        }),
+        avatar: true
+      });
+    } else if (desc.public) {
       this.setState({
         title: desc.public.fn,
         avatar: makeImageUrl(desc.public.photo)
@@ -1601,7 +1615,7 @@ class MessagesView extends React.Component {
           }
         }
         const avatar = this.state.avatar || true;
-        const online = this.state.deleted ? null :
+        const online = this.state.deleted || topic.isSelfType() ? null :
           this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
 
         const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');

src/views/new-topic-view.jsx

@@ -125,6 +125,7 @@ class NewTopicView extends React.Component {
                 contacts={this.props.searchResults}
                 myUserId={this.props.myUserId}
                 emptyListMessage={no_contacts_placeholder}
+                showSelfTopic={true}
                 showOnline={false}
                 showUnread={false}
                 showContextMenu={false}

src/views/tinode-web.jsx

@@ -949,7 +949,7 @@ class TinodeWeb extends React.Component {
       newState.ready = true;
     }
 
-    this.tinode.getMeTopic().contacts((c) => {
+    this.tinode.getMeTopic().contacts(c => {
       if (!c.topic && !c.user) {
         // Contacts expect c.topic to be set.
         c.topic = c.name;
@@ -1609,7 +1609,7 @@ class TinodeWeb extends React.Component {
     }
 
     let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false,
-      archived = false, webrtc = false, writer = false;
+      archived = false, webrtc = false, writer = false, p2p = false, self = false;
     if (topic) {
       subscribed = topic.isSubscribed();
       archived = topic.isArchived();
@@ -1625,24 +1625,26 @@ class TinodeWeb extends React.Component {
     }
 
     webrtc = writer && !!this.tinode.getServerParam('iceServers');
+    p2p = Tinode.isP2PTopicName(topicName);
+    self = Tinode.isSelfTopicName(topicName);
 
     return [
       subscribed ? {
         title: this.props.intl.formatMessage(messages.menu_item_info),
         handler: this.handleShowInfoView
       } : null,
-      subscribed && Tinode.isP2PTopicName(topicName) && webrtc ? {
+      subscribed && p2p && webrtc ? {
         title: this.props.intl.formatMessage(messages.menu_item_audio_call),
         handler: this.handleStartAudioCall
       } : null,
-      subscribed && Tinode.isP2PTopicName(topicName) && webrtc ? {
+      subscribed && p2p && webrtc ? {
         title: this.props.intl.formatMessage(messages.menu_item_video_call),
         handler: this.handleStartVideoCall
       } : null,
       subscribed ? 'messages_clear' : null,
-      subscribed && deleter ? 'messages_clear_hard' : null,
-      muted ? (blocked ? null : 'topic_unmute') : 'topic_mute',
-      self_blocked ? 'topic_unblock' : 'topic_block',
+      subscribed && deleter && !self ? 'messages_clear_hard' : null,
+      self ? null : (muted ? (blocked ? null : 'topic_unmute') : 'topic_mute'),
+      self ? null : (self_blocked ? 'topic_unblock' : 'topic_block'),
       archived ? 'topic_restore' : 'topic_archive',
       'topic_delete'
     ];