refactoring due to facebook/react/pull/15047

src/views/edit-account-view.jsx

@@ -39,7 +39,6 @@ export default class EditAccountView extends React.Component {
     this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
-    this.handleStartAddCred = this.handleStartAddCred.bind(this);
     this.handleCredChange = this.handleCredChange.bind(this);
     this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
     this.handleCredEntered = this.handleCredEntered.bind(this);
@@ -92,10 +91,6 @@ export default class EditAccountView extends React.Component {
     }
   }
 
-  handleStartAddCred() {
-    this.setState({addCredActive: true});
-  }
-
   handleCredChange(e) {
     this.setState({newCred: e.target.value, addCredInvalid: false});
   }
@@ -169,12 +164,11 @@ export default class EditAccountView extends React.Component {
     this.state.credentials.map((cred) => {
       credentials.push(<div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
         <span > {!cred.done ?
-          <a href="javascript:;"
-            onClick={this.props.onCredConfirm.bind(this, cred.meth, cred.val)}>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredConfirm(cred.meth, cred.val);}}>
               <FormattedMessage id="validate_credential_action" defaultMessage="confirm"
                 description="Validate credentail call to action" />
             </a>
-          : null} <a href="javascript:;" onClick={this.props.onCredDelete.bind(this, cred.meth, cred.val)}><i
+          : null} <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}><i
             className="material-icons gray">delete_outline</i></a></span></div>);
     });
 
@@ -270,7 +264,7 @@ export default class EditAccountView extends React.Component {
                   placeholder="Phone number or email" required="required" autoFocus
                   onChange={this.handleCredChange} onKeyDown={this.handleCredKeyDown} onBlur={this.handleCredEntered} />
                 : null}
-              <div><a href="javascript:;" onClick={this.handleStartAddCred}>+ Add another</a></div>
+              <div><a href="#" onClick={(e) => {e.preventDefault(); this.setState({addCredActive: true});}}>+ Add another</a></div>
             </div>
           </div>
           <div className="hr" />
@@ -295,7 +289,7 @@ export default class EditAccountView extends React.Component {
           </div>
           <div className="hr" />
           <div className="panel-form-column">
-            <a href="javascript:;" className="red flat-button" onClick={this.props.onLogout}>
+            <a href="#" className="red flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
               <i className="material-icons">exit_to_app</i> <FormattedMessage id="button_logout"
                 defaultMessage="Logout" description="Button [Logout]" />
             </a>

src/views/info-view.jsx

@@ -339,7 +339,8 @@ class InfoView extends React.Component {
     this.setState({showPermissionEditorFor: undefined});
   }
 
-  handleShowAddMembers() {
+  handleShowAddMembers(e) {
+    e.preventDefault();
     this.props.onInitFind();
     this.setState({showMemberPanel: true});
   }
@@ -354,6 +355,7 @@ class InfoView extends React.Component {
   }
 
   handleLeave() {
+    e.preventDefault();
     this.props.onLeaveTopic(this.props.topic);
   }
 
@@ -594,13 +596,13 @@ class InfoView extends React.Component {
                 </div>
                 <div className="panel-form-row">
                   {this.state.sharer ?
-                    <a href="javascript:;" className="flat-button" onClick={this.handleShowAddMembers}>
+                    <a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
                       <i className="material-icons">person_add</i> <FormattedMessage id="button_add_members"
                         defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
                     </a>
                     : null}
                   {!this.state.owner ?
-                    <a href="javascript:;" className="red flat-button" onClick={this.handleLeave}>
+                    <a href="#" className="red flat-button" onClick={this.handleLeave}>
                       <i className="material-icons">exit_to_app</i> <FormattedMessage id="button_leave"
                         defaultMessage="Leave" description="Flat button [Leave] (topic)" />
                     </a>
@@ -624,7 +626,7 @@ class InfoView extends React.Component {
               </div>
               :
               <div className="panel-form-row">
-                <a href="javascript:;" className="red flat-button" onClick={this.handleLeave}>
+                <a href="#" className="red flat-button" onClick={this.handleLeave}>
                   <i className="material-icons">exit_to_app</i> <FormattedMessage id="action_leave_chat"
                     defaultMessage="Leave" description="Action [Leave] chat" />
                 </a>

src/views/messages-view.jsx

@@ -73,7 +73,6 @@ class MessagesView extends React.Component {
     this.handleFormResponse = this.handleFormResponse.bind(this);
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleShowContextMenuMessage = this.handleShowContextMenuMessage.bind(this);
-    this.handleBackNavigation = this.handleBackNavigation.bind(this);
     this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this);
     this.handleEnablePeer = this.handleEnablePeer.bind(this);
   }
@@ -486,15 +485,12 @@ class MessagesView extends React.Component {
     this.props.showContextMenu(params, menuItems);
   }
 
-  handleBackNavigation() {
-    this.props.onHideMessagesView();
-  }
-
   handleNewChatAcceptance(action) {
     this.props.onNewChat(this.state.topic, action);
   }
 
-  handleEnablePeer() {
+  handleEnablePeer(e) {
+    e.preventDefault();
     this.props.onChangePermissions(this.state.topic, DEFAULT_ACCESS_MODE, this.state.topic);
   }
 
@@ -579,7 +575,7 @@ class MessagesView extends React.Component {
         <div id="topic-view" className={this.props.hideSelf ? 'nodisplay' : null}>
           <div id="topic-caption-panel" className="caption-panel">
             {this.props.displayMobile ?
-              <a href="javascript:;" id="hide-message-view" onClick={this.handleBackNavigation}>
+              <a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
                 <i className="material-icons">arrow_back</i>
               </a>
               :
@@ -605,7 +601,7 @@ class MessagesView extends React.Component {
               <div id="topic-users" />
             }
             <div>
-              <a href="javascript:;" onClick={this.handleContextClick}>
+              <a href="#" onClick={this.handleContextClick}>
                 <i className="material-icons">more_vert</i>
               </a>
             </div>
@@ -638,7 +634,7 @@ class MessagesView extends React.Component {
             <div id="peer-messaging-disabled-note">
               <i className="material-icons secondary">block</i> <FormattedMessage
                 id="peers_messaging_disabled" defaultMessage="Peer's messaging is disabled."
-                description="Shown when the p2p peer's messaging is disabled" /> <a href="javascript:;"
+                description="Shown when the p2p peer's messaging is disabled" /> <a href="#"
                   onClick={this.handleEnablePeer}><FormattedMessage id="enable_peers_messaging"
                   defaultMessage="Enable" description="Call to action to enable peer's messaging" /></a>.
             </div> : null}

src/views/new-topic-view.jsx

@@ -56,19 +56,19 @@ export default class NewTopicView extends React.Component {
       <div className="flex-column">
         <ul className="tabbar">
           <li className={this.state.tabSelected === "p2p" ? "active" : null}>
-            <a href="javascript:;" data-id="p2p" onClick={this.handleTabClick}>
+            <a href="#" data-id="p2p" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_find_user" defaultMessage="find"
                 description="Tab title Find" />
             </a>
           </li>
           <li className={this.state.tabSelected === "grp" ? "active" : null}>
-            <a href="javascript:;" data-id="grp" onClick={this.handleTabClick}>
+            <a href="#" data-id="grp" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_new_group" defaultMessage="new group"
                 description="Tab title New Group" />
             </a>
           </li>
           <li className={this.state.tabSelected === "byid" ? "active" : null}>
-            <a href="javascript:;" data-id="byid" onClick={this.handleTabClick}>
+            <a href="#" data-id="byid" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_group_by_id" defaultMessage="by id"
                 description="Tab title Find topic by ID" />
             </a>

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>