refactoring due to facebook/react/pull/15047

src/widgets/attachment.jsx

@@ -56,8 +56,9 @@ export default class Attachment extends React.Component {
     if (!this.props.uploader && !this.state.downloader &&
         !(/^(?:(?:[a-z]+:)?\/\/)/i.test(this.props.downloadUrl))) {
       // Relative URL. Use download helper.
-      url = "javascript:;";
+      url = '#';
       helperFunc = (e) => {
+        e.preventDefault();
         this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);
       };
     } else {

src/widgets/avatar-upload.jsx

@@ -14,7 +14,6 @@ export default class AvatarUpload extends React.Component {
     };
 
     this.handleFileUpload = this.handleFileUpload.bind(this);
-    this.handleClear = this.handleClear.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -39,10 +38,6 @@ export default class AvatarUpload extends React.Component {
     e.target.value = '';
   }
 
-  handleClear() {
-    this.props.onImageChanged(null);
-  }
-
   render() {
     // Randomize id value in case more than one AvatarUpload is shown
     // at the same time.
@@ -51,7 +46,7 @@ export default class AvatarUpload extends React.Component {
       <div className="avatar-upload">
         {this.props.readOnly || !this.state.dataUrl ?
           null :
-          <a href="javascript:;" className="clear-avatar" onClick={this.handleClear}>
+          <a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageChanged(null);}}>
             <i className="material-icons">clear</i>
           </a>}
         {this.state.dataUrl ?

src/widgets/chat-message.jsx

@@ -125,7 +125,7 @@ export default class ChatMessage extends React.Component {
                 received={this.props.received} />
             </div>
             <span className="menuTrigger">
-              <a href="javascript:;" onClick={this.handleContextClick}>
+              <a href="#" onClick={this.handleContextClick}>
                 <i className="material-icons">expand_more</i>
               </a>
             </span>

src/widgets/chip-input.jsx

@@ -39,23 +39,7 @@ export default class ChipInput extends React.Component {
       this.setState({input: ''});
     }
   }
-  /*
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const state = {
-      placeholder: nextProps.chips ? '' : nextProps.prompt,
-      sortedChips: ChipInput.sortChips(nextProps.chips, nextProps.required),
-      chipIndex: ChipInput.indexChips(nextProps.chips),
-      focused: prevState && prevState.focused
-    };
 
-    if (!prevState || nextProps.chips.length > prevState.sortedChips.length) {
-      // Chip added: clear input.
-      state.input = '';
-    }
-
-    return state;
-  }
-  */
   // Map chip index to user name
   static indexChips(chips) {
     const index = {};

src/widgets/chip.jsx

@@ -9,7 +9,8 @@ export default class Chip extends React.PureComponent {
     this.handleCancel = this.handleCancel.bind(this);
   }
 
-  handleCancel() {
+  handleCancel(e) {
+    e.preventDefault();
     this.props.onCancel(this.props.topic, this.props.index);
   }
 
@@ -29,7 +30,7 @@ export default class Chip extends React.PureComponent {
         }
         <span>{title}</span>
         {this.props.onCancel && !this.props.required ?
-          <a href="javascript:;" onClick={this.handleCancel} >&times;</a>
+          <a href="#" onClick={this.handleCancel} >&times;</a>
           : <span className="spacer" />}
       </div>
     );

src/widgets/contact.jsx

@@ -74,7 +74,7 @@ export default class Contact extends React.Component {
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">
-            <a href="javascript:;" onClick={this.handleContextClick}>
+            <a href="#" onClick={this.handleContextClick}>
               <i className="material-icons">expand_more</i>
             </a>
           </span> : null}

src/widgets/error-panel.jsx

@@ -38,7 +38,7 @@ export default class ErrorPanel extends React.PureComponent {
         <span>
           <span dangerouslySetInnerHTML={{__html: this.props.text}} />
           {this.props.action ?
-            <a href="javascript:;" onClick={this.props.action}>
+            <a href="#" onClick={(e) => {e.preventDefault(); this.props.action();}}>
               {this.props.actionText}
             </a>
           : null}

src/widgets/file-progress.jsx

@@ -8,7 +8,7 @@ export default class FileProgress extends React.PureComponent {
       <div className="uploader">
         <div><span style={{width: (this.props.progress * 100) + "%"}}></span></div>
         {this.props.progress < 0.999 ?
-          <a href="javascript:;" onClick={this.props.onCancel}>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}>
             <i className="material-icons">close</i> <FormattedMessage id="action_cancel"
               defaultMessage="cancel" description="Call to action [cancel]" />
           </a>

src/widgets/image-preview.jsx

@@ -45,7 +45,7 @@ export default class ImagePreview extends React.PureComponent {
             <i className="material-icons">file_download</i> <FormattedMessage
               id="download_action" defaultMessage="download" description="Call to action [download]" />
           </a>
-          <a href="javascript:;" onClick={this.props.onClose}><i className="material-icons gray">close</i></a>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container" ref={function(ref) {instance.container = ref;}}>
           <img src={this.props.content.url} style={size} />

src/widgets/menu-cancel.jsx

@@ -2,13 +2,9 @@
 import React from 'react';
 
 export default class MenuCancel extends React.PureComponent {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
-      <a href="javascript:;" onClick={this.props.onCancel}><i className="material-icons">close</i></a>
+      <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}><i className="material-icons">close</i></a>
     );
   }
 }

src/widgets/menu-contacts.jsx

@@ -4,9 +4,9 @@ export default class MenuContacts extends React.PureComponent {
   render() {
     return (
       <div>
-        <a href="javascript:;" onClick={this.props.onNewTopic}><i className="material-icons">chat</i></a>
+        <a href="#" onClick={(e) => {e.preventDefault(); this.props.onNewTopic();}}><i className="material-icons">chat</i></a>
         &nbsp;
-        <a href="javascript:;" onClick={this.props.onSettings}><i className="material-icons">settings</i></a>
+        <a href="#" onClick={(e) => {e.preventDefault(); this.props.onSettings();}}><i className="material-icons">settings</i></a>
       </div>
     );
   }

src/widgets/menu-start.jsx

@@ -4,9 +4,9 @@ export default class MenuStart extends React.PureComponent {
   render() {
     return (
         <div>
-          <a href="javascript:;" onClick={this.props.onSignUp}><i className="material-icons">person_add</i></a>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onSignUp();}}><i className="material-icons">person_add</i></a>
           &nbsp;
-          <a href="javascript:;" onClick={this.props.onSettings}><i className="material-icons">settings</i></a>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onSettings();}}><i className="material-icons">settings</i></a>
         </div>
     );
   }

src/widgets/search-contacts.jsx

@@ -36,7 +36,8 @@ export default class SearchContacts extends React.PureComponent {
     this.props.onSearchContacts(query.length > 0 ? query : Tinode.DEL_CHAR);
   }
 
-  handleClear() {
+  handleClear(e) {
+    e.preventDefault();
     if (this.state.edited) {
       this.props.onSearchContacts(Tinode.DEL_CHAR);
     }
@@ -63,7 +64,7 @@ export default class SearchContacts extends React.PureComponent {
               value={this.state.search} onChange={this.handleSearchChange}
               onKeyDown={this.handleKeyDown} required autoFocus />
           }</FormattedMessage>
-          <a href="javascript:;" onClick={this.handleClear}>
+          <a href="#" onClick={this.handleClear}>
             <i className="material-icons">close</i>
           </a>
         </div>

src/widgets/send-message.jsx

@@ -149,7 +149,8 @@ class SendMessage extends React.PureComponent {
     e.target.value = '';
   }
 
-  handleSend() {
+  handleSend(e) {
+    e.preventDefault();
     const message = this.state.message.trim();
     if (message) {
       this.props.sendMessage(this.state.message.trim());
@@ -193,12 +194,12 @@ class SendMessage extends React.PureComponent {
       <div id="send-message-panel">
         {this.props.disabled ?
           <i className="material-icons disabled">photo</i> :
-          <a href="javascript:;" onClick={(e) => {this.attachImage.click();}} title="Add image">
+          <a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
             <i className="material-icons secondary">photo</i>
           </a>}
         {this.props.disabled ?
           <i className="material-icons disabled">attach_file</i> :
-          <a href="javascript:;" onClick={(e) => {this.attachFile.click();}} title="Attach file">
+          <a href="#" onClick={(e) => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
             <i className="material-icons secondary">attach_file</i>
           </a>}
         <textarea id="sendMessage" placeholder={prompt}
@@ -208,7 +209,7 @@ class SendMessage extends React.PureComponent {
           autoFocus />
           {this.props.disabled ?
             <i className="material-icons disabled">send</i> :
-            <a href="javascript:;" onClick={this.handleSend} title="Send">
+            <a href="#" onClick={this.handleSend} title="Send">
               <i className="material-icons">send</i>
             </a>}
       <input type="file" ref={(ref) => {this.attachFile = ref;}}

src/widgets/tag-manager.jsx

@@ -17,7 +17,6 @@ export default class TagManager extends React.Component {
       activated: this.props.activated
     };
 
-    this.handleShowTagManager = this.handleShowTagManager.bind(this);
     this.handleTagInput = this.handleTagInput.bind(this);
     this.handleAddTag = this.handleAddTag.bind(this);
     this.handleRemoveTag = this.handleRemoveTag.bind(this);
@@ -32,10 +31,6 @@ export default class TagManager extends React.Component {
     return null;
   }
 
-  handleShowTagManager() {
-    this.setState({activated: true});
-  }
-
   handleTagInput(text) {
     this.setState({tagInput: text});
     if (text.length > 0) {
@@ -138,7 +133,7 @@ export default class TagManager extends React.Component {
         </div>
         :
         <div>
-          <a href="javascript:;" className="flat-button" onClick={this.handleShowTagManager}>
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.setState({activated: true});}}>
             <i className="material-icons">edit</i> <FormattedMessage id="title_manage_tags" defaultMessage="Manage"
               description="Section title for the list of tags" />
           </a>