From 2184876c77e99a3d8efb16f33abd8612203a4509 Mon Sep 17 00:00:00 2001
From: ludvigbolin <57351161+ludvigbolin@users.noreply.github.com>
Date: Fri, 17 Nov 2023 10:10:00 +0100
Subject: [PATCH] [MM-55335] Convert
 ./components/admin_console/filter/filter_checkbox.tsx from Class Component to
 Function Component (#25416)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* migrate filter_checkbox to function from class component

* Update webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* adjust after feedback

* adjust input element to not have conditional rendering

* Revert "adjust input element to not have conditional rendering"

This reverts commit 9d252eb995a168124d63451be83f0ef1387075b1.

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../admin_console/filter/filter_checkbox.tsx  | 71 ++++++++++---------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx b/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx
index 32ffef2625..4327748cca 100644
--- a/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx
+++ b/webapp/channels/src/components/admin_console/filter/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 = {
     name: string;
@@ -10,44 +10,45 @@ type Props = {
     updateOption: (checked: boolean, name: string) => void;
 };
 
-class FilterCheckbox extends React.PureComponent<Props> {
-    toggleOption = (e: React.MouseEvent) => {
+function FilterCheckbox({
+    name,
+    checked,
+    label,
+    updateOption,
+}: Props) {
+    const toggleOption = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        const {checked, name, updateOption} = this.props;
         updateOption(!checked, name);
-    };
+    }, [name, checked, updateOption]);
 
-    render() {
-        const {name, checked, label} = this.props;
-        return (
-            <div
-                className='FilterList_checkbox'
-                onClick={this.toggleOption}
-            >
-                <label>
-                    {checked &&
-                        <input
-                            type='checkbox'
-                            id={name}
-                            name={name}
-                            defaultChecked={true}
-                        />
-                    }
+    return (
+        <div
+            className='FilterList_checkbox'
+            onClick={toggleOption}
+        >
+            <label>
+                {checked &&
+                    <input
+                        type='checkbox'
+                        id={name}
+                        name={name}
+                        defaultChecked={true}
+                    />
+                }
 
-                    {!checked &&
-                        <input
-                            type='checkbox'
-                            id={name}
-                            name={name}
-                            defaultChecked={false}
-                        />
-                    }
-                    {label}
-                </label>
-            </div>
-        );
-    }
+                {!checked &&
+                    <input
+                        type='checkbox'
+                        id={name}
+                        name={name}
+                        defaultChecked={false}
+                    />
+                }
+                {label}
+            </label>
+        </div>
+    );
 }
 
-export default FilterCheckbox;
+export default React.memo(FilterCheckbox);