refactor(save-btn): migrates class comp to pure comp (#17699)

app/javascript/articles/components/SaveButton.jsx

@@ -1,74 +1,68 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
 import PropTypes from 'prop-types';
 import { articlePropTypes } from '../../common-prop-types';
 
-export class SaveButton extends Component {
-  constructor(props) {
-    super(props);
+export const SaveButton = ({
+  article,
+  isBookmarked: isBookmarkedProps,
+  onClick,
+  saveable = true,
+}) => {
+  const [buttonText, setButtonText] = useState(
+    isBookmarkedProps ? 'Saved' : 'Save',
+  );
+  const [isBookmarked, setIsBookmarked] = useState(isBookmarkedProps);
 
-    const { isBookmarked } = props;
+  const mouseMove = (_e) => {
+    setButtonText(isBookmarked ? 'Unsave' : 'Save');
+  };
 
-    this.state = {
-      buttonText: isBookmarked ? 'Saved' : 'Save',
-    };
+  const mouseOut = (_e) => {
+    setButtonText(isBookmarked ? 'Saved' : 'Save');
+  };
+
+  const handleClick = (_e) => {
+    onClick(_e);
+    setButtonText(isBookmarked ? 'Save' : 'Saved');
+    setIsBookmarked((prevState) => !prevState);
+  };
+
+  if (article.class_name === 'Article' && saveable) {
+    return (
+      <button
+        type="button"
+        id={`article-save-button-${article.id}`}
+        className={`crayons-btn crayons-btn--s ${
+          isBookmarked ? 'crayons-btn--ghost' : 'crayons-btn--secondary'
+        }`}
+        data-initial-feed
+        data-reactable-id={article.id}
+        onClick={handleClick}
+        onMouseMove={mouseMove}
+        onFocus={mouseMove}
+        onMouseout={mouseOut}
+        onBlur={mouseOut}
+      >
+        {buttonText}
+      </button>
+    );
+  }
+  if (article.class_name === 'User') {
+    return (
+      <button
+        type="button"
+        className="crayons-btn crayons-btn--secondary fs-s"
+        data-info={`{"id":${article.id},"className":"User"}`}
+        data-follow-action-button
+      >
+        &nbsp;
+      </button>
+    );
   }
 
-  render() {
-    const { buttonText } = this.state;
-    const { article, isBookmarked, onClick, saveable = true } = this.props;
-
-    const mouseMove = (_e) => {
-      this.setState({ buttonText: isBookmarked ? 'Unsave' : 'Save' });
-    };
-
-    const mouseOut = (_e) => {
-      this.setState({ buttonText: isBookmarked ? 'Saved' : 'Save' });
-    };
-
-    const handleClick = (_e) => {
-      onClick(_e);
-      this.setState({
-        buttonText: isBookmarked ? 'Save' : 'Saved',
-        isBookmarked: !isBookmarked,
-      });
-    };
-
-    if (article.class_name === 'Article' && saveable) {
-      return (
-        <button
-          type="button"
-          id={`article-save-button-${article.id}`}
-          className={`crayons-btn crayons-btn--s ${
-            isBookmarked ? 'crayons-btn--ghost' : 'crayons-btn--secondary'
-          }`}
-          data-initial-feed
-          data-reactable-id={article.id}
-          onClick={handleClick}
-          onMouseMove={mouseMove}
-          onFocus={mouseMove}
-          onMouseout={mouseOut}
-          onBlur={mouseOut}
-        >
-          {buttonText}
-        </button>
-      );
-    }
-    if (article.class_name === 'User') {
-      return (
-        <button
-          type="button"
-          className="crayons-btn crayons-btn--secondary fs-s"
-          data-info={`{"id":${article.id},"className":"User"}`}
-          data-follow-action-button
-        >
-          &nbsp;
-        </button>
-      );
-    }
-
-    return null;
-  }
-}
+  return null;
+};
 
 SaveButton.propTypes = {
   article: articlePropTypes.isRequired,