From bf4e7143f21f17e3b4c0d8917441e1ddda2b8f7c Mon Sep 17 00:00:00 2001
From: Treycos <maxime.poitevin@protonmail.com>
Date: Thu, 15 Aug 2024 17:20:40 +0200
Subject: [PATCH] Refactoring: Spinner button component

---
 frontend/src/Components/Link/SpinnerButton.js | 58 -------------------
 .../src/Components/Link/SpinnerButton.tsx     | 40 +++++++++++++
 2 files changed, 40 insertions(+), 58 deletions(-)
 delete mode 100644 frontend/src/Components/Link/SpinnerButton.js
 create mode 100644 frontend/src/Components/Link/SpinnerButton.tsx

diff --git a/frontend/src/Components/Link/SpinnerButton.js b/frontend/src/Components/Link/SpinnerButton.js
deleted file mode 100644
index 09f11499b..000000000
--- a/frontend/src/Components/Link/SpinnerButton.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
-import Button from './Button';
-import styles from './SpinnerButton.css';
-
-function SpinnerButton(props) {
-  const {
-    className,
-    isSpinning,
-    isDisabled,
-    spinnerIcon,
-    children,
-    ...otherProps
-  } = props;
-
-  return (
-    <Button
-      className={classNames(
-        className,
-        styles.button,
-        isSpinning && styles.isSpinning
-      )}
-      isDisabled={isDisabled || isSpinning}
-      {...otherProps}
-    >
-      <span className={styles.spinnerContainer}>
-        <Icon
-          className={styles.spinner}
-          name={spinnerIcon}
-          isSpinning={true}
-        />
-      </span>
-
-      <span className={styles.label}>
-        {children}
-      </span>
-    </Button>
-  );
-}
-
-SpinnerButton.propTypes = {
-  ...Button.Props,
-  className: PropTypes.string.isRequired,
-  isSpinning: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool,
-  spinnerIcon: PropTypes.object.isRequired,
-  children: PropTypes.node
-};
-
-SpinnerButton.defaultProps = {
-  className: styles.button,
-  spinnerIcon: icons.SPINNER
-};
-
-export default SpinnerButton;
diff --git a/frontend/src/Components/Link/SpinnerButton.tsx b/frontend/src/Components/Link/SpinnerButton.tsx
new file mode 100644
index 000000000..521c60a3d
--- /dev/null
+++ b/frontend/src/Components/Link/SpinnerButton.tsx
@@ -0,0 +1,40 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React from 'react';
+import Icon from 'Components/Icon';
+import { icons } from 'Helpers/Props';
+import Button, { ButtonProps } from './Button';
+import styles from './SpinnerButton.css';
+
+export interface SpinnerButtonProps extends ButtonProps {
+  isSpinning: boolean;
+  isDisabled?: boolean;
+  spinnerIcon?: FontAwesomeIconProps['icon'];
+}
+
+export default function SpinnerButton({
+  className = styles.button,
+  isSpinning,
+  isDisabled,
+  spinnerIcon = icons.SPINNER,
+  children,
+  ...otherProps
+}: SpinnerButtonProps) {
+  return (
+    <Button
+      className={classNames(
+        className,
+        styles.button,
+        isSpinning && styles.isSpinning
+      )}
+      isDisabled={isDisabled || isSpinning}
+      {...otherProps}
+    >
+      <span className={styles.spinnerContainer}>
+        <Icon className={styles.spinner} name={spinnerIcon} isSpinning={true} />
+      </span>
+
+      <span className={styles.label}>{children}</span>
+    </Button>
+  );
+}