Add prettier

client/src/js/components/App.js

@@ -14,14 +14,26 @@ export default class App extends Component {
   };
 
   render() {
-    const { connected, tab, channels, servers,
-      privateChats, showTabList, select, push } = this.props;
-    const mainClass = showTabList ? 'main-container off-canvas' : 'main-container';
+    const {
+      connected,
+      tab,
+      channels,
+      servers,
+      privateChats,
+      showTabList,
+      select,
+      push
+    } = this.props;
+    const mainClass = showTabList
+      ? 'main-container off-canvas'
+      : 'main-container';
     return (
       <div className="wrap">
-        {!connected &&
-          <div className="app-info">Connection lost, attempting to reconnect...</div>
-        }
+        {!connected && (
+          <div className="app-info">
+            Connection lost, attempting to reconnect...
+          </div>
+        )}
         <div className="app-container" onClick={this.handleClick}>
           <TabList
             tab={tab}
@@ -33,9 +45,15 @@ export default class App extends Component {
             push={push}
           />
           <div className={mainClass}>
-            <Route name="chat"><Chat /></Route>
-            <Route name="connect"><Connect /></Route>
-            <Route name="settings"><Settings /></Route>
+            <Route name="chat">
+              <Chat />
+            </Route>
+            <Route name="connect">
+              <Connect />
+            </Route>
+            <Route name="settings">
+              <Settings />
+            </Route>
           </div>
         </div>
       </div>

client/src/js/components/TabList.js

@@ -24,36 +24,48 @@ export default class TabList extends PureComponent {
         />
       );
 
-      server.forEach((channel, name) => tabs.push(
-        <TabListItem
-          key={address + name}
-          server={address}
-          target={name}
-          content={name}
-          selected={tab.server === address && tab.name === name}
-          onClick={this.handleTabClick}
-        />
-      ));
-
-      if (privateChats.has(address) && privateChats.get(address).size > 0) {
-        tabs.push(<div key={`${address}-pm}`} className="tab-label">Private messages</div>);
-
-        privateChats.get(address).forEach(nick => tabs.push(
+      server.forEach((channel, name) =>
+        tabs.push(
           <TabListItem
-            key={address + nick}
+            key={address + name}
             server={address}
-            target={nick}
-            content={nick}
-            selected={tab.server === address && tab.name === nick}
+            target={name}
+            content={name}
+            selected={tab.server === address && tab.name === name}
             onClick={this.handleTabClick}
           />
-        ));
+        )
+      );
+
+      if (privateChats.has(address) && privateChats.get(address).size > 0) {
+        tabs.push(
+          <div key={`${address}-pm}`} className="tab-label">
+            Private messages
+          </div>
+        );
+
+        privateChats
+          .get(address)
+          .forEach(nick =>
+            tabs.push(
+              <TabListItem
+                key={address + nick}
+                server={address}
+                target={nick}
+                content={nick}
+                selected={tab.server === address && tab.name === nick}
+                onClick={this.handleTabClick}
+              />
+            )
+          );
       }
     });
 
     return (
       <div className={className}>
-        <button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
+        <button className="button-connect" onClick={this.handleConnectClick}>
+          Connect
+        </button>
         <div className="tab-container">{tabs}</div>
         <div className="side-buttons">
           <i className="icon-user" />

client/src/js/components/pages/Chat/Chat.js

@@ -90,10 +90,7 @@ export default class Chat extends Component {
           onToggleSearch={toggleSearch}
           onToggleUserList={toggleUserList}
         />
-        <Search
-          search={search}
-          onSearch={this.handleSearch}
-        />
+        <Search search={search} onSearch={this.handleSearch} />
         <MessageBox
           hasMoreMessages={hasMoreMessages}
           messages={messages}

client/src/js/components/pages/Chat/ChatTitle.js

@@ -7,8 +7,16 @@ import { linkify } from 'utils';
 
 export default class ChatTitle extends PureComponent {
   render() {
-    const { status, title, tab, channel, onTitleChange,
-      onToggleSearch, onToggleUserList, onCloseClick } = this.props;
+    const {
+      status,
+      title,
+      tab,
+      channel,
+      onTitleChange,
+      onToggleSearch,
+      onToggleUserList,
+      onCloseClick
+    } = this.props;
 
     let closeTitle;
     if (tab.isChannel()) {
@@ -21,7 +29,9 @@ export default class ChatTitle extends PureComponent {
 
     let serverError = null;
     if (!tab.name && status.error) {
-      serverError = <span className="chat-topic error">Error: {status.error}</span>;
+      serverError = (
+        <span className="chat-topic error">Error: {status.error}</span>
+      );
     }
 
     return (
@@ -38,7 +48,9 @@ export default class ChatTitle extends PureComponent {
             <span className="chat-title">{title}</span>
           </Editable>
           <div className="chat-topic-wrap">
-            <span className="chat-topic">{linkify(channel.get('topic')) || null}</span>
+            <span className="chat-topic">
+              {linkify(channel.get('topic')) || null}
+            </span>
             {serverError}
           </div>
           <i className="icon-search" title="Search" onClick={onToggleSearch} />
@@ -51,7 +63,9 @@ export default class ChatTitle extends PureComponent {
         </div>
         <div className="userlist-bar">
           <i className="icon-user" />
-          <span className="chat-usercount">{channel.get('users', List()).size}</span>
+          <span className="chat-usercount">
+            {channel.get('users', List()).size}
+          </span>
         </div>
       </div>
     );

client/src/js/components/pages/Chat/Message.js

@@ -5,7 +5,9 @@ export default class Message extends PureComponent {
 
   render() {
     const { message } = this.props;
-    const className = message.type ? `message message-${message.type}` : 'message';
+    const className = message.type
+      ? `message message-${message.type}`
+      : 'message';
     const style = {
       paddingLeft: `${window.messageIndent + 15}px`,
       textIndent: `-${window.messageIndent}px`,
@@ -15,11 +17,13 @@ export default class Message extends PureComponent {
     return (
       <p className={className} style={style}>
         <span className="message-time">{message.time}</span>
-        {message.from &&
+        {message.from && (
           <span className="message-sender" onClick={this.handleNickClick}>
-            {' '}{message.from}
+            {' '}
+            {message.from}
           </span>
-        }{' '}{message.content}
+        )}{' '}
+        {message.content}
       </p>
     );
   }

client/src/js/components/pages/Chat/MessageBox.js

@@ -33,7 +33,8 @@ export default class MessageBox extends PureComponent {
 
     if (nextProps.messages.get(0) !== this.props.messages.get(0)) {
       if (nextProps.tab === this.props.tab) {
-        const addedMessages = nextProps.messages.size - this.props.messages.size;
+        const addedMessages =
+          nextProps.messages.size - this.props.messages.size;
         let addedHeight = 0;
         for (let i = 0; i < addedMessages; i++) {
           addedHeight += nextProps.messages.get(i).height;
@@ -126,10 +127,12 @@ export default class MessageBox extends PureComponent {
 
   handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
     if (this.mounted) {
-      if (!this.loading &&
+      if (
+        !this.loading &&
         this.props.hasMoreMessages &&
         scrollTop <= fetchThreshold &&
-        scrollTop < this.prevScrollTop) {
+        scrollTop < this.prevScrollTop
+      ) {
         this.fetchMore();
       }
 
@@ -165,11 +168,7 @@ export default class MessageBox extends PureComponent {
     if (index === 0) {
       if (this.props.hasMoreMessages) {
         return (
-          <div
-            key="top"
-            className="messagebox-top-indicator"
-            style={style}
-          >
+          <div key="top" className="messagebox-top-indicator" style={style}>
             Loading messages...
           </div>
         );

client/src/js/components/pages/Chat/MessageInput.js

@@ -7,8 +7,16 @@ export default class MessageInput extends PureComponent {
   };
 
   handleKey = e => {
-    const { tab, onCommand, onMessage,
-      add, reset, increment, decrement, currentHistoryEntry } = this.props;
+    const {
+      tab,
+      onCommand,
+      onMessage,
+      add,
+      reset,
+      increment,
+      decrement,
+      currentHistoryEntry
+    } = this.props;
 
     if (e.key === 'Enter' && e.target.value) {
       if (e.target.value[0] === '/') {
@@ -36,7 +44,12 @@ export default class MessageInput extends PureComponent {
   };
 
   render() {
-    const { nick, currentHistoryEntry, onNickChange, onNickEditDone } = this.props;
+    const {
+      nick,
+      currentHistoryEntry,
+      onNickChange,
+      onNickEditDone
+    } = this.props;
     return (
       <div className="message-input-wrap">
         <Editable

client/src/js/components/pages/Chat/Search.js

@@ -8,7 +8,9 @@ export default class Search extends PureComponent {
     }
   }
 
-  inputRef = el => { this.input = el; };
+  inputRef = el => {
+    this.input = el;
+  };
 
   handleSearch = e => this.props.onSearch(e.target.value);
 

client/src/js/components/pages/Chat/SearchResult.js

@@ -11,12 +11,14 @@ export default class SearchResult extends PureComponent {
 
     return (
       <p className="search-result" style={style}>
-        <span className="message-time">{timestamp(new Date(result.time * 1000))}</span>
+        <span className="message-time">
+          {timestamp(new Date(result.time * 1000))}
+        </span>
         <span>
           {' '}
           <span className="message-sender">{result.from}</span>
         </span>
-        <span>{' '}{linkify(result.content)}</span>
+        <span> {linkify(result.content)}</span>
       </p>
     );
   }

client/src/js/components/pages/Chat/UserList.js

@@ -10,7 +10,9 @@ export default class UserList extends PureComponent {
     }
   }
 
-  listRef = el => { this.list = el; };
+  listRef = el => {
+    this.list = el;
+  };
 
   renderUser = ({ index, style, key }) => {
     const { users, onNickClick } = this.props;

client/src/js/components/pages/Connect.js

@@ -14,7 +14,10 @@ export default class Connect extends Component {
 
     let address = e.target.address.value.trim();
     const nick = e.target.nick.value.trim();
-    const channels = e.target.channels.value.split(',').map(s => s.trim()).filter(s => s);
+    const channels = e.target.channels.value
+      .split(',')
+      .map(s => s.trim())
+      .filter(s => s);
     const opts = {
       name: e.target.name.value.trim(),
       tls: e.target.ssl.checked
@@ -78,18 +81,32 @@ export default class Connect extends Component {
         <Navicon />
         <form className="connect-form" onSubmit={this.handleSubmit}>
           <h1>Connect</h1>
-          <input name="name" type="text" placeholder="Name" defaultValue={defaults.name} />
-          <input name="address" type="text" placeholder="Address" defaultValue={defaults.address} />
+          <input
+            name="name"
+            type="text"
+            placeholder="Name"
+            defaultValue={defaults.name}
+          />
+          <input
+            name="address"
+            type="text"
+            placeholder="Address"
+            defaultValue={defaults.address}
+          />
           <input name="nick" type="text" placeholder="Nick" />
           <input
             name="channels"
             type="text"
             placeholder="Channels"
-            defaultValue={defaults.channels ? defaults.channels.join(',') : null}
+            defaultValue={
+              defaults.channels ? defaults.channels.join(',') : null
+            }
           />
           {optionals}
           <p>
-            <label htmlFor="ssl"><input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL</label>
+            <label htmlFor="ssl">
+              <input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL
+            </label>
             <i className="icon-ellipsis" onClick={this.handleShowClick} />
           </p>
           <input type="submit" value="Connect" />

client/src/js/components/pages/Settings.js

@@ -26,7 +26,7 @@ const Settings = ({ settings, onCertChange, onKeyChange, uploadCert }) => {
         />
       </div>
       <button onClick={uploadCert}>{status}</button>
-      { error ? <p className="error">{error}</p> : null }
+      {error ? <p className="error">{error}</p> : null}
     </div>
   );
 };

client/src/js/components/ui/Editable.js

@@ -30,7 +30,8 @@ export default class Editable extends PureComponent {
   getInputWidth(value) {
     if (this.input) {
       const style = window.getComputedStyle(this.input);
-      const padding = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+      const padding =
+        parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
       // Make sure the width is atleast 1px so the caret always shows
       const width = stringWidth(value, style.font) || 1;
       return padding + width;
@@ -68,7 +69,9 @@ export default class Editable extends PureComponent {
     }
   };
 
-  inputRef = el => { this.input = el; }
+  inputRef = el => {
+    this.input = el;
+  };
 
   render() {
     const { children, className, value } = this.props;
@@ -77,21 +80,21 @@ export default class Editable extends PureComponent {
       width: this.state.width
     };
 
-    return (
-      this.state.editing ?
-        <input
-          autoFocus
-          ref={this.inputRef}
-          className={className}
-          type="text"
-          value={value}
-          onBlur={this.handleBlur}
-          onChange={this.handleChange}
-          onKeyDown={this.handleKey}
-          style={style}
-          spellCheck={false}
-        /> :
-        <div onClick={this.startEditing}>{children}</div>
+    return this.state.editing ? (
+      <input
+        autoFocus
+        ref={this.inputRef}
+        className={className}
+        type="text"
+        value={value}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onKeyDown={this.handleKey}
+        style={style}
+        spellCheck={false}
+      />
+    ) : (
+      <div onClick={this.startEditing}>{children}</div>
     );
   }
 }

client/src/js/components/ui/FileInput.js

@@ -21,7 +21,9 @@ export default class FileInput extends PureComponent {
 
   render() {
     return (
-      <button className="input-file" onClick={this.handleClick}>{this.props.name}</button>
+      <button className="input-file" onClick={this.handleClick}>
+        {this.props.name}
+      </button>
     );
   }
 }