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 React, {memo, useCallback, useState} from 'react';
-import type {MouseEvent} 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 = {
+const RemoveFileSetting: FC<Props> = ({
-    removing: boolean;
+    id,
-}
+    label,
+    helpText,
+    removeButtonText,
+    removingText,
+    fileName,
+    onSubmit,
+    disabled,
+}) => {
+    const [removing, setRemoving] = useState(false);
 
-export default class RemoveFileSetting extends PureComponent<Props, State> {
+    const handleRemove = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            removing: false,
-        };
-    }
-
-    handleRemove = (e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
 
-        this.setState({removing: true});
+        setRemoving(true);
-        this.props.onSubmit(this.props.id, () => {
+        onSubmit(id, () => {
-            this.setState({removing: false});
+            setRemoving(false);
         });
-    };
+    }, [id, onSubmit]);
 
-    render() {
     return (
         <Setting
-                label={this.props.label}
+            label={label}
-                helpText={this.props.helpText}
+            helpText={helpText}
-                inputId={this.props.id}
+            inputId={id}
         >
             <div>
                 <div className='help-text remove-filename'>
-                        {this.props.fileName}
+                    {fileName}
                 </div>
                 <button
                     type='button'
                     className='btn btn-danger'
-                        onClick={this.handleRemove}
+                    onClick={handleRemove}
-                        disabled={this.props.disabled}
+                    disabled={disabled}
                 >
-                        {this.state.removing && (
+                    {removing && (
                         <>
                             <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
-                                {this.props.removingText}
+                            {removingText}
                         </>)}
-                        {!this.state.removing && this.props.removeButtonText}
+                    {!removing && removeButtonText}
                 </button>
             </div>
         </Setting>
     );
-    }
+};
-}
+
+export default memo(RemoveFileSetting);