Migrate RemoveFileSetting component from class based to function based component (#24797)

* migrate RemoveFileSetting comp to function comp

* code refactored

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/remove_file_setting.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent} from 'react';
-import type {MouseEvent} from 'react';
+import React, {memo, useCallback, useState} from 'react';
+import type {FC, MouseEvent} from 'react';
 
 import Setting from './setting';
 import type {Props as SettingsProps} from './setting';
@@ -10,7 +10,7 @@ import type {Props as SettingsProps} from './setting';
 type Props = SettingsProps & {
     id: string;
     label: React.ReactNode;
-    helptext?: React.ReactNode;
+    helpText?: React.ReactNode;
     removeButtonText: React.ReactNode;
     removingText?: React.ReactNode;
     fileName: string;
@@ -18,54 +18,53 @@ type Props = SettingsProps & {
     disabled?: boolean;
 }
 
-type State = {
-    removing: boolean;
-}
+const RemoveFileSetting: FC<Props> = ({
+    id,
+    label,
+    helpText,
+    removeButtonText,
+    removingText,
+    fileName,
+    onSubmit,
+    disabled,
+}) => {
+    const [removing, setRemoving] = useState(false);
 
-export default class RemoveFileSetting extends PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            removing: false,
-        };
-    }
-
-    handleRemove = (e: MouseEvent<HTMLButtonElement>) => {
+    const handleRemove = useCallback((e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
 
-        this.setState({removing: true});
-        this.props.onSubmit(this.props.id, () => {
-            this.setState({removing: false});
+        setRemoving(true);
+        onSubmit(id, () => {
+            setRemoving(false);
         });
-    };
+    }, [id, onSubmit]);
 
-    render() {
-        return (
-            <Setting
-                label={this.props.label}
-                helpText={this.props.helpText}
-                inputId={this.props.id}
-            >
-                <div>
-                    <div className='help-text remove-filename'>
-                        {this.props.fileName}
-                    </div>
-                    <button
-                        type='button'
-                        className='btn btn-danger'
-                        onClick={this.handleRemove}
-                        disabled={this.props.disabled}
-                    >
-                        {this.state.removing && (
-                            <>
-                                <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
-                                {this.props.removingText}
-                            </>)}
-                        {!this.state.removing && this.props.removeButtonText}
-                    </button>
+    return (
+        <Setting
+            label={label}
+            helpText={helpText}
+            inputId={id}
+        >
+            <div>
+                <div className='help-text remove-filename'>
+                    {fileName}
                 </div>
-            </Setting>
-        );
-    }
-}
+                <button
+                    type='button'
+                    className='btn btn-danger'
+                    onClick={handleRemove}
+                    disabled={disabled}
+                >
+                    {removing && (
+                        <>
+                            <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                            {removingText}
+                        </>)}
+                    {!removing && removeButtonText}
+                </button>
+            </div>
+        </Setting>
+    );
+};
+
+export default memo(RemoveFileSetting);