Feat/toggle modifications

[jobokai]

Reconfiguration of Toggle.js

• Applied strict eslinting rules to toggle.js
• Rewrote switch code to make variables relative to each case so spillage was not happening (https://eslint.org/docs/rules/no-case-declarations)
• reorder functions in order of use
• no unamed functions/convert to es6 functions
• rather than using browser css styles to set variables, switched to using the classes which seems more stable (L249)
• for the search toggle, checkClassName for fa-search incorrectly tried to look for the button className itself which was unavailable

[jobokai]

It looks like the toggle.js code is a bit messy. This is an attempt to clean it up as well as address a few quirky bugs that I was running into locally.

[jyoung295]

Could I take a look at your eslint configuration?

[jobokai]

package.json script:

"lint": "eslint \"scripts/**\" \"modules/**\" .eslintrc.js babel.config.js postcss.config.js stylelint.config.js ./build/webpack.config.js --report-unused-disable-directives --color --cache",

.eslintrc.js:

module.exports = {
  extends: 'pad',
  rules: {
    'template-curly-spacing': 'off',
    indent: 'off',
    'import/no-extraneous-dependencies': ['error', {
      devDependencies: true,
    }],
    'react/jsx-props-no-spreading': ['off'],
  },
};

I think that's everything in our config, but I'd have to confirm with @galvarez421. I think we pretty much leave everything in eslint on except the few things above in the rc file.

[jobokai]

So pad is being extended from code in a private repo we have. I can share the code below: we extend "eslint-config-airbnb": "^17.1.0", "eslint-config-airbnb-base": "^13.1.0" as a base for this code.

/**
 * ESLint config without React plugins
 */

module.exports = {
  extends: 'airbnb-base',
  env: {
    // See https://github.com/airbnb/javascript/issues/1002#issuecomment-238062892
    browser: true,
  },
  /**
   * Allow webpack dynamic imports (code splitting) via parser and parserOptions
   * See:
   * - https://github.com/benmosher/eslint-plugin-import/issues/700#issuecomment-268859187
   * - https://www.npmjs.com/package/babel-eslint#configuration
   */
  parser: 'babel-eslint',
  parserOptions: {
    allowImportExportEverywhere: true,
  },
  /**
   * Prevent issue of parent ESLint configuration(s) being used and causing weird issues
   * See https://github.com/Microsoft/vscode-eslint/issues/71#issuecomment-253517113
   */
  root: true,
  rules: {
    /**
     * eslint-config-airbnb should arguably enforce this
     * See:
     * - https://github.com/airbnb/javascript/blob/eslint-config-airbnb-v17.1.0/packages/eslint-config-airbnb-base/rules/style.js#L167
     * - https://github.com/airbnb/javascript/tree/eslint-config-airbnb-v17.1.0#comments--singleline
     */
    'line-comment-position': 2,
    /**
     * Disable to make Windows users' lives easier
     * See https://github.com/airbnb/javascript/issues/1089#issuecomment-411794251
     */
    'linebreak-style': 'off',
    /**
     * eslint-config-airbnb should arguably enforce this
     * See:
     * - https://github.com/airbnb/javascript/blob/eslint-config-airbnb-v17.1.0/packages/eslint-config-airbnb-base/rules/style.js#L237
     * - https://github.com/airbnb/javascript/tree/eslint-config-airbnb-v17.1.0#comments--multiline
     */
    'multiline-comment-style': 2,
    /**
     * Disable to make Visual Studio users' lives easier
     * See:
     * - https://stackoverflow.com/questions/5406172/utf-8-without-bom
     * - https://developercommunity.visualstudio.com/content/problem/21744/vs2017-rc-breaks-the-encoding-of-my-files.html
     */    
    'unicode-bom': 'off',
  },
};

[jobokai]

If you guys aren't using eslint on things, I would recommend it. It has really forced me over the past few years to write better formatted code and hopefully catching issues before they happen.