shakacode/react-webpack-rails-tutorial

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 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 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 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 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

Function NavigationBar has 112 lines of code (exceeds 25 allowed). Consider refactoring.

Open

function NavigationBar(props) {
  const { commentsCount, pathname } = props;

  const [isOpen, setIsOpen] = useState(false);

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';

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 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

Function commentsReducer has 66 lines of code (exceeds 25 allowed). Consider refactoring.

Open

export default function commentsReducer($$state = $$initialState, action = null) {
  const { type, comment, comments, error, locale } = action;

  switch (type) {
    case actionTypes.FETCH_COMMENTS_SUCCESS: {

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 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

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 render has 46 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  render() {
    const { actions, data, intl } = this.props;
    const { formatMessage } = intl;
    const cssTransitionGroupClassNames = {
      enter: css.elementEnter,

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

Open

  it('shows the author', () => {
    const component = renderIntoDocument(<Comment author="Frank" text="Hi!" />);

    const author = findRenderedDOMComponentWithClass(component, 'js-comment-author');
    expect(author.textContent).toEqual('Frank');

• Read up
  Read up

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

Open

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