[MM-56005] Convert `./components/admin_console/permission_schemes_set…

…tings/permission_team_scheme_settings/team_in_list/team_in_list.tsx` from Class Component to Function Component (mattermost#25646) * [MM-56005] Convert `./components/admin_console/permission_schemes_settings/permission_team_scheme_settings/team_in_list/team_in_list.tsx` from Class Component to Function Component * refactor: use classNames to apply class --------- Co-authored-by: Mattermost Build <[email protected]>
devinbinnie · Dec 8, 2023 · 7afc14d · 7afc14d
1 parent a11b27d
commit 7afc14d
Showing 1 changed file with 36 additions and 33 deletions.
diff --git a/...permission_schemes_settings/permission_team_scheme_settings/team_in_list/team_in_list.tsx b/...permission_schemes_settings/permission_team_scheme_settings/team_in_list/team_in_list.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import classNames from 'classnames';
+import React, {memo, useCallback} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
@@ -16,41 +17,43 @@ type Props = {
     isDisabled: boolean;
 }
 
-export default class TeamInList extends React.PureComponent<Props> {
-    handleRemoveTeam = () => {
-        const {team, isDisabled, onRemoveTeam} = this.props;
+const TeamInList = ({
+    team,
+    isDisabled,
+    onRemoveTeam,
+}: Props) => {
+    const handleRemoveTeam = useCallback(() => {
         if (isDisabled) {
             return;
         }
         onRemoveTeam(team.id);
-    };
-
-    render() {
-        const {team, isDisabled} = this.props;
-        return (
-            <div
-                className='team'
-                key={team.id}
-            >
-                <div className='team-info-block'>
-                    <TeamIcon
-                        content={team.display_name}
-                        url={imageURLForTeam(team)}
-                    />
-                    <div className='team-data'>
-                        <div className='title'>{team.display_name}</div>
-                    </div>
+    }, [isDisabled, team.id, onRemoveTeam]);
+
+    return (
+        <div
+            className='team'
+            key={team.id}
+        >
+            <div className='team-info-block'>
+                <TeamIcon
+                    content={team.display_name}
+                    url={imageURLForTeam(team)}
+                />
+                <div className='team-data'>
+                    <div className='title'>{team.display_name}</div>
                 </div>
-                <a
-                    className={isDisabled ? 'remove disabled' : 'remove'}
-                    onClick={this.handleRemoveTeam}
-                >
-                    <FormattedMessage
-                        id='admin.permissions.teamScheme.removeTeam'
-                        defaultMessage='Remove'
-                    />
-                </a>
             </div>
-        );
-    }
-}
+            <a
+                className={classNames('remove', {disabled: isDisabled})}
+                onClick={handleRemoveTeam}
+            >
+                <FormattedMessage
+                    id='admin.permissions.teamScheme.removeTeam'
+                    defaultMessage='Remove'
+                />
+            </a>
+        </div>
+    );
+};
+
+export default memo(TeamInList);