[MM-56293] Convert ./components/admin_console/filter/filter_list.tsx from Class Component to Function Component (#25765)

webapp/channels/src/components/admin_console/filter/filter_list.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, useCallback} from 'react';
 
 import type {FilterOption, FilterValues} from './filter';
 import FilterCheckbox from './filter_checkbox';
@@ -14,51 +14,52 @@ type Props = {
     updateValues: (values: FilterValues, optionKey: string) => void;
 }
 
-class FilterList extends React.PureComponent<Props> {
+const FilterList = ({
-    updateOption = async (value: boolean, key: string) => {
+    option,
+    optionKey,
+    updateValues,
+}: Props) => {
+    const updateOption = useCallback(async (value: boolean, key: string) => {
         const values = {
-            ...this.props.option.values,
+            ...option.values,
             [key]: {
-                ...this.props.option.values[key],
+                ...option.values[key],
                 value,
             },
         };
-        await this.props.updateValues(values, this.props.optionKey);
+        await updateValues(values, optionKey);
-    };
+    }, [option.values, optionKey, updateValues]);
 
-    render() {
+    const valuesToRender = option.keys.map((optionKey: string, index: number) => {
-        const {option} = this.props;
+        const currentValue = option.values[optionKey];
-        const valuesToRender = option.keys.map((optionKey: string, index: number) => {
+        const {value, name} = currentValue;
-            const currentValue = option.values[optionKey];
+        const FilterItem = option.type || FilterCheckbox;
-            const {value, name} = currentValue;
-            const FilterItem = option.type || FilterCheckbox;
-
-            return (
-                <div
-                    key={index}
-                    className='FilterList_item'
-                >
-                    <FilterItem
-                        key={index}
-                        name={optionKey}
-                        checked={value}
-                        label={name}
-                        updateOption={this.updateOption}
-                    />
-                </div>
-            );
-        });
 
         return (
-            <div className='FilterList'>
+            <div
-                <div className='FilterList_name'>
+                key={index}
-                    {option.name}
+                className='FilterList_item'
-                </div>
+            >
-
+                <FilterItem
-                {valuesToRender}
+                    key={index}
+                    name={optionKey}
+                    checked={value}
+                    label={name}
+                    updateOption={updateOption}
+                />
             </div>
         );
-    }
+    });
-}
 
-export default FilterList;
+    return (
+        <div className='FilterList'>
+            <div className='FilterList_name'>
+                {option.name}
+            </div>
+
+            {valuesToRender}
+        </div>
+    );
+};
+
+export default memo(FilterList);