How to use tinode-sdk - 10 common examples

handleHashRoute() {
    var hash = HashNavigation.parseUrlHash(window.location.hash);
    if (hash.path && hash.path.length > 0) {
      // Left-side panel selector.
      if (['register','settings','edit','cred','reset','newtpk','archive','contacts',''].includes(hash.path[0])) {
        this.setState({sidePanelSelected: hash.path[0]});
      } else {
        console.log("Unknown sidepanel view", hash.path[0]);
      }

      // Topic for MessagesView selector.
      if (hash.path.length > 1 && hash.path[1] != this.state.topicSelected) {
        this.setState({
          topicSelected: Tinode.topicType(hash.path[1]) ? hash.path[1] : null
        });
      }
    } else {
      // Empty hashpath
      this.setState({sidePanelSelected: ''});
    }

    // Save validation credentials, if available.
    if (hash.params.method) {
      this.setState({ credMethod: hash.params.method });
    }
    if (hash.params.code) {
      this.setState({ credCode: hash.params.code });
    }

    // Additional parameters of panels.

doLogin(login, password, cred) {
    if (this.tinode.isAuthenticated()) {
      // Already logged in. Go to default screen.
      HashNavigation.navigateTo('');
      return;
    }
    // Sanitize and package credentail.
    cred = Tinode.credential(cred);
    // Try to login with login/password. If they are not available, try token. If no token, ask for login/password.
    let promise = null;
    let token = this.tinode.getAuthToken();
    if (login && password) {
      this.setState({password: null});
      promise = this.tinode.loginBasic(login, password, cred);
    } else if (token) {
      promise = this.tinode.loginToken(token.token, cred);
    }

    if (promise) {
      promise.then((ctrl) => {
        if (ctrl.code >= 300 && ctrl.text === 'validate credentials') {
          this.setState({loadSpinnerVisible: false});
          if (cred) {
            this.handleError("Code does not match", 'warn');

static prepareSearchableContacts(chatList, foundContacts) {
    let merged = {};

    // For chatList topics merge only p2p topics and convert them to the
    // same format as foundContacts.
    for (const c of chatList) {
      if (Tinode.topicType(c.topic) == 'p2p') {
          merged[c.topic] = {
            user: c.topic,
            updated: c.updated,
            public: c.public,
            private: c.private,
            acs: c.acs
          };
      }
    }

    // Add all foundCountacts if they have not been added already.
    for (const c of foundContacts) {
      if (!merged[c.user]) {
        merged[c.user] = c;
      }
    }

render() {
    let avatar;
    if (this.props.avatar === true) {
      const isGroup = (Tinode.topicType(this.props.topic) == 'grp');
      const iconColor = (isGroup ? 'light-color' : 'dark-color')
        + (Math.abs(stringHash(this.props.topic)) % 16);
      if (this.props.topic && this.props.title && this.props.title.trim()) {
        const letter = this.props.title.trim().charAt(0);
        const className = 'lettertile ' + iconColor;
        avatar = (<div><div>{letter}</div></div>)
      } else {
        const className = 'material-icons ' + iconColor;
        avatar = isGroup ?
          <i>group</i> : <i>person</i>;
      }
    } else if (this.props.avatar) {
      // If avatar image is invalid, show a placeholder.
      avatar = <img src="{this.props.avatar}" alt="avatar">{e.target.onerror = null; e.target.src="/img/broken_image.png"}} /&gt;;
    } else {

mimeType={msg.head ? msg.head.mime : null}
            timestamp={msg.ts} response={isReply} seq={msg.seq}
            userFrom={userFrom} userName={userName} userAvatar={userAvatar}
            sequence={sequence} received={deliveryStatus} uploader={msg._uploader}
            viewportWidth={this.props.viewportWidth}
            showContextMenu={this.handleShowContextMenuMessage}
            onImagePreview={this.handleImagePreview}
            onFormResponse={this.handleFormResponse}
            onError={this.props.onError}
            key={msg.seq} />
        );
      }

      let lastSeen = null;
      const cont = this.props.tinode.getMeTopic().getContact(this.state.topic);
      if (cont && Tinode.topicType(cont.topic) == 'p2p') {
        if (cont.online) {
          lastSeen = formatMessage(messages.online_now);
        } else if (cont.seen) {
          lastSeen = formatMessage(messages.last_seen) + ": " +
            shortDateFormat(cont.seen.when, this.props.intl.locale);
          // TODO: also handle user agent in c.seen.ua
        }
      }
      const avatar = this.state.avatar || true;
      const online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';

      component = (
        <div id="topic-view">
          <div id="topic-caption-panel">
            {this.props.displayMobile ?
              <a id="hide-message-view" href="#"> {e.preventDefault(); this.props.onHideMessagesView();}}&gt;</a></div></div>

handleReportTopic(topicName) {
    const topic = this.tinode.getTopic(topicName);
    if (!topic) {
      return;
    }

    // Publish spam report.
    this.tinode.publish(Tinode.TOPIC_SYS, Tinode.Drafty.attachJSON(null, {
      'action': 'report',
      'target': topicName
    }));

    // Remove J and P permissions.
    topic.updateMode(null, '-JP').then((ctrl) => {
      // Hide MessagesView and InfoView panels.
      HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));
    }).catch((err) => {
      this.handleError(err.message, 'err');
    });
  }

newState.messages.push(m);
      }
    });

    // msg could be null if one or more messages were deleted.
    if (msg && !msg.deleted) {
      // If the message is added to the end of the message list,
      // scroll to the bottom.
      if (topic.isNewMessage(msg.seq)) {
        newState.scrollPosition = 0;
      }

      // Aknowledge messages except own messages. They are
      // automatically assumed to be read and recived.
      const status = topic.msgStatus(msg);
      if (status >= Tinode.MESSAGE_STATUS_SENT && msg.from != this.props.myUserId) {
        this.props.readTimerHandler(() => {
          topic.noteRead(msg.seq);
        });
      }
      this.props.onData(msg);
    }
    this.setState(newState);
  }

const {formatMessage} = this.props.intl;
    let timestamp;
    if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
      timestamp = formatMessage(messages.sending);
    } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
      timestamp = formatMessage(messages.failed);
    } else {
      timestamp = shortDateFormat(this.props.timestamp, this.props.intl.locale);
    }

    let marker = null;
    if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
      marker = (<i>access_time</i>); // watch face
    } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
      marker = (<i>warning</i>); // yellow icon /!\
    } else if (this.props.received == Tinode.MESSAGE_STATUS_SENT) {
      marker = (<i>done</i>); // checkmark
    } else if (this.props.received == Tinode.MESSAGE_STATUS_RECEIVED) {
      marker = (<i>done_all</i>); // double checkmark
    } else if (this.props.received == Tinode.MESSAGE_STATUS_READ) {
      marker = (<i>done_all</i>); // blue double checkmark
    }

    return (
      <span>
        {timestamp}{'\u00a0'}{marker}
      </span>
    );
  }
};

if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      if (file.size > MAX_EXTERN_ATTACHMENT_SIZE) {
        // Too large.
        this.props.onError(formatMessage(messages.file_attachment_too_large,
            {size: bytesToHumanSize(file.size), limit: bytesToHumanSize(MAX_EXTERN_ATTACHMENT_SIZE)}), 'err');
      } else if (file.size > MAX_INBAND_ATTACHMENT_SIZE) {
        // Too large to send inband - uploading out of band and sending as a link.
        const uploader = this.props.tinode.getLargeFileHelper();
        if (!uploader) {
          this.props.onError(formatMessage(messages.cannot_initiate_upload));
          return;
        }
        // Format data and initiate upload.
        const uploadCompletionPromise = uploader.upload(file);
        const msg = Drafty.attachFile(null, file.type, null, file.name, file.size, uploadCompletionPromise);
        // Pass data and the uploader to the TinodeWeb.
        this.props.sendMessage(msg, uploadCompletionPromise, uploader);
      } else {
        // Small enough to send inband.
        fileToBase64(file,
          (mime, bits, fname) => {
            this.props.sendMessage(Drafty.attachFile(null, mime, bits, fname));
          },
          this.props.onError
        );
      }
    }
    // Clear the value so the same file can be uploaded again.
    e.target.value = '';
  }

render() {
    const {formatMessage} = this.props.intl;
    let timestamp;
    if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
      timestamp = formatMessage(messages.sending);
    } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
      timestamp = formatMessage(messages.failed);
    } else {
      timestamp = shortDateFormat(this.props.timestamp, this.props.intl.locale);
    }

    let marker = null;
    if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
      marker = (<i>access_time</i>); // watch face
    } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
      marker = (<i>warning</i>); // yellow icon /!\
    } else if (this.props.received == Tinode.MESSAGE_STATUS_SENT) {
      marker = (<i>done</i>); // checkmark
    } else if (this.props.received == Tinode.MESSAGE_STATUS_RECEIVED) {
      marker = (<i>done_all</i>); // double checkmark
    } else if (this.props.received == Tinode.MESSAGE_STATUS_READ) {
      marker = (<i>done_all</i>); // blue double checkmark
    }

    return (
      <span>
        {timestamp}{'\u00a0'}{marker}
      </span>
    );