Refactor/expanded story labels component (#867)

* refactor: ExpandedStoryLabels * test: update ExpandedStoryLabels spec * refactor: minor update
Codeminer42 · Aug 22, 2023 · 7bf5ff7 · 7bf5ff7
1 parent 983b3ed
commit 7bf5ff7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 52 deletions.
diff --git 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
@@ -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,21 +70,23 @@ 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);
     });
   });
 
   describe('<ReactTags />', () => {
     it('renders with the right tags prop', () => {
-      const { wrapper, labels, reactTags } = setup();
+      const { labels, reactTags } = setup();
 
       expect(reactTags.prop('tags')).toEqual(labels);
     });