Fix code style

Remove misguided comma-first style, add floating commas, and improve
spacing and parentheses for single-param inline arrow functions.

src/components/MainDisplay.jsx

@@ -28,7 +28,7 @@ export const MainDisplay = ({dictionaryInfo, wordsToDisplay, updateDisplay, last
               details={{
                 custom: [
                   {
-                    name: 'Test Tab'
+                    name: 'Test Tab',
                   }
                 ]
               }}

src/components/display/DictionaryDetails.jsx

@@ -3,10 +3,10 @@ import Component from 'inferno-component';
 import marked from 'marked';
 
 const DISPLAY = {
-  NONE: false
+  NONE: false,
-, DESCRIPTION: 1
+  DESCRIPTION: 1,
-, DETAILS: 2
+  DETAILS: 2,
-, STATS: 3
+  STATS: 3,
 }
 
 export class DictionaryDetails extends Component {
@@ -14,15 +14,15 @@ export class DictionaryDetails extends Component {
     super(props);
 
     this.state = {
-      currentDisplay: DISPLAY.NONE
+      currentDisplay: DISPLAY.NONE,
     }
 
     this._descriptionHTML = marked(props.description);
   }
 
   componentWillReceiveProps (nextProps) {
-    const currentDescription = this.props.description
+    const currentDescription = this.props.description,
-    ,     nextDescription = nextProps.description;
+      nextDescription = nextProps.description;
 
     if (currentDescription !== nextDescription) {
       this._descriptionHTML = marked(nextProps.description);
@@ -33,7 +33,7 @@ export class DictionaryDetails extends Component {
     display = (this.state.currentDisplay !== display) ? display : DISPLAY.NONE;
 
     this.setState({
-      currentDisplay: display
+      currentDisplay: display,
     });
   }
 

src/components/display/WordDisplay.jsx

@@ -12,7 +12,7 @@ export class WordDisplay extends Component {
     super(props);
 
     this.state = {
-      isEditing: false
+      isEditing: false,
     }
   }
 

src/components/management/IPAField.jsx

@@ -17,9 +17,9 @@ export class IPAField extends Component {
     super(props);
 
     this.state = {
-      value: props.value || ''
+      value: props.value || '',
-    , doShowHelp: false
+      doShowHelp: false,
-    , doShowTable: false
+      doShowTable: false,
     }
 
     this.field = null;
@@ -27,7 +27,7 @@ export class IPAField extends Component {
 
   componentWillReceiveProps (nextProps) {
     this.setState({
-      value: nextProps.value
+      value: nextProps.value,
     });
   }
 
@@ -48,7 +48,9 @@ export class IPAField extends Component {
             <section className='modal-card-body'>
 
               <div className='content'
-                dangerouslySetInnerHTML={{__html: phondueUsage}} />
+                dangerouslySetInnerHTML={{
+                  __html: phondueUsage,
+                }} />
 
             </section>
           </div>
@@ -63,7 +65,7 @@ export class IPAField extends Component {
         <IPATable
           value={ this.state.value }
           close={ () => this.setState({ doShowTable: false }) }
-          update={newValue => this.setState({ value: newValue }, this.field.focus())} />
+          update={ (newValue) => this.setState({ value: newValue }, this.field.focus()) } />
       );
     }
   }
@@ -90,12 +92,12 @@ export class IPAField extends Component {
   }
 
   onInput (event) {
-    let val = event.target.value
+    let val = event.target.value,
-    , pos = this.field.selectionStart || val.length;
+    pos = this.field.selectionStart || val.length;
 
     if (event.key) {
-      const key = event.key
+      const key = event.key,
-      , digraph = digraphs[val.substr(pos - 1, 1) + key];
+        digraph = digraphs[val.substr(pos - 1, 1) + key];
 
       if (digraph) {
         event.preventDefault();
@@ -116,11 +118,13 @@ export class IPAField extends Component {
       <div className='field'>
         <label className='label'>Pronunciation</label>
         <p className='control'>
-          <input className='input' type='text' disabled={!!this.props.isDisplayOnly} placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
+          <input className='input' type='text'
-            ref={input => this.field = input}
+            placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
+            disabled={ !!this.props.isDisplayOnly }
+            ref={ (input) => this.field = input }
             value={ this.state.value }
-            onInput={event => this.onInput(event)}
+            onInput={ (event) => this.onInput(event) }
-            onKeyDown={event => this.onInput(event)}
+            onKeyDown={ (event) => this.onInput(event) }
             onChange={ () => this.props.onChange(this.state.value) } />
         </p>
         { this.showButtons() }

src/components/management/SearchBox/index.jsx

@@ -56,7 +56,7 @@ export class SearchBox extends Component {
                       <p className='control'>
                         <span className='select'>
                           <select value={ this.state.searchingIn }
-                            onChange={event => {
+                            onChange={(event) => {
                               this.setState({ searchingIn: event.target.value });
                             }}>
                             <option value='name'>Word</option>
@@ -67,11 +67,11 @@ export class SearchBox extends Component {
                       </p>
                       <p className='control is-expanded'>
                         <input className='input' type='text' placeholder='Search Term'
-                          ref={input => {
+                          ref={(input) => {
                             this.searchBox = input;
                           }}
                           value={ this.state.searchTerm }
-                          onChange={event => {
+                          onChange={(event) => {
                             console.log(event);
                             this.setState({ searchTerm: event.target.value });
                           }} />
@@ -115,7 +115,7 @@ export class SearchBox extends Component {
                     <input type='radio' name='searchmethod'
                       value={ METHOD.contains }
                       checked={ this.state.searchMethod === METHOD.contains }
-                      onClick={event => {
+                      onClick={(event) => {
                         if (event.currentTarget.checked) {
                           this.setState({
                             searchMethod: event.currentTarget.value,
@@ -131,7 +131,7 @@ export class SearchBox extends Component {
                     <input type='radio' name='searchmethod'
                       value={ METHOD.startsWith }
                       checked={ this.state.searchMethod === METHOD.startsWith }
-                      onClick={event => {
+                      onClick={(event) => {
                         if (event.currentTarget.checked) {
                           this.setState({
                             searchMethod: event.currentTarget.value,
@@ -147,7 +147,7 @@ export class SearchBox extends Component {
                     <input type='radio' name='searchmethod'
                       value={ METHOD.endsWith }
                       checked={ this.state.searchMethod === METHOD.endsWith }
-                      onClick={event => {
+                      onClick={(event) => {
                         if (event.currentTarget.checked) {
                           this.setState({
                             searchMethod: event.currentTarget.value,
@@ -163,7 +163,7 @@ export class SearchBox extends Component {
                     <input type='radio' name='searchmethod'
                       value={ METHOD.isExactly }
                       checked={ this.state.searchMethod === METHOD.isExactly }
-                      onClick={event => {
+                      onClick={(event) => {
                         if (event.currentTarget.checked) {
                           this.setState({
                             searchMethod: event.currentTarget.value,
@@ -234,13 +234,13 @@ export class SearchBox extends Component {
 
   showHeader () {
     this.setState({
-      showHeader: true
+      showHeader: true,
     });
   }
 
   hideHeader () {
     this.setState({
-      showHeader: false
+      showHeader: false,
     });
   }
 

src/components/management/WordForm.jsx

@@ -9,24 +9,24 @@ export class WordForm extends Component {
     super(props);
 
     this.state = {
-      wordName: this.props.name || ''
+      wordName: this.props.name || '',
-    , wordPronunciation: this.props.pronunciation || ''
+      wordPronunciation: this.props.pronunciation || '',
-    , wordPartOfSpeech: this.props.partOfSpeech || ''
+      wordPartOfSpeech: this.props.partOfSpeech || '',
-    , wordDefinition: this.props.definition || ''
+      wordDefinition: this.props.definition || '',
-    , wordDetails: this.props.details || ''
+      wordDetails: this.props.details || '',
 
-    , nameIsValid: true
+      nameIsValid: true,
-    , pronunciationIsValid: true
+      pronunciationIsValid: true,
-    , partOfSpeechIsValid: true
+      partOfSpeechIsValid: true,
-    , definitionIsValid: true
+      definitionIsValid: true,
-    , detailsIsValid: true
+      detailsIsValid: true,
     }
   }
 
   isValidWord () {
-    let nameIsValid = true
+    let nameIsValid = true,
-    , definitionIsValid = true
+    definitionIsValid = true,
-    , detailsIsValid = true;
+    detailsIsValid = true;
     
     if (this.state.wordName === '') {
       nameIsValid = false;
@@ -43,9 +43,9 @@ export class WordForm extends Component {
     }
 
     this.setState({
-      nameIsValid
+      nameIsValid,
-    , definitionIsValid
+      definitionIsValid,
-    , detailsIsValid
+      detailsIsValid,
     });
 
     return nameIsValid == true && definitionIsValid == true && detailsIsValid == true;
@@ -53,11 +53,11 @@ export class WordForm extends Component {
 
   submitWord () {
     const word = new Word({
-      name: this.state.wordName
+      name: this.state.wordName,
-    , pronunciation: this.state.wordPronunciation
+      pronunciation: this.state.wordPronunciation,
-    , partOfSpeech: this.state.wordPartOfSpeech
+      partOfSpeech: this.state.wordPartOfSpeech,
-    , definition: this.state.wordDefinition
+      definition: this.state.wordDefinition,
-    , details: this.state.wordDetails
+      details: this.state.wordDetails,
     });
 
 
@@ -80,11 +80,11 @@ export class WordForm extends Component {
 
   clearForm () {
     this.setState({
-      wordName: ''
+      wordName: '',
-    , wordPronunciation: ''
+      wordPronunciation: '',
-    , wordPartOfSpeech: ''
+      wordPartOfSpeech: '',
-    , wordDefinition: ''
+      wordDefinition: '',
-    , wordDetails: ''
+      wordDetails: '',
     });
   }
 
@@ -108,20 +108,22 @@ export class WordForm extends Component {
         </div>
 
         <IPAField value={ this.state.wordPronunciation }
-          onChange={newValue => this.setState({ wordPronunciation: newValue })} />
+          onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } />
 
         <div className='field'>
           <label className='label'>Part of Speech</label>
           <p className='control'>
             <span className='select'>
               <select value={ this.state.wordPartOfSpeech }
-                onChange={event => {
+                onChange={(event) => {
                   this.setState({ wordPartOfSpeech: event.target.value });
                 }}>
                 <option value=''></option>
                 {this.props.partsOfSpeech.map((partOfSpeech) => {
                   return (
-                    <option value={partOfSpeech}>{partOfSpeech}</option>
+                    <option value={ partOfSpeech }>
+                      { partOfSpeech }
+                    </option>
                   );
                 })}
               </select>

src/components/structure/Header.jsx

@@ -25,7 +25,7 @@ export class Header extends Component {
           <div className='nav-item'>
             <SearchBox
               partsOfSpeech={ this.props.partsOfSpeech }
-              search={ searchConfig => this.props.search(searchConfig) } />
+              search={ (searchConfig) => this.props.search(searchConfig) } />
           </div>
         </div>
 

src/index.jsx

@@ -50,7 +50,7 @@ class App extends Component {
     // const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig;
 
     // TODO: Sort out searching to remove this temporary solution.
-    dictionary.wordsPromise.then(words => {
+    dictionary.wordsPromise.then((words) => {
       this.setState({
         displayedWords: words,
       })
@@ -68,7 +68,7 @@ class App extends Component {
       <div>
         <Header
           partsOfSpeech={ this.state.partsOfSpeech }
-          search={ searchConfig => this.search(searchConfig) } />
+          search={ (searchConfig) => this.search(searchConfig) } />
 
         <MainDisplay
           dictionaryInfo={ this.dictionaryInfo }

src/managers/DictionaryData.js

@@ -4,10 +4,10 @@ import wordDb from './WordDatabase';
 import idManager from './IDManager';
 
 const defaultDictionary = {
-  name: 'New'
+  name: 'New',
-, specification: 'Dictionary'
+  specification: 'Dictionary',
-, description: 'A new dictionary.'
+  description: 'A new dictionary.',
-, partsOfSpeech: ['Noun', 'Adjective', 'Verb']
+  partsOfSpeech: ['Noun', 'Adjective', 'Verb'],
 }
 
 class DictionaryData {
@@ -80,8 +80,8 @@ class DictionaryData {
     if (Array.isArray(partOfSpeech)) {
       words = words.anyOf(partOfSpeech);
     } else {
-      assert(typeof partOfSpeech === 'string'
+      assert(typeof partOfSpeech === 'string',
-        , 'You must use either a string or an array when searching for words with a particular part of speech');
+        'You must use either a string or an array when searching for words with a particular part of speech');
       
       words = words.equals(partOfSpeech);
     }

src/managers/Word.js

@@ -17,7 +17,7 @@ export class Word {
     this.modifiedTime = null;
 
     return wordDb.words.add(this)
-    .then(id => {
+    .then((id) => {
       this.id = id;
       console.log('Word added successfully');
     })
@@ -31,7 +31,7 @@ export class Word {
     this.modifiedTime = timestampInSeconds;
 
     return wordDb.words.put(this, wordId)
-    .then(id => {
+    .then((id) => {
       console.log('Word modified successfully');
     })
     .catch(error => {

src/managers/WordDatabase.js

@@ -4,7 +4,7 @@ import {Word} from './Word';
 
 const db = new Dexie('Lexiconga');
 db.version(1).stores({
-  words: '++id, name, partOfSpeech, createdTime, modifiedTime'
+  words: '++id, name, partOfSpeech, createdTime, modifiedTime',
 });
 
 if (['emptydb', 'donotsave'].includes(process.env.NODE_ENV)) {

webpack.config.js

@@ -13,97 +13,101 @@ const BUILD_DIR = path.resolve(__dirname, 'public');
 const APP_DIR = path.resolve(__dirname, 'src');
 
 const webpackConfig = {
-  entry: APP_DIR + '/index.jsx'
+  entry: APP_DIR + '/index.jsx',
-, output: {
+  
-    path: BUILD_DIR
+  output: {
-  , filename: 'lexiconga.js'
+    path: BUILD_DIR,
-  }
+    filename: 'lexiconga.js',
-, module: {
+  },
+
+  module: {
     rules: [
       {
-        test: (/\.scss$/)
+        test: (/\.scss$/),
-      , exclude: (/node_modules/)
+        exclude: (/node_modules/),
-      , use: [
+        use: [
-          'style-loader'
+          'style-loader',
-        , 'css-loader'
+          'css-loader',
-        , {
+          {
-            loader: 'sass-loader'
+            loader: 'sass-loader',
-          , options: {
+            options: {
               file: './src/sass/styles.scss',
               outFile: './public/styles.css',
-              outputStyle: 'compressed'
+              outputStyle: 'compressed',
-            }
+            },
-          }
+          },
-        ]
+        ],
-      }
+      },
-    , {
+      {
-        test: (/\.html$/)
+        test: (/\.html$/),
-      , exclude: (/node_modules/)
+        exclude: (/node_modules/),
-      , use: [
+        use: [
-          'html-loader'
+          'html-loader',
-        ]
+        ],
-      }
+      },
-    , {
+      {
-        test: (/\.txt$/)
+        test: (/\.txt$/),
-      , exclude: (/node_modules/)
+        exclude: (/node_modules/),
-      , use: [
+        use: [
           'raw-loader'
-        ]
+        ],
-      }
+      },
-    , {
-        test: (/\.jsx?$/)
-      , exclude: (/node_modules/)
-      , use: [
       {
-            loader: 'babel-loader'
+        test: (/\.jsx?$/),
-          , options: {
+        exclude: (/node_modules/),
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
               presets: [
-                'es2016'
+                'es2016',
-              ]
+              ],
-            , plugins: [
+              plugins: [
-                'inferno'
+                'inferno',
-              ]
+              ],
+            },
           }
-          }
+        ],
-        ]
+      },
-      }
-    , {
-        test: (/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/)
-      , use: [
       {
-            loader: 'url-loader'
+        test: (/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/),
-          , options: {
+        use: [
-              limit: 100000
+          {
-            , mimetype: 'application/font-woff'
+            loader: 'url-loader',
-            , name: './assets/fonts/[name].[ext]'
+            options: {
+              limit: 100000,
+              mimetype: 'application/font-woff',
+              name: './assets/fonts/[name].[ext]',
             }
           }
         ]
       }
     ]
-  }
+  },
-, resolve: {
+
+  resolve: {
     extensions: [
-      '.js'
+      '.js',
-    , '.jsx'
+      '.jsx',
     ]
-  }
+  },
-, plugins: [
+
+  plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        'NODE_ENV': JSON.stringify(BUILDMODE)
+        'NODE_ENV': JSON.stringify(BUILDMODE),
-      }
+      },
-    })
+    }),
-  ]
+  ],
 };
 
 if (BUILDMODE === 'production') {
   webpackConfig.plugins.push(
     new webpack.optimize.UglifyJsPlugin({
-      mangle: true
+      mangle: true,
-    , compress: {
+      compress: {
-        warnings: false
+        warnings: false,
-      }
+      },
     })
   );