Reduce memo usage where possible

CORL-1365
coralproject · Nov 23, 2020 · f7a207e · f7a207e
1 parent afb17f5
commit f7a207e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 49 deletions.
diff --git a/src/core/client/admin/components/UserStatus/BanModal.tsx b/src/core/client/admin/components/UserStatus/BanModal.tsx
@@ -59,17 +59,11 @@ const BanModal: FunctionComponent<Props> = ({
     );
   }, [getMessage, username]);
 
-  const isSiteMod = useMemo(() => {
-    if (
-      moderationScopesEnabled &&
-      viewerScopes.role === GQLUSER_ROLE.MODERATOR &&
-      viewerScopes.sites &&
-      viewerScopes.sites?.length > 0
-    ) {
-      return true;
-    }
-    return false;
-  }, [moderationScopesEnabled, viewerScopes.role, viewerScopes.sites]);
+  const isSiteMod =
+    !!moderationScopesEnabled &&
+    viewerScopes.role === GQLUSER_ROLE.MODERATOR &&
+    !!viewerScopes.sites &&
+    viewerScopes.sites?.length > 0;
 
   const onFormSubmit = useCallback(
     (input) => {

diff --git a/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx b/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
@@ -1,9 +1,4 @@
-import React, {
-  FunctionComponent,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import React, { FunctionComponent, useCallback, useState } from "react";
 import { graphql } from "react-relay";
 
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
@@ -58,12 +53,9 @@ const UserStatusChangeContainer: FunctionComponent<Props> = ({
   const [showSuspendSuccess, setShowSuspendSuccess] = useState<boolean>(false);
   const [showWarnSuccess, setShowWarnSuccess] = useState<boolean>(false);
 
-  const moderationScopesEnabled = useMemo(
-    () =>
-      settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
-      settings.multisite,
-    [settings.featureFlags, settings.multisite]
-  );
+  const moderationScopesEnabled =
+    settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
+    settings.multisite;
 
   const handleWarn = useCallback(() => {
     if (user.status.warning.active) {

diff --git a/src/core/client/admin/components/UserStatus/UserStatusSitesListContainer.tsx b/src/core/client/admin/components/UserStatus/UserStatusSitesListContainer.tsx
@@ -1,10 +1,5 @@
 import { Localized } from "@fluent/react/compat";
-import React, {
-  FunctionComponent,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import React, { FunctionComponent, useCallback, useState } from "react";
 import { useField } from "react-final-form";
 import { graphql, RelayPaginationProp } from "react-relay";
 
@@ -72,22 +67,16 @@ const UserStatusSitesListContainer: FunctionComponent<Props> = ({
   relay,
   viewerScopes,
 }) => {
-  const viewerIsScoped = useMemo(() => {
-    return viewerScopes.sites && viewerScopes.sites.length > 0;
-  }, [viewerScopes]);
+  const viewerIsScoped = !!viewerScopes.sites && viewerScopes.sites.length > 0;
+  const viewerIsSiteMod =
+    viewerScopes.role === GQLUSER_ROLE.MODERATOR && viewerIsScoped;
   const [showSites, setShowSites] = useState<boolean>(!!viewerIsScoped);
+  const sites = viewerIsSiteMod
+    ? viewerScopes.sites || []
+    : query?.sites.edges.map((edge) => edge.node) || [];
 
   const { input: selectedIDsInput } = useField<string[]>("selectedIDs");
-  const sites = useMemo(() => {
-    if (
-      viewerScopes.role === GQLUSER_ROLE.MODERATOR &&
-      viewerScopes.sites &&
-      viewerScopes.sites.length > 0
-    ) {
-      return viewerScopes.sites || [];
-    }
-    return query?.sites.edges.map((edge) => edge.node) || [];
-  }, [query?.sites.edges, viewerScopes.role, viewerScopes.sites]);
+
   const [loadMore, isLoadingMore] = useLoadMore(relay, 1);
   const [, isRefetching] = useRefetch<
     UserStatusSitesListContainerPaginationQueryVariables

diff --git a/src/core/client/stream/tabs/Comments/Comment/UserBanPopover/UserBanPopoverContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserBanPopover/UserBanPopoverContainer.tsx
@@ -1,6 +1,6 @@
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import React, { FunctionComponent, useCallback, useMemo } from "react";
+import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
 
 import { useCoralContext } from "coral-framework/lib/bootstrap";
@@ -38,12 +38,9 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
   const banUser = useMutation(BanUserMutation);
   const { localeBundles } = useCoralContext();
 
-  const moderationScopesEnabled = useMemo(
-    () =>
-      settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
-      settings.multisite,
-    [settings]
-  );
+  const moderationScopesEnabled =
+    settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
+    settings.multisite;
 
   const onBan = useCallback(() => {
     void banUser({