shakacode/react-webpack-rails-tutorial

File CommentForm.jsx has 316 lines of code (exceeds 250 allowed). Consider refactoring.

Open

/* eslint-disable react/no-find-dom-node, react/no-string-refs */
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

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

Open

  render() {
    let inputForm;
    switch (this.state.formMode) {
      case 0:
        inputForm = this.formHorizontal();

Function formHorizontal has 50 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  formHorizontal() {
    const { formatMessage } = this.props.intl;
    return (
      <div>
        <hr />

Function formStacked has 49 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  formStacked() {
    const { formatMessage } = this.props.intl;
    return (
      <div>
        <hr />

Function formInline has 45 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  formInline() {
    const { formatMessage } = this.props.intl;
    return (
      <div>
        <hr />

Function errorWarning has 30 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  errorWarning() {
    const { error, cssTransitionGroupClassNames } = this.props;

    // If there is no error, there is nothing to add to the DOM
    if (!error.error) return null;

Similar blocks of code found in 4 locations. Consider refactoring.

Open

          <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
            <label htmlFor="horizontalAuthorNode" className="w-full lg:w-2/12 lg:text-end shrink-0">
              {formatMessage(defaultMessages.inputNameLabel)}
            </label>
            <input

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

          <div className="flex flex-col gap-0">
            <label htmlFor="stackedAuthorNode" className="w-full">
              {formatMessage(defaultMessages.inputNameLabel)}
            </label>
            <input

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

          <div className="flex flex-col gap-0">
            <label htmlFor="stackedTextNode" className="w-full">
              {formatMessage(defaultMessages.inputTextLabel)}
            </label>
            <input

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

          <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
            <label htmlFor="horizontalTextNode" className="w-full lg:w-2/12 lg:text-end shrink-0">
              {formatMessage(defaultMessages.inputTextLabel)}
            </label>
            <input

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

          <div className="flex gap-2 items-center">
            <label htmlFor="inlineAuthorNode">{formatMessage(defaultMessages.inputNameLabel)}</label>
            <input
              type="text"
              id="inlineAuthorNode"

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

          <div className="flex gap-2 items-center">
            <label htmlFor="inlineTextNode">{formatMessage(defaultMessages.inputTextLabel)}</label>
            <input
              type="textarea"
              id="inlineTextNode"

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

          <div className="flex gap-2">
            <button
              type="submit"
              className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
              disabled={this.props.isSaving}

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

          <div className="flex flex-col gap-0">
            <button
              type="submit"
              className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
              disabled={this.props.isSaving}

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

          <button
            type="button"
            className={`px-6 py-2 font-semibold border-0 rounded ${
              this.state.formMode === 0 ? 'text-sky-50 bg-sky-600' : 'text-sky-600 hover:bg-gray-100'
            }`}

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

          <button
            type="button"
            className={`px-6 py-2 font-semibold border-0 rounded ${
              this.state.formMode === 2 ? 'text-sky-50 bg-sky-600' : 'text-sky-600 hover:bg-gray-100'
            }`}

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

          <button
            type="button"
            className={`px-6 py-2 font-semibold border-0 rounded ${
              this.state.formMode === 1 ? 'text-sky-50 bg-sky-600' : 'text-sky-600 hover:bg-gray-100'
            }`}

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

      case 0:
        comment = {
          author: ReactDOM.findDOMNode(this.refs.horizontalAuthorNode).value,
          text: ReactDOM.findDOMNode(this.refs.horizontalTextNode).value,
        };

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

      case 1:
        comment = {
          author: ReactDOM.findDOMNode(this.refs.stackedAuthorNode).value,
          text: ReactDOM.findDOMNode(this.refs.stackedTextNode).value,
        };

• Read up
  Read up