hook-use-state.js

/**
 * @fileoverview Ensure symmetric naming of useState hook value and setter variables
 * @author Duncan Beevers
 */

'use strict';

const Components = require('../util/Components');
const docsUrl = require('../util/docsUrl');
const report = require('../util/report');

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

const messages = {
  useStateErrorMessage: 'useState call is not destructured into value + setter pair',
};

module.exports = {
  meta: {
    docs: {
      description: 'Ensure symmetric naming of useState hook value and setter variables',
      category: 'Best Practices',
      recommended: false,
      url: docsUrl('hook-use-state'),
    },
    fixable: 'code',
    messages,
    schema: [],
  },

  create: Components.detect((context, components) => ({
    CallExpression(node) {
      const isImmediateReturn = node.parent
        && node.parent.type === 'ReturnStatement';

      if (isImmediateReturn) {
        return;
      }

      const defaultReactImports = components.getDefaultReactImports();
      const namedReactImports = components.getNamedReactImports();
      const defaultReactImportSpecifier = defaultReactImports
        ? defaultReactImports[0]
        : undefined;
      const defaultReactImportName = defaultReactImportSpecifier
        ? defaultReactImportSpecifier.local.name
        : undefined;
      const useStateReactImportSpecifier = namedReactImports
        ? namedReactImports.find((specifier) => specifier.imported.name === 'useState')
        : undefined;
      const useStateReactImportName = useStateReactImportSpecifier
        ? useStateReactImportSpecifier.local.name
        : undefined;

      const isReactUseStateCall = (
        defaultReactImportName
          && node.callee.type === 'MemberExpression'
          && node.callee.object.type === 'Identifier'
          && node.callee.object.name === defaultReactImportName
          && node.callee.property.type === 'Identifier'
          && node.callee.property.name === 'useState'
      );

      const isUseStateCall = (
        useStateReactImportName
          && node.callee.type === 'Identifier'
          && node.callee.name === useStateReactImportName
      );

      // Ignore unless this is a useState() or React.useState() call.
      if (!isReactUseStateCall && !isUseStateCall) {
        return;
      }

      const isDestructuringDeclarator = node.parent
        && node.parent.type === 'VariableDeclarator'
        && node.parent.id.type === 'ArrayPattern';

      if (!isDestructuringDeclarator) {
        report(
          context,
          messages.useStateErrorMessage,
          'useStateErrorMessage',
          { node }
        );
        return;
      }

      const variableNodes = node.parent.id.elements;
      const valueVariable = variableNodes[0];
      const setterVariable = variableNodes[1];

      const valueVariableName = valueVariable
        ? valueVariable.name
        : undefined;

      const setterVariableName = setterVariable
        ? setterVariable.name
        : undefined;

      const expectedSetterVariableName = valueVariableName ? (
        `set${valueVariableName.charAt(0).toUpperCase()}${valueVariableName.slice(1)}`
      ) : undefined;

      const isSymmetricGetterSetterPair = valueVariable
        && setterVariable
        && setterVariableName === expectedSetterVariableName
        && variableNodes.length === 2;

      if (!isSymmetricGetterSetterPair) {
        report(
          context,
          messages.useStateErrorMessage,
          'useStateErrorMessage',
          {
            node: node.parent.id,
            fix: valueVariableName ? (fixer) => fixer.replaceTextRange(
              [node.parent.id.range[0], node.parent.id.range[1]],
              `[${valueVariableName}, ${expectedSetterVariableName}]`
            ) : undefined,
          }
        );
      }
    },
  })),
};