prakhar1989/react-tags

View on GitHub

Showing 57 of 58 total issues

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

  const getTagItems = () => {
    const allClassNames = { ...DEFAULT_CLASSNAMES, ...props.classNames };

    return tags.map((tag, index) => {
      return (
Severity: Minor
Found in src/components/ReactTags.tsx - About 1 hr to fix

    Function RemoveComponent has 38 lines of code (exceeds 25 allowed). Consider refactoring.
    Open

    const RemoveComponent = (props: RemoveComponentProps) => {
      const { readOnly, removeComponent, onRemove, className, tag, index } = props;
    
      const onKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
        if (KEYS.ENTER.includes(event.keyCode) || event.keyCode === KEYS.SPACE) {
    Severity: Minor
    Found in src/components/RemoveComponent.tsx - About 1 hr to fix

      Similar blocks of code found in 5 locations. Consider refactoring.
      Open

            expect($el.find(Suggestions).props().suggestions).to.have.deep.members([
              { className: '', id: 'Apricot', text: 'Apricot' },
            ]);
      Severity: Major
      Found in __tests__/ReactTags.test.tsx and 4 other locations - About 1 hr to fix
      __tests__/ReactTags.test.tsx on lines 704..706
      __tests__/ReactTags.test.tsx on lines 753..755
      __tests__/ReactTags.test.tsx on lines 782..784
      __tests__/ReactTags.test.tsx on lines 917..919

      Duplicated Code

      Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

      Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

      When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

      Tuning

      This issue has a mass of 64.

      We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

      The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

      If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

      See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

      Refactorings

      Further Reading

      Similar blocks of code found in 5 locations. Consider refactoring.
      Open

            expect($el.find(Suggestions).props().suggestions).to.have.deep.members([
              { className: '', id: 'Apple', text: 'Apple' },
            ]);
      Severity: Major
      Found in __tests__/ReactTags.test.tsx and 4 other locations - About 1 hr to fix
      __tests__/ReactTags.test.tsx on lines 650..652
      __tests__/ReactTags.test.tsx on lines 704..706
      __tests__/ReactTags.test.tsx on lines 753..755
      __tests__/ReactTags.test.tsx on lines 782..784

      Duplicated Code

      Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

      Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

      When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

      Tuning

      This issue has a mass of 64.

      We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

      The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

      If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

      See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

      Refactorings

      Further Reading

      Similar blocks of code found in 5 locations. Consider refactoring.
      Open

            expect($el.find(Suggestions).props().suggestions).to.have.deep.members([
              { className: '', id: 'Apricot', text: 'Apricot' },
            ]);
      Severity: Major
      Found in __tests__/ReactTags.test.tsx and 4 other locations - About 1 hr to fix
      __tests__/ReactTags.test.tsx on lines 650..652
      __tests__/ReactTags.test.tsx on lines 704..706
      __tests__/ReactTags.test.tsx on lines 782..784
      __tests__/ReactTags.test.tsx on lines 917..919

      Duplicated Code

      Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

      Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

      When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

      Tuning

      This issue has a mass of 64.

      We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

      The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

      If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

      See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

      Refactorings

      Further Reading

      Similar blocks of code found in 5 locations. Consider refactoring.
      Open

            expect($el.find(Suggestions).props().suggestions).to.have.deep.members([
              { className: '', id: 'Peach', text: 'Peach' },
            ]);
      Severity: Major
      Found in __tests__/ReactTags.test.tsx and 4 other locations - About 1 hr to fix
      __tests__/ReactTags.test.tsx on lines 650..652
      __tests__/ReactTags.test.tsx on lines 704..706
      __tests__/ReactTags.test.tsx on lines 753..755
      __tests__/ReactTags.test.tsx on lines 917..919

      Duplicated Code

      Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

      Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

      When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

      Tuning

      This issue has a mass of 64.

      We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

      The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

      If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

      See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

      Refactorings

      Further Reading

      Similar blocks of code found in 5 locations. Consider refactoring.
      Open

            expect($el.find(Suggestions).props().suggestions).to.have.deep.members([
              { className: '', id: 'Apricot', text: 'Apricot' },
            ]);
      Severity: Major
      Found in __tests__/ReactTags.test.tsx and 4 other locations - About 1 hr to fix
      __tests__/ReactTags.test.tsx on lines 650..652
      __tests__/ReactTags.test.tsx on lines 753..755
      __tests__/ReactTags.test.tsx on lines 782..784
      __tests__/ReactTags.test.tsx on lines 917..919

      Duplicated Code

      Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

      Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

      When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

      Tuning

      This issue has a mass of 64.

      We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

      The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

      If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

      See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

      Refactorings

      Further Reading

      Function addTag has 35 lines of code (exceeds 25 allowed). Consider refactoring.
      Open

        const addTag = (tag: Tag) => {
          if (!tag.id || !tag[labelField]) {
            return;
          }
      
      
      Severity: Minor
      Found in src/components/ReactTags.tsx - About 1 hr to fix

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

              const $el = mount(
                mockItem({
                  delimiters: [Keys.TAB, Keys.SPACE, Keys.COMMA],
                  handleAddition(tag) {
                    tags.push(tag);
        Severity: Major
        Found in __tests__/ReactTags.test.tsx and 1 other location - About 1 hr to fix
        __tests__/ReactTags.test.tsx on lines 390..398

        Duplicated Code

        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

        Tuning

        This issue has a mass of 62.

        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

        Refactorings

        Further Reading

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

                  handleFilterSuggestions: (query, suggestions) => {
                    return suggestions.filter((suggestion) => {
                      return (
                        suggestion.text.toLowerCase().indexOf(query.toLowerCase()) >= 0
                      );
        Severity: Major
        Found in __tests__/ReactTags.test.tsx and 1 other location - About 1 hr to fix
        __tests__/ReactTags.test.tsx on lines 712..718

        Duplicated Code

        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

        Tuning

        This issue has a mass of 62.

        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

        Refactorings

        Further Reading

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

                  handleFilterSuggestions: (query, suggestions) => {
                    return suggestions.filter((suggestion) => {
                      return (
                        suggestion.text.toLowerCase().indexOf(query.toLowerCase()) >= 0
                      );
        Severity: Major
        Found in __tests__/ReactTags.test.tsx and 1 other location - About 1 hr to fix
        __tests__/ReactTags.test.tsx on lines 762..768

        Duplicated Code

        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

        Tuning

        This issue has a mass of 62.

        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

        Refactorings

        Further Reading

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

              const $el = mount(
                mockItem({
                  delimiters: [Keys.TAB, Keys.SPACE, Keys.COMMA],
                  handleAddition(tag) {
                    tags.push(tag);
        Severity: Major
        Found in __tests__/ReactTags.test.tsx and 1 other location - About 1 hr to fix
        __tests__/ReactTags.test.tsx on lines 262..270

        Duplicated Code

        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

        Tuning

        This issue has a mass of 62.

        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

        Refactorings

        Further Reading

        Function GitHubCorner has 33 lines of code (exceeds 25 allowed). Consider refactoring.
        Open

        const GitHubCorner = () => {
          return (
            <>
              <a
                href="https://github.com/react-tags/react-tags"
        Severity: Minor
        Found in example/GithubCorner.js - About 1 hr to fix

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

                const tags = render(
                  mockItem({
                    editable: true,
                    tags: [
                      ...defaults.tags,
          Severity: Major
          Found in __tests__/ReactTags.test.tsx and 1 other location - About 1 hr to fix
          __tests__/ReactTags.test.tsx on lines 143..152

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 58.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

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

            it('shows the classname properly', () => {
              const $el = shallow(mockItem());
              expect($el.find('.foo').length).to.equal(1);
            });
          Severity: Major
          Found in __tests__/suggestions.test.tsx and 2 other locations - About 1 hr to fix
          __tests__/SingleTag.test.tsx on lines 86..89
          __tests__/suggestions.test.tsx on lines 43..46

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 58.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

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

                const container = render(
                  mockItem({
                    readOnly: true,
                    tags: [
                      ...defaults.tags,
          Severity: Major
          Found in __tests__/ReactTags.test.tsx and 1 other location - About 1 hr to fix
          __tests__/ReactTags.test.tsx on lines 1179..1188

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 58.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

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

            test('should add className passed in tags to the tag', () => {
              const $el = mount(mockItem());
              expect($el.find('.action').length).to.equal(1);
            });
          Severity: Major
          Found in __tests__/SingleTag.test.tsx and 2 other locations - About 1 hr to fix
          __tests__/suggestions.test.tsx on lines 38..41
          __tests__/suggestions.test.tsx on lines 43..46

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 58.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

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

            it('renders all suggestions properly', () => {
              const $el = shallow(mockItem());
              expect($el.find('li').length).to.equal(4);
            });
          Severity: Major
          Found in __tests__/suggestions.test.tsx and 2 other locations - About 1 hr to fix
          __tests__/SingleTag.test.tsx on lines 86..89
          __tests__/suggestions.test.tsx on lines 38..41

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 58.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

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

            suggestions: [
              { id: 'Banana', text: 'Banana' },
              { id: 'Mango', text: 'Mango' },
              { id: 'Pear', text: 'Pear' },
              { id: 'Apricot', text: 'Apricot' },
          Severity: Minor
          Found in __tests__/suggestions.test.tsx and 1 other location - About 55 mins to fix
          __tests__/suggestions.test.tsx on lines 124..129

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 54.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

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

                suggestions: [
                  { id: 'Banana', text: 'Banana' },
                  { id: 'Mango', text: 'Mango' },
                  { id: 'Pear', text: 'Pear' },
                  { id: 'Apricot', text: 'Apricot' },
          Severity: Minor
          Found in __tests__/suggestions.test.tsx and 1 other location - About 55 mins to fix
          __tests__/suggestions.test.tsx on lines 12..17

          Duplicated Code

          Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

          Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

          When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

          Tuning

          This issue has a mass of 54.

          We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

          The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

          If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

          See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

          Refactorings

          Further Reading

          Severity
          Category
          Status
          Source
          Language