GeekPark/gpk_account

View on GitHub
frontend/src/components/sessions/Header.jsx

Summary

Maintainability
A
2 hrs
Test Coverage

Function render has 28 lines of code (exceeds 25 allowed). Consider refactoring.
Open

  render() {
    const loaded = this.state.loaded;
    const avatar = {};
    if (loaded !== null) {
      avatar.backgroundImage = `url(${loaded})`;
Severity: Minor
Found in frontend/src/components/sessions/Header.jsx - About 1 hr to fix

Function componentWillReceiveProps has a Cognitive Complexity of 9 (exceeds 5 allowed). Consider refactoring.
Open

  componentWillReceiveProps(nextProps) {
    const oldAvatar = this.props.avatarURL;
    const newAvatar = nextProps.avatarURL;
    const serverAvatar = tryKey(nextProps, 'server', 'user', 'avatar_url');

Severity: Minor
Found in frontend/src/components/sessions/Header.jsx - About 55 mins to fix

Cognitive Complexity

Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

A method's cognitive complexity is based on a few simple rules:

  • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
  • Code is considered more complex for each "break in the linear flow of the code"
  • Code is considered more complex when "flow breaking structures are nested"

Further reading

'Image' is not defined.
Open

    const newImage = new Image();

Disallow Undeclared Variables (no-undef)

This rule can help you locate potential ReferenceErrors resulting from misspellings of variable and parameter names, or accidental implicit globals (for example, from forgetting the var keyword in a for loop initializer).

Rule Details

Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/ comment.

Examples of incorrect code for this rule:

/*eslint no-undef: "error"*/

var a = someFunction();
b = 10;

Examples of correct code for this rule with global declaration:

/*global someFunction b:true*/
/*eslint no-undef: "error"*/

var a = someFunction();
b = 10;

The b:true syntax in /*global */ indicates that assignment to b is correct.

Examples of incorrect code for this rule with global declaration:

/*global b*/
/*eslint no-undef: "error"*/

b = 10;

By default, variables declared in /*global */ are read-only, therefore assignment is incorrect.

Options

  • typeof set to true will warn for variables used inside typeof check (Default false).

typeof

Examples of correct code for the default { "typeof": false } option:

/*eslint no-undef: "error"*/

if (typeof UndefinedIdentifier === "undefined") {
    // do something ...
}

You can use this option if you want to prevent typeof check on a variable which has not been declared.

Examples of incorrect code for the { "typeof": true } option:

/*eslint no-undef: ["error", { "typeof": true }] */

if(typeof a === "string"){}

Examples of correct code for the { "typeof": true } option with global declaration:

/*global a*/
/*eslint no-undef: ["error", { "typeof": true }] */

if(typeof a === "string"){}

Environments

For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments. This rule supports these environments, as listed in Specifying Environments. A few examples are given below.

browser

Examples of correct code for this rule with browser environment:

/*eslint no-undef: "error"*/
/*eslint-env browser*/

setTimeout(function() {
    alert("Hello");
});

node

Examples of correct code for this rule with node environment:

/*eslint no-undef: "error"*/
/*eslint-env node*/

var fs = require("fs");
module.exports = function() {
    console.log(fs);
};

When Not To Use It

If explicit declaration of global variables is not to your taste.

Compatibility

This rule provides compatibility with treatment of global variables in JSHint and JSLint. Source: http://eslint.org/docs/rules/

Unexpected if as the only statement in an else block.
Open

      if (this.state.loaded !== null) return;

disallow if statements as the only statement in else blocks (no-lonely-if)

If an if statement is the only statement in the else block, it is often clearer to use an else if form.

if (foo) {
    // ...
} else {
    if (bar) {
        // ...
    }
}

should be rewritten as

if (foo) {
    // ...
} else if (bar) {
    // ...
}

Rule Details

This rule disallows if statements as the only statement in else blocks.

Examples of incorrect code for this rule:

/*eslint no-lonely-if: "error"*/

if (condition) {
    // ...
} else {
    if (anotherCondition) {
        // ...
    }
}

if (condition) {
    // ...
} else {
    if (anotherCondition) {
        // ...
    } else {
        // ...
    }
}

Examples of correct code for this rule:

/*eslint no-lonely-if: "error"*/

if (condition) {
    // ...
} else if (anotherCondition) {
    // ...
}

if (condition) {
    // ...
} else if (anotherCondition) {
    // ...
} else {
    // ...
}

if (condition) {
    // ...
} else {
    if (anotherCondition) {
        // ...
    }
    doSomething();
}

When Not To Use It

Disable this rule if the code is clearer without requiring the else if form. Source: http://eslint.org/docs/rules/

Expected 'this' to be used by class method 'hideSwitch'.
Open

  hideSwitch() {

Enforce that class methods utilize this (class-methods-use-this)

If a class method does not use this, it can safely be made a static function.

It's possible to have a class method which doesn't use this, such as:

class A {
    constructor() {
        this.a = "hi";
    }

    print() {
        console.log(this.a);
    }

    sayHi() {
        console.log("hi");
    }
}

let a = new A();
a.sayHi(); // => "hi"

In the example above, the sayHi method doesn't use this, so we can make it a static method:

class A {
    constructor() {
        this.a = "hi";
    }

    print() {
        console.log(this.a);
    }

    static sayHi() {
        console.log("hi");
    }
}

A.sayHi(); // => "hi"

Also note in the above examples that the code calling the function on an instance of the class (let a = new A(); a.sayHi();) changes to calling it on the class itself (A.sayHi();).

Rule Details

This rule is aimed to flag class methods that do not use this.

Examples of incorrect code for this rule:

/*eslint class-methods-use-this: "error"*/
/*eslint-env es6*/

class A {
    foo() {
        console.log("Hello World");     /*error Expected 'this' to be used by class method 'foo'.*/
    }
}

Examples of correct code for this rule:

/*eslint class-methods-use-this: "error"*/
/*eslint-env es6*/
class A {
    foo() {
        this.bar = "Hello World"; // OK, this is used
    }
}

class A {
    constructor() {
        // OK. constructor is exempt
    }
}

class A {
    static foo() {
        // OK. static methods aren't expected to use this.
    }
}

Options

Exceptions

"class-methods-use-this": [<enabled>, { "exceptMethods": [&lt;...exceptions&gt;] }]</enabled>

The exceptMethods option allows you to pass an array of method names for which you would like to ignore warnings.

Examples of incorrect code for this rule when used without exceptMethods:

/*eslint class-methods-use-this: "error"*/

class A {
    foo() {
    }
}

Examples of correct code for this rule when used with exceptMethods:

/*eslint class-methods-use-this: ["error", { "exceptMethods": ["foo"] }] */

class A {
    foo() {
    }
}

Source: http://eslint.org/docs/rules/

'window' is not defined.
Open

    const url = window.location.href;

Disallow Undeclared Variables (no-undef)

This rule can help you locate potential ReferenceErrors resulting from misspellings of variable and parameter names, or accidental implicit globals (for example, from forgetting the var keyword in a for loop initializer).

Rule Details

Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/ comment.

Examples of incorrect code for this rule:

/*eslint no-undef: "error"*/

var a = someFunction();
b = 10;

Examples of correct code for this rule with global declaration:

/*global someFunction b:true*/
/*eslint no-undef: "error"*/

var a = someFunction();
b = 10;

The b:true syntax in /*global */ indicates that assignment to b is correct.

Examples of incorrect code for this rule with global declaration:

/*global b*/
/*eslint no-undef: "error"*/

b = 10;

By default, variables declared in /*global */ are read-only, therefore assignment is incorrect.

Options

  • typeof set to true will warn for variables used inside typeof check (Default false).

typeof

Examples of correct code for the default { "typeof": false } option:

/*eslint no-undef: "error"*/

if (typeof UndefinedIdentifier === "undefined") {
    // do something ...
}

You can use this option if you want to prevent typeof check on a variable which has not been declared.

Examples of incorrect code for the { "typeof": true } option:

/*eslint no-undef: ["error", { "typeof": true }] */

if(typeof a === "string"){}

Examples of correct code for the { "typeof": true } option with global declaration:

/*global a*/
/*eslint no-undef: ["error", { "typeof": true }] */

if(typeof a === "string"){}

Environments

For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments. This rule supports these environments, as listed in Specifying Environments. A few examples are given below.

browser

Examples of correct code for this rule with browser environment:

/*eslint no-undef: "error"*/
/*eslint-env browser*/

setTimeout(function() {
    alert("Hello");
});

node

Examples of correct code for this rule with node environment:

/*eslint no-undef: "error"*/
/*eslint-env node*/

var fs = require("fs");
module.exports = function() {
    console.log(fs);
};

When Not To Use It

If explicit declaration of global variables is not to your taste.

Compatibility

This rule provides compatibility with treatment of global variables in JSHint and JSLint. Source: http://eslint.org/docs/rules/

Absolute imports should come before relative imports.
Open

import intl from 'react-intl-universal';

For more information visit Source: http://eslint.org/docs/rules/

propType "avatarURL" is not required, but has no corresponding defaultProp declaration.
Open

  avatarURL: PropTypes.any,

For more information visit Source: http://eslint.org/docs/rules/

Anchors must have content and the content must be accessible by a screen reader.
Open

            {s => <a href="//www.geekpark.net" className="logo" style={{ opacity: s.op }}></a>}

For more information visit Source: http://eslint.org/docs/rules/

Empty components are self-closing
Open

                <div className="avatar-mask" style={{ ...avatar, opacity: s.op, transform: 'scale(1.8)' }}></div>

For more information visit Source: http://eslint.org/docs/rules/

Expected indentation of 10 space characters but found 12.
Open

            <div className="form-wrapper switch-button">

For more information visit Source: http://eslint.org/docs/rules/

Empty components are self-closing
Open

            {s => <a href="//www.geekpark.net" className="logo" style={{ opacity: s.op }}></a>}

For more information visit Source: http://eslint.org/docs/rules/

Prop type any is forbidden
Open

  avatarURL: PropTypes.any,

For more information visit Source: http://eslint.org/docs/rules/

There are no issues that match your filters.

Category
Status