From a64bc3af7a22279ba34a537ecd337e7c8f70ec0d Mon Sep 17 00:00:00 2001
From: Saket Kaswa <105808363+SaketKaswa20@users.noreply.github.com>
Date: Tue, 24 Oct 2023 21:23:15 +0530
Subject: [PATCH] Converted Class Component to Function Component, Solved
 #24783 (#24812)

* Converted Class Component to Function Component, Solved #24783

* Added useCallback

* Removed useState

* Wrapped TeamFilterCheckbox component with React.memo

* Added React.nemo in export line

* Tried to fix issue

* Deleted package.json and package-lock.json (Extra)

* Minor Changes

* Added Copyright Lines

* Fixed check-lint errors

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../team_filter_checkbox.tsx                  | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/filter/team_filter_dropdown/team_filter_checkbox.tsx b/webapp/channels/src/components/admin_console/filter/team_filter_dropdown/team_filter_checkbox.tsx
index 48d3a88a5c..6dfce26a5a 100644
--- a/webapp/channels/src/components/admin_console/filter/team_filter_dropdown/team_filter_checkbox.tsx
+++ b/webapp/channels/src/components/admin_console/filter/team_filter_dropdown/team_filter_checkbox.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, {useCallback} from 'react';
 
 type Props = {
     id: string;
@@ -11,36 +11,32 @@ type Props = {
     updateOption: (checked: boolean, name: string) => void;
 };
 
-class TeamFilterCheckbox extends React.PureComponent<Props> {
-    toggleOption = () => {
-        const {checked, id, updateOption} = this.props;
+const TeamFilterCheckbox = ({
+    id,
+    name,
+    checked,
+    label,
+    updateOption,
+}: Props) => {
+    const toggleOption = useCallback(() => {
         updateOption(!checked, id);
-    };
+    }, [checked, id, updateOption]);
 
-    render() {
-        const {
-            checked,
-            id,
-            label,
-            name,
-        } = this.props;
+    return (
+        <div className='TeamFilterDropdown_checkbox'>
+            <label>
+                <input
+                    type='checkbox'
+                    id={id}
+                    name={name}
+                    checked={checked}
+                    onChange={toggleOption}
+                />
 
-        return (
-            <div className='TeamFilterDropdown_checkbox'>
-                <label>
-                    <input
-                        type='checkbox'
-                        id={id}
-                        name={name}
-                        checked={checked}
-                        onChange={this.toggleOption}
-                    />
+                {label}
+            </label>
+        </div>
+    );
+};
 
-                    {label}
-                </label>
-            </div>
-        );
-    }
-}
-
-export default TeamFilterCheckbox;
+export default React.memo(TeamFilterCheckbox);