From c6feb27962f0bffa1bb898088f5bdc26854da971 Mon Sep 17 00:00:00 2001
From: Treycos <19551067+Treycos@users.noreply.github.com>
Date: Tue, 27 Aug 2024 06:41:58 +0200
Subject: [PATCH] Convert SpinnerIcon to TypeScript

(cherry picked from commit 25d9f09a43ded9dd07c6777390fc541ca5f89eeb)

Closes #10368
---
 frontend/src/Components/SpinnerIcon.js        | 34 -------------------
 frontend/src/Components/SpinnerIcon.tsx       | 21 ++++++++++++
 .../src/Helpers/Props/{icons.js => icons.ts}  |  8 ++---
 3 files changed, 24 insertions(+), 39 deletions(-)
 delete mode 100644 frontend/src/Components/SpinnerIcon.js
 create mode 100644 frontend/src/Components/SpinnerIcon.tsx
 rename frontend/src/Helpers/Props/{icons.js => icons.ts} (98%)

diff --git a/frontend/src/Components/SpinnerIcon.js b/frontend/src/Components/SpinnerIcon.js
deleted file mode 100644
index 5ae03ee66..000000000
--- a/frontend/src/Components/SpinnerIcon.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { icons } from 'Helpers/Props';
-import Icon from './Icon';
-
-function SpinnerIcon(props) {
-  const {
-    name,
-    spinningName,
-    isSpinning,
-    ...otherProps
-  } = props;
-
-  return (
-    <Icon
-      name={isSpinning ? (spinningName || name) : name}
-      isSpinning={isSpinning}
-      {...otherProps}
-    />
-  );
-}
-
-SpinnerIcon.propTypes = {
-  className: PropTypes.string,
-  name: PropTypes.object.isRequired,
-  spinningName: PropTypes.object.isRequired,
-  isSpinning: PropTypes.bool.isRequired
-};
-
-SpinnerIcon.defaultProps = {
-  spinningName: icons.SPINNER
-};
-
-export default SpinnerIcon;
diff --git a/frontend/src/Components/SpinnerIcon.tsx b/frontend/src/Components/SpinnerIcon.tsx
new file mode 100644
index 000000000..27ddadc41
--- /dev/null
+++ b/frontend/src/Components/SpinnerIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { icons } from 'Helpers/Props';
+import Icon, { IconProps } from './Icon';
+
+export interface SpinnerIconProps extends IconProps {
+  spinningName?: IconProps['name'];
+  isSpinning: Required<IconProps['isSpinning']>;
+}
+
+export default function SpinnerIcon({
+  name,
+  spinningName = icons.SPINNER,
+  ...otherProps
+}: SpinnerIconProps) {
+  return (
+    <Icon
+      name={(otherProps.isSpinning && spinningName) || name}
+      {...otherProps}
+    />
+  );
+}
diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.ts
similarity index 98%
rename from frontend/src/Helpers/Props/icons.js
rename to frontend/src/Helpers/Props/icons.ts
index 0acf73613..fda4363e2 100644
--- a/frontend/src/Helpers/Props/icons.js
+++ b/frontend/src/Helpers/Props/icons.ts
@@ -1,8 +1,6 @@
 //
 // Brands
-import {
-  faImdb as fabImdb
-} from '@fortawesome/free-brands-svg-icons';
+import { faImdb as fabImdb } from '@fortawesome/free-brands-svg-icons';
 //
 // Regular
 import {
@@ -20,7 +18,7 @@ import {
   faKeyboard as farKeyboard,
   faObjectGroup as farObjectGroup,
   faObjectUngroup as farObjectUngroup,
-  faSquare as farSquare
+  faSquare as farSquare,
 } from '@fortawesome/free-regular-svg-icons';
 //
 // Solid
@@ -118,7 +116,7 @@ import {
   faUser as fasUser,
   faUserPlus as fasUserPlus,
   faVial as fasVial,
-  faWrench as fasWrench
+  faWrench as fasWrench,
 } from '@fortawesome/free-solid-svg-icons';
 
 //