From e130a37199ba6b858f84622d9eaacc5a80646868 Mon Sep 17 00:00:00 2001
From: Muzakir Shah <mozi47.shah@gmail.com>
Date: Fri, 10 Nov 2023 14:23:11 +0500
Subject: [PATCH] Convert  status_icon_new.tsx to functional component (#24993)

* Convert  status_icon_new.tsx to functional component

* run the command run npm run fix and npm run test -- -u

* type check error fixed

* revised the changes

* Unintended changes revised.

* Revised changes

* map moved outside of component

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../src/components/status_icon_new.tsx        | 43 ++++++++-----------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/webapp/channels/src/components/status_icon_new.tsx b/webapp/channels/src/components/status_icon_new.tsx
index 34267746a7..1e5265b9ba 100644
--- a/webapp/channels/src/components/status_icon_new.tsx
+++ b/webapp/channels/src/components/status_icon_new.tsx
@@ -4,32 +4,25 @@
 import React from 'react';
 
 type Props = {
-    className: string;
-    status: string;
+    className?: string;
+    status?: string;
 }
 
-export default class StatusIconNew extends React.PureComponent<Props> {
-    static defaultProps: Props = {
-        className: '',
-        status: '',
-    };
+const statusToIconMap: { [key: string]: string } = {
+    online: 'icon-check-circle',
+    away: 'icon-clock',
+    dnd: 'icon-minus-circle',
+    default: 'icon-circle-outline',
+};
 
-    render() {
-        const {status, className} = this.props;
-
-        if (!status) {
-            return null;
-        }
-
-        let iconName = 'icon-circle-outline';
-        if (status === 'online') {
-            iconName = 'icon-check-circle';
-        } else if (status === 'away') {
-            iconName = 'icon-clock';
-        } else if (status === 'dnd') {
-            iconName = 'icon-minus-circle';
-        }
-
-        return <i className={`${iconName} ${className}`}/>;
+const StatusIconNew = ({className = '', status = ''}: Props) => {
+    if (!status) {
+        return null;
     }
-}
+
+    const iconName = statusToIconMap[status] || statusToIconMap.default;
+
+    return <i className={`${iconName} ${className}`}/>;
+};
+
+export default React.memo(StatusIconNew);