From 7bf5ff7a17bc4005e70c4b44fc9e666d1642b366 Mon Sep 17 00:00:00 2001
From: Gabriel Quaresma <j.quaresmasantos_98@hotmail.com>
Date: Tue, 22 Aug 2023 09:00:02 -0300
Subject: [PATCH] Refactor/expanded story labels component (#867)

* refactor: ExpandedStoryLabels

* test: update ExpandedStoryLabels spec

* refactor: minor update
---
 .../ExpandedStory/ExpandedStoryLabels.jsx     | 73 +++++++------------
 .../expanded_story_labels_spec.js             | 12 ++-
 2 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryLabels.jsx b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryLabels.jsx
index 85c398423..b91742a61 100644
--- a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryLabels.jsx
+++ b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryLabels.jsx
@@ -4,61 +4,38 @@ import PropTypes from 'prop-types';
 import { editingStoryPropTypesShape } from '../../../models/beta/story';
 import ExpandedStorySection from './ExpandedStorySection';
 
-class ExpandedStoryLabels extends React.Component {
-  constructor(props) {
-    super(props);
+function ExpandedStoryLabels({ story, projectLabels, disabled, onRemoveLabel, onAddLabel }) {
+  const { labels } = story._editing;
 
-    this.handleAddition = this.handleAddition.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-  }
-
-  handleDelete(index) {
-    const { story, onRemoveLabel, disabled } = this.props;
-    const { labels } = story._editing;
+  if (disabled && !story.labels.length) return null
 
-    if(disabled) return;
+  const onDelete = (index) => {
+    if (disabled) return;
 
-    const label = labels.find(
-      (label, labelIndex) => labelIndex === index
-    );
+    const label = labels.find((_, labelIndex) => labelIndex === index);
 
     onRemoveLabel(label.name);
   }
 
-  handleAddition(label) {
-    const { onAddLabel } = this.props;
-
-    onAddLabel(label);
-  }
-
-  render() {
-    const { projectLabels, story, disabled } = this.props;
-    const { labels } = story._editing;
-
-    if(disabled && !story.labels.length) return null
-
-    return (
-      <ExpandedStorySection
-        title={I18n.t('activerecord.attributes.story.labels')}
-      >
-        <ReactTags
-          tags={labels}
-          handleDelete={this.handleDelete}
-          suggestions={projectLabels}
-          handleAddition={this.handleAddition}
-          allowNew={!disabled}
-          inputAttributes={{readOnly: disabled}}
-          placeholder={disabled ? "" : I18n.t('add new label')}
-          allowBackspace={false}
-          addOnBlur={true}
-          delimiterChars={[',', ' ']}
-          autoresize={false}
-          autofocus={false}
-        />
-      </ExpandedStorySection>
-    )
-  }
-};
+  return (
+    <ExpandedStorySection title={I18n.t('activerecord.attributes.story.labels')}>
+      <ReactTags
+        tags={labels}
+        placeholder={disabled ? "" : I18n.t('add new label')}
+        suggestions={projectLabels}
+        inputAttributes={{ readOnly: disabled }}
+        delimiterChars={[',', ' ']}
+        allowNew={!disabled}
+        allowBackspace={false}
+        autoresize={false}
+        autofocus={false}
+        addOnBlur={true}
+        handleAddition={onAddLabel}
+        handleDelete={onDelete}
+      />
+    </ExpandedStorySection>
+  )
+}
 
 ExpandedStoryLabels.propTypes = {
   story: editingStoryPropTypesShape.isRequired,
diff --git a/spec/javascripts/components/story/expanded_story/expanded_story_labels_spec.js b/spec/javascripts/components/story/expanded_story/expanded_story_labels_spec.js
index b6241832a..86b5d9fc9 100644
--- a/spec/javascripts/components/story/expanded_story/expanded_story_labels_spec.js
+++ b/spec/javascripts/components/story/expanded_story/expanded_story_labels_spec.js
@@ -50,7 +50,9 @@ describe('<ExpandedStoryLabels />', () => {
     it('does not allow deleting labels', () => {
       const { wrapper, onRemoveLabel } = setup({ disabled: true });
 
-      wrapper.instance().handleDelete(0);
+      const handleDelete = wrapper.find('ReactTags').prop('handleDelete');
+
+      handleDelete(0);
 
       expect(onRemoveLabel).not.toHaveBeenCalled();
     });
@@ -68,13 +70,15 @@ describe('<ExpandedStoryLabels />', () => {
     it('allows deleting labels', () => {
       const { wrapper, onRemoveLabel } = setup();
 
-      wrapper.instance().handleDelete(0);
+      const handleDelete = wrapper.find('ReactTags').prop('handleDelete');
+
+      handleDelete(0);
 
       expect(onRemoveLabel).toHaveBeenCalled();
     });
 
     it('allows adding labels', () => {
-      const { wrapper, reactTags } = setup();
+      const { reactTags } = setup();
 
       expect(reactTags.prop('allowNew')).toBe(true);
     });
@@ -82,7 +86,7 @@ describe('<ExpandedStoryLabels />', () => {
 
   describe('<ReactTags />', () => {
     it('renders with the right tags prop', () => {
-      const { wrapper, labels, reactTags } = setup();
+      const { labels, reactTags } = setup();
 
       expect(reactTags.prop('tags')).toEqual(labels);
     });