From 5fcab879346e4df4a5c8870646edffd11c5c603a Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Fri, 16 Feb 2024 11:25:08 +0500
Subject: [PATCH] [MM-56846] Convert `./components/analytics/table_chart.tsx`
 from Class Component to Function Component (#26237)

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

diff --git a/webapp/channels/src/components/analytics/table_chart.tsx b/webapp/channels/src/components/analytics/table_chart.tsx
index 1377d48bf5..c0c7ac1319 100644
--- a/webapp/channels/src/components/analytics/table_chart.tsx
+++ b/webapp/channels/src/components/analytics/table_chart.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
@@ -18,50 +18,47 @@ type Props = {
     data: TableItem[];
 }
 
-export default class TableChart extends React.PureComponent<Props> {
-    public render() {
-        return (
-            <div className='col-sm-6'>
-                <div className='total-count recent-active-users'>
-                    <div className='title'>
-                        {this.props.title}
-                    </div>
-                    <div className='content'>
-                        <table>
-                            <tbody>
-                                {
-                                    this.props.data.map((item) => {
-                                        const tooltip = (
-                                            <Tooltip id={'tip-table-entry-' + item.name}>
-                                                {item.tip}
-                                            </Tooltip>
-                                        );
-
-                                        return (
-                                            <tr key={'table-entry-' + item.name}>
-                                                <td>
-                                                    <OverlayTrigger
-                                                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                                                        placement='top'
-                                                        overlay={tooltip}
-                                                    >
-                                                        <time>
-                                                            {item.name}
-                                                        </time>
-                                                    </OverlayTrigger>
-                                                </td>
-                                                <td>
-                                                    {item.value}
-                                                </td>
-                                            </tr>
-                                        );
-                                    })
-                                }
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
+const TableChart = ({
+    title,
+    data,
+}: Props) => (
+    <div className='col-sm-6'>
+        <div className='total-count recent-active-users'>
+            <div className='title'>
+                {title}
             </div>
-        );
-    }
-}
+            <div className='content'>
+                <table>
+                    <tbody>
+                        {
+                            data.map((item) => (
+                                <tr key={'table-entry-' + item.name}>
+                                    <td>
+                                        <OverlayTrigger
+                                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                                            placement='top'
+                                            overlay={(
+                                                <Tooltip id={'tip-table-entry-' + item.name}>
+                                                    {item.tip}
+                                                </Tooltip>
+                                            )}
+                                        >
+                                            <time>
+                                                {item.name}
+                                            </time>
+                                        </OverlayTrigger>
+                                    </td>
+                                    <td>
+                                        {item.value}
+                                    </td>
+                                </tr>
+                            ))
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+);
+
+export default memo(TableChart);