From 13aaf6d3633ce4c2ec32fc6085157b6d024c10ad Mon Sep 17 00:00:00 2001
From: sjcode99 <52974372+sjcode99@users.noreply.github.com>
Date: Mon, 23 Oct 2023 14:15:25 +0530
Subject: [PATCH] =?UTF-8?q?Convert=20./components/permissions=5Fgates/any?=
 =?UTF-8?q?=5Fteam=5Fpermission=5Fgate/any=5Ft=E2=80=A6=20(#24970)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Convert ./components/permissions_gates/any_team_permission_gate/any_team_permission_gate.tsx

* React memo added

* linting issue resolved

---------

Co-authored-by: sjcode99 <misuraj2611@gmail.com>
---
 .../any_team_permission_gate.test.tsx.snap    | 75 ++++++++++---------
 .../any_team_permission_gate.tsx              | 23 +++---
 2 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/webapp/channels/src/components/permissions_gates/any_team_permission_gate/__snapshots__/any_team_permission_gate.test.tsx.snap b/webapp/channels/src/components/permissions_gates/any_team_permission_gate/__snapshots__/any_team_permission_gate.test.tsx.snap
index b2e12f0060..ca7f6a145d 100644
--- a/webapp/channels/src/components/permissions_gates/any_team_permission_gate/__snapshots__/any_team_permission_gate.test.tsx.snap
+++ b/webapp/channels/src/components/permissions_gates/any_team_permission_gate/__snapshots__/any_team_permission_gate.test.tsx.snap
@@ -13,24 +13,25 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     permissions={
       Array [
         "invalid_permission",
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={false}
-      invert={false}
       permissions={
         Array [
           "invalid_permission",
         ]
       }
-    />
-  </Connect(AnyTeamPermissionGate)>
+    >
+      <p />
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -47,7 +48,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     permissions={
       Array [
         "test_team_permission",
@@ -55,10 +56,9 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={true}
-      invert={false}
       permissions={
         Array [
           "test_team_permission",
@@ -69,8 +69,8 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       <p>
         Valid permission (shown)
       </p>
-    </AnyTeamPermissionGate>
-  </Connect(AnyTeamPermissionGate)>
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -87,17 +87,16 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     permissions={
       Array [
         "test_team_permission",
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={true}
-      invert={false}
       permissions={
         Array [
           "test_team_permission",
@@ -107,8 +106,8 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       <p>
         Valid permission (shown)
       </p>
-    </AnyTeamPermissionGate>
-  </Connect(AnyTeamPermissionGate)>
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -125,7 +124,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     invert={true}
     permissions={
       Array [
@@ -133,7 +132,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={true}
       invert={true}
@@ -142,8 +141,10 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
           "test_team_permission",
         ]
       }
-    />
-  </Connect(AnyTeamPermissionGate)>
+    >
+      <p />
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -160,17 +161,16 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     permissions={
       Array [
         "test_system_permission",
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={true}
-      invert={false}
       permissions={
         Array [
           "test_system_permission",
@@ -180,8 +180,8 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       <p>
         Valid permission (shown)
       </p>
-    </AnyTeamPermissionGate>
-  </Connect(AnyTeamPermissionGate)>
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -198,17 +198,16 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     permissions={
       Array [
         "other_permission",
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={true}
-      invert={false}
       permissions={
         Array [
           "other_permission",
@@ -218,8 +217,8 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       <p>
         Valid permission (shown)
       </p>
-    </AnyTeamPermissionGate>
-  </Connect(AnyTeamPermissionGate)>
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -236,7 +235,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     invert={true}
     permissions={
       Array [
@@ -244,7 +243,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={true}
       invert={true}
@@ -253,8 +252,10 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
           "other_permission",
         ]
       }
-    />
-  </Connect(AnyTeamPermissionGate)>
+    >
+      <p />
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -271,7 +272,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
     }
   }
 >
-  <Connect(AnyTeamPermissionGate)
+  <Connect(Component)
     invert={true}
     permissions={
       Array [
@@ -279,7 +280,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       ]
     }
   >
-    <AnyTeamPermissionGate
+    <Memo(AnyTeamPermissionGate)
       dispatch={[Function]}
       hasPermission={false}
       invert={true}
@@ -292,7 +293,7 @@ exports[`components/permissions_gates TeamPermissionGate should match snapshot w
       <p>
         Invalid permission but inverted (shown)
       </p>
-    </AnyTeamPermissionGate>
-  </Connect(AnyTeamPermissionGate)>
+    </Memo(AnyTeamPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
diff --git a/webapp/channels/src/components/permissions_gates/any_team_permission_gate/any_team_permission_gate.tsx b/webapp/channels/src/components/permissions_gates/any_team_permission_gate/any_team_permission_gate.tsx
index 309890e06b..43095bd953 100644
--- a/webapp/channels/src/components/permissions_gates/any_team_permission_gate/any_team_permission_gate.tsx
+++ b/webapp/channels/src/components/permissions_gates/any_team_permission_gate/any_team_permission_gate.tsx
@@ -18,23 +18,20 @@ export type Props = {
     /**
      * Invert the permission (used for else)
      */
-    invert: boolean;
+    invert?: boolean;
 
     /**
      * Content protected by the permissions gate
      */
     children: React.ReactNode;
-}
+};
 
-export default class AnyTeamPermissionGate extends React.PureComponent<Props> {
-    static defaultProps = {
-        invert: false,
-    };
+const AnyTeamPermissionGate = ({hasPermission, children, invert = false}: Props) => {
+    return (
+        <>
+            {hasPermission === invert ? null : children}
+        </>
+    );
+};
 
-    render() {
-        if (this.props.hasPermission !== this.props.invert) {
-            return this.props.children;
-        }
-        return null;
-    }
-}
+export default React.memo(AnyTeamPermissionGate);