From ec0bae440d859926a1239e820fd6fdc0afadab01 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Mon, 25 Dec 2023 19:13:45 +0530
Subject: [PATCH 1/3] convert to TS and fixes the issue

---
 src/components/OptionsListSkeletonView.js  | 114 ---------------------
 src/components/OptionsListSkeletonView.tsx |  83 +++++++++++++++
 2 files changed, 83 insertions(+), 114 deletions(-)
 delete mode 100644 src/components/OptionsListSkeletonView.js
 create mode 100644 src/components/OptionsListSkeletonView.tsx

diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js
deleted file mode 100644
index 2c46ac5d4d7a..000000000000
--- a/src/components/OptionsListSkeletonView.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import {Circle, Rect} from 'react-native-svg';
-import compose from '@libs/compose';
-import CONST from '@src/CONST';
-import SkeletonViewContentLoader from './SkeletonViewContentLoader';
-import withTheme, {withThemePropTypes} from './withTheme';
-import withThemeStyles, {withThemeStylesPropTypes} from './withThemeStyles';
-
-const propTypes = {
-    /** Whether to animate the skeleton view */
-    shouldAnimate: PropTypes.bool,
-    ...withThemeStylesPropTypes,
-    ...withThemePropTypes,
-};
-
-const defaultTypes = {
-    shouldAnimate: true,
-};
-
-class OptionsListSkeletonView extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            skeletonViewItems: [],
-        };
-    }
-
-    /**
-     * Generate the skeleton view items.
-     *
-     * @param {Number} numItems
-     */
-    generateSkeletonViewItems(numItems) {
-        if (this.state.skeletonViewItems.length === numItems) {
-            return;
-        }
-
-        if (this.state.skeletonViewItems.length > numItems) {
-            this.setState((prevState) => ({
-                skeletonViewItems: prevState.skeletonViewItems.slice(0, numItems),
-            }));
-            return;
-        }
-
-        const skeletonViewItems = [];
-        for (let i = this.state.skeletonViewItems.length; i < numItems; i++) {
-            const step = i % 3;
-            let lineWidth;
-            switch (step) {
-                case 0:
-                    lineWidth = '100%';
-                    break;
-                case 1:
-                    lineWidth = '50%';
-                    break;
-                default:
-                    lineWidth = '25%';
-            }
-            skeletonViewItems.push(
-                <SkeletonViewContentLoader
-                    key={`skeletonViewItems${i}`}
-                    animate={this.props.shouldAnimate}
-                    height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
-                    backgroundColor={this.props.theme.skeletonLHNIn}
-                    foregroundColor={this.props.theme.skeletonLHNOut}
-                    style={this.props.themeStyles.mr5}
-                >
-                    <Circle
-                        cx="40"
-                        cy="32"
-                        r="20"
-                    />
-                    <Rect
-                        x="72"
-                        y="18"
-                        width="20%"
-                        height="8"
-                    />
-                    <Rect
-                        x="72"
-                        y="38"
-                        width={lineWidth}
-                        height="8"
-                    />
-                </SkeletonViewContentLoader>,
-            );
-        }
-
-        this.setState((prevState) => ({
-            skeletonViewItems: [...prevState.skeletonViewItems, ...skeletonViewItems],
-        }));
-    }
-
-    render() {
-        return (
-            <View
-                style={[this.props.themeStyles.flex1, this.props.themeStyles.overflowHidden]}
-                onLayout={(event) => {
-                    const numItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT);
-                    this.generateSkeletonViewItems(numItems);
-                }}
-            >
-                <View>{this.state.skeletonViewItems}</View>
-            </View>
-        );
-    }
-}
-
-OptionsListSkeletonView.propTypes = propTypes;
-OptionsListSkeletonView.defaultProps = defaultTypes;
-
-export default compose(withThemeStyles, withTheme)(OptionsListSkeletonView);
diff --git a/src/components/OptionsListSkeletonView.tsx b/src/components/OptionsListSkeletonView.tsx
new file mode 100644
index 000000000000..9f60f1e5fc40
--- /dev/null
+++ b/src/components/OptionsListSkeletonView.tsx
@@ -0,0 +1,83 @@
+import React, {useMemo, useState} from 'react';
+import {View} from 'react-native';
+import {Circle, Rect} from 'react-native-svg';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import SkeletonViewContentLoader from './SkeletonViewContentLoader';
+
+type OptionsListSkeletonViewProps = {
+    shouldAnimate?: boolean;
+};
+
+function OptionsListSkeletonView({shouldAnimate = true}: OptionsListSkeletonViewProps) {
+    const theme = useTheme();
+    const themeStyles = useThemeStyles();
+
+    const [numItems, setNumItems] = useState(0);
+    const skeletonViewItems = useMemo(() => {
+        const items = [];
+        for (let i = 0; i < numItems; i++) {
+            const step = i % 3;
+            let lineWidth;
+            switch (step) {
+                case 0:
+                    lineWidth = '100%';
+                    break;
+                case 1:
+                    lineWidth = '50%';
+                    break;
+                default:
+                    lineWidth = '25%';
+            }
+            items.push(
+                <SkeletonViewContentLoader
+                    key={`skeletonViewItems${i}`}
+                    animate={shouldAnimate}
+                    height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
+                    backgroundColor={theme.skeletonLHNIn}
+                    foregroundColor={theme.skeletonLHNOut}
+                    style={themeStyles.mr5}
+                >
+                    <Circle
+                        cx="40"
+                        cy="32"
+                        r="20"
+                    />
+                    <Rect
+                        x="72"
+                        y="18"
+                        width="20%"
+                        height="8"
+                    />
+                    <Rect
+                        x="72"
+                        y="38"
+                        width={lineWidth}
+                        height="8"
+                    />
+                </SkeletonViewContentLoader>,
+            );
+        }
+        return items;
+    }, [numItems, shouldAnimate, theme, themeStyles]);
+
+    return (
+        <View
+            style={[themeStyles.flex1, themeStyles.overflowHidden]}
+            onLayout={(event) => {
+                const newNumItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT);
+                if (newNumItems === numItems) {
+                    return;
+                }
+                setNumItems(newNumItems);
+            }}
+        >
+            <View>{skeletonViewItems}</View>
+        </View>
+    );
+}
+
+OptionsListSkeletonView.displayName = 'OptionsListSkeletonView';
+
+export default OptionsListSkeletonView;

From 7c667b5af49f74f4346e4a92def786fff21d8a89 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com>
Date: Wed, 27 Dec 2023 23:49:25 +0530
Subject: [PATCH 2/3] Update src/components/OptionsListSkeletonView.tsx

Co-authored-by: Vinh Hoang <hoangzinhvn@gmail.com>
---
 src/components/OptionsListSkeletonView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/OptionsListSkeletonView.tsx b/src/components/OptionsListSkeletonView.tsx
index 9f60f1e5fc40..3e3fd9f97fca 100644
--- a/src/components/OptionsListSkeletonView.tsx
+++ b/src/components/OptionsListSkeletonView.tsx
@@ -56,7 +56,7 @@ function OptionsListSkeletonView({shouldAnimate = true}: OptionsListSkeletonView
                         width={lineWidth}
                         height="8"
                     />
-                </SkeletonViewContentLoader>,
+                </SkeletonViewContentLoader>
             );
         }
         return items;

From 48de1e64cfff50b0e7698243637b52b19b5ef366 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 28 Dec 2023 00:11:37 +0530
Subject: [PATCH 3/3] fix lint

---
 src/components/OptionsListSkeletonView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/OptionsListSkeletonView.tsx b/src/components/OptionsListSkeletonView.tsx
index 3e3fd9f97fca..9f60f1e5fc40 100644
--- a/src/components/OptionsListSkeletonView.tsx
+++ b/src/components/OptionsListSkeletonView.tsx
@@ -56,7 +56,7 @@ function OptionsListSkeletonView({shouldAnimate = true}: OptionsListSkeletonView
                         width={lineWidth}
                         height="8"
                     />
-                </SkeletonViewContentLoader>
+                </SkeletonViewContentLoader>,
             );
         }
         return items;