From eca13a947beb8d9a63053f831953e032b451a688 Mon Sep 17 00:00:00 2001
From: Thomas Brq <71637888+thomasbrq@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:24:12 +0100
Subject: [PATCH] Convert class to function component (#25769)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../components/analytics/statistic_count.tsx  | 81 ++++++++++---------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/webapp/channels/src/components/analytics/statistic_count.tsx b/webapp/channels/src/components/analytics/statistic_count.tsx
index 75fb6885df..e6c8ce9391 100644
--- a/webapp/channels/src/components/analytics/statistic_count.tsx
+++ b/webapp/channels/src/components/analytics/statistic_count.tsx
@@ -15,47 +15,54 @@ type Props = {
     status?: 'warning' | 'error';
 }
 
-export default class StatisticCount extends React.PureComponent<Props> {
-    public render(): JSX.Element {
-        const loading = (
-            <FormattedMessage
-                id='analytics.chart.loading'
-                defaultMessage='Loading...'
-            />
-        );
+const StatisticCount = ({
+    title,
+    icon,
+    count,
+    id,
+    children,
+    status,
+}: Props) => {
+    const loading = (
+        <FormattedMessage
+            id='analytics.chart.loading'
+            defaultMessage='Loading...'
+        />
+    );
 
-        return (
-            <div className='grid-statistics__card'>
+    return (
+        <div className='grid-statistics__card'>
+            <div
+                className={classNames({
+                    'total-count': true,
+                    'total-count--has-message': Boolean(status),
+                })}
+            >
                 <div
+                    data-testid={`${id}Title`}
                     className={classNames({
-                        'total-count': true,
-                        'total-count--has-message': Boolean(this.props.status),
+                        title: true,
+                        'team_statistics--warning': status === 'warning',
+                        'team_statistics--error': status === 'error',
                     })}
                 >
-                    <div
-                        data-testid={`${this.props.id}Title`}
-                        className={classNames({
-                            title: true,
-                            'team_statistics--warning': this.props.status === 'warning',
-                            'team_statistics--error': this.props.status === 'error',
-                        })}
-                    >
-                        {this.props.title}
-                        <i className={'fa ' + this.props.icon}/>
-                    </div>
-                    <div
-                        data-testid={this.props.id}
-                        className={classNames({
-                            content: true,
-                            'team_statistics--warning': this.props.status === 'warning',
-                            'team_statistics--error': this.props.status === 'error',
-                        })}
-                    >
-                        {typeof this.props.count === 'undefined' || isNaN(this.props.count) ? loading : this.props.count}
-                    </div>
+                    {title}
+                    <i className={'fa ' + icon}/>
+                </div>
+                <div
+                    data-testid={id}
+                    className={classNames({
+                        content: true,
+                        'team_statistics--warning': status === 'warning',
+                        'team_statistics--error': status === 'error',
+                    })}
+                >
+                    {typeof count === 'undefined' || isNaN(count) ? loading : count}
                 </div>
-                {this.props.children}
             </div>
-        );
-    }
-}
+            {children}
+        </div>
+    );
+};
+
+export default React.memo(StatisticCount);