Improve ignored commenter management

Show "you are no longer ignoring" a commenter when you choose to no longer ignore them. CORL-457
coralproject · Apr 17, 2020 · 7a1db5d · 7a1db5d
1 parent a63b18e
commit 7a1db5d
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 60 deletions.
diff --git a/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.css b/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.css
@@ -68,4 +68,26 @@
   line-height: var(--v2-line-height-5);
 
   color: var(--v2-colors-mono-500);
+
+  margin-left: var(--v2-spacing-1);
+}
+
+.removed {
+  padding-top: var(--v2-spacing-2);
+  padding-bottom: var(--v2-spacing-2);
+  padding-left: var(--v2-spacing-1);
+
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-5);
+
+  color: var(--v2-colors-mono-500);
+
+  background-color: var(--v2-colors-grey-100);
+  border-radius: var(--v2-round-corners);
+}
+
+.manageButton {
+  margin-bottom: var(--v2-spacing-2);
 }
diff --git a/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.tsx b/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.tsx
@@ -20,16 +20,58 @@ interface Props {
   viewer: ViewerData;
 }
 
+interface User {
+  id: string;
+  name: string | null;
+  removed: boolean;
+}
+
+const renderName = (name: string | null) => {
+  return (
+    <span className={cn(styles.username, CLASSES.ignoredCommenters.username)}>
+      {name}
+    </span>
+  );
+};
+
 const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
   const emitShow = useViewerEvent(ShowIgnoreUserdDialogEvent);
   const removeUserIgnore = useMutation(RemoveUserIgnoreMutation);
   const [showManage, setShowManage] = useState(false);
+  const [removed, setRemoved] = useState(new Array<User>());
   const toggleManage = useCallback(() => {
     if (!showManage) {
       emitShow();
+    } else {
+      setRemoved([]);
     }
     setShowManage(!showManage);
-  }, [showManage, setShowManage]);
+  }, [showManage, setShowManage, setRemoved]);
+  const remove = useCallback(
+    async (user: any) => {
+      await removeUserIgnore({ userID: user.id });
+      setRemoved([...removed, { id: user.id, name: user.name, removed: true }]);
+    },
+    [removeUserIgnore, removed, setRemoved]
+  );
+
+  const merged = [
+    ...viewer.ignoredUsers.map(user => {
+      return { id: user.id, name: user.username, removed: false };
+    }),
+    ...removed,
+  ];
+  const userList = merged.sort((a, b) => {
+    if (!a.name) {
+      return -1;
+    }
+    if (!b.name) {
+      return 1;
+    }
+
+    return a.name.localeCompare(b.name);
+  });
+
   return (
     <div
       data-testid="profile-account-ignoredCommenters"
@@ -64,7 +106,10 @@ const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
             color="secondary"
             upperCase
             onClick={toggleManage}
-            className={CLASSES.ignoredCommenters.manageButton}
+            className={cn(
+              styles.manageButton,
+              CLASSES.ignoredCommenters.manageButton
+            )}
           >
             Manage
           </Button>
@@ -75,41 +120,43 @@ const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
           spacing={1}
           className={cn(styles.list, CLASSES.ignoredCommenters.list)}
         >
-          {viewer.ignoredUsers.map(user => (
-            <Flex
-              key={user.id}
-              justifyContent="space-between"
-              alignItems="center"
-            >
-              <span
-                className={cn(
-                  styles.username,
-                  CLASSES.ignoredCommenters.username
-                )}
-              >
-                {user.username}
-              </span>
-              <Button
-                variant="none"
-                color="none"
-                onClick={() => removeUserIgnore({ userID: user.id })}
-                className={cn(
-                  styles.stopIgnoringButton,
-                  CLASSES.ignoredCommenters.stopIgnoreButton
-                )}
+          {userList.map(user =>
+            user.removed ? (
+              <div className={styles.removed} key={user.id}>
+                <Localized id="profile-account-ignoredCommenters-youAreNoLonger">
+                  <span>{"You are no longer ignoring "}</span>
+                </Localized>
+                {renderName(user.name)}
+              </div>
+            ) : (
+              <Flex
+                key={user.id}
+                justifyContent="space-between"
+                alignItems="center"
               >
-                <Flex justifyContent="center" alignItems="center">
-                  <Icon size="sm" className={styles.icon}>
-                    close
-                  </Icon>
-                  <Localized id="profile-account-ignoredCommenters-stopIgnoring">
-                    <span>Stop ignoring</span>
-                  </Localized>
-                </Flex>
-              </Button>
-            </Flex>
-          ))}
-          {viewer.ignoredUsers.length === 0 && (
+                {renderName(user.name)}
+                <Button
+                  variant="none"
+                  color="none"
+                  onClick={() => remove(user)}
+                  className={cn(
+                    styles.stopIgnoringButton,
+                    CLASSES.ignoredCommenters.stopIgnoreButton
+                  )}
+                >
+                  <Flex justifyContent="center" alignItems="center">
+                    <Icon size="sm" className={styles.icon}>
+                      close
+                    </Icon>
+                    <Localized id="profile-account-ignoredCommenters-stopIgnoring">
+                      <span>Stop ignoring</span>
+                    </Localized>
+                  </Flex>
+                </Button>
+              </Flex>
+            )
+          )}
+          {userList.length === 0 && (
             <Localized id="profile-account-ignoredCommenters-empty">
               <div className={styles.empty}>
                 You are not currently ignoring anyone

diff --git a/src/core/client/stream/tabs/Profile/Preferences/RemoveUserIgnoreMutation.ts b/src/core/client/stream/tabs/Profile/Preferences/RemoveUserIgnoreMutation.ts
@@ -1,5 +1,5 @@
 import { graphql } from "react-relay";
-import { Environment } from "relay-runtime";
+import { Environment, RecordSourceSelectorProxy } from "relay-runtime";
 
 import { getViewer } from "coral-framework/helpers";
 import { CoralContext } from "coral-framework/lib/bootstrap";
@@ -10,10 +10,29 @@ import {
 } from "coral-framework/lib/relay";
 import { RemoveUserIgnoreEvent } from "coral-stream/events";
 
-import { RemoveUserIgnoreMutation as MutationTypes } from "coral-stream/__generated__/RemoveUserIgnoreMutation.graphql";
+import {
+  RemoveUserIgnoreInput,
+  RemoveUserIgnoreMutation as MutationTypes,
+} from "coral-stream/__generated__/RemoveUserIgnoreMutation.graphql";
 
 let clientMutationId = 0;
 
+const sharedUpdater = (
+  store: RecordSourceSelectorProxy,
+  environment: Environment,
+  input: Pick<RemoveUserIgnoreInput, "userID">
+) => {
+  const viewer = getViewer(environment)!;
+  const viewerProxy = store.get(viewer.id)!;
+  const removeIgnoredUserRecords = viewerProxy.getLinkedRecords("ignoredUsers");
+  if (removeIgnoredUserRecords) {
+    viewerProxy.setLinkedRecords(
+      removeIgnoredUserRecords.filter(r => r!.getValue("id") !== input.userID),
+      "ignoredUsers"
+    );
+  }
+};
+
 const RemoveUserIgnoreMutation = createMutation(
   "removeUserIgnore",
   async (
@@ -41,20 +60,11 @@ const RemoveUserIgnoreMutation = createMutation(
               clientMutationId: (clientMutationId++).toString(),
             },
           },
+          optimisticUpdater: store => {
+            sharedUpdater(store, environment, input);
+          },
           updater: store => {
-            const viewer = getViewer(environment)!;
-            const viewerProxy = store.get(viewer.id)!;
-            const removeIgnoredUserRecords = viewerProxy.getLinkedRecords(
-              "ignoredUsers"
-            );
-            if (removeIgnoredUserRecords) {
-              viewerProxy.setLinkedRecords(
-                removeIgnoredUserRecords.filter(
-                  r => r!.getValue("id") !== input.userID
-                ),
-                "ignoredUsers"
-              );
-            }
+            sharedUpdater(store, environment, input);
           },
         }
       );

diff --git a/src/core/client/stream/test/profile/preferences.spec.tsx b/src/core/client/stream/test/profile/preferences.spec.tsx
@@ -7,7 +7,6 @@ import {
   createResolversStub,
   CreateTestRendererParams,
   waitForElement,
-  waitUntilThrow,
   within,
 } from "coral-framework/testHelpers";
 
@@ -176,7 +175,9 @@ it("render ignored users list", async () => {
       Mutation: {
         removeUserIgnore: ({ variables }) => {
           expectAndFail(variables).toMatchObject({
-            userID: commenters[0].id,
+            // we sort by username now, so this user
+            // comes first because of their username
+            userID: commenters[1].id,
           });
           return {};
         },
@@ -190,14 +191,19 @@ it("render ignored users list", async () => {
   within(ignoredCommenters).getByText(commenters[0].username!);
   within(ignoredCommenters).getByText(commenters[1].username!);
 
+  const stopIgnoreButtons = within(ignoredCommenters).getAllByText(
+    "Stop ignoring",
+    { selector: "button" }
+  );
+
   // Stop ignoring first users.
-  within(ignoredCommenters)
-    .getAllByText("Stop ignoring", { selector: "button" })[0]
-    .props.onClick();
+  await act(async () => {
+    stopIgnoreButtons[0].props.onClick();
+  });
 
-  // First user should dissappear from list.
-  await waitUntilThrow(() =>
-    within(ignoredCommenters).getByText(commenters[0].username!)
+  // First user should be replaced with "you are no longer ignoring"
+  await waitForElement(() =>
+    within(ignoredCommenters).getByText("You are no longer ignoring")
   );
-  within(ignoredCommenters).getByText(commenters[1].username!);
+  within(ignoredCommenters).getByText(commenters[0].username!);
 });
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
@@ -280,6 +280,8 @@ profile-account-ignoredCommenters-description =
   be able to see your comments.
 profile-account-ignoredCommenters-empty = You are not currently ignoring anyone
 profile-account-ignoredCommenters-stopIgnoring = Stop ignoring
+profile-account-ignoredCommenters-youAreNoLonger =
+  You are no longer ignoring
 profile-account-ignoredCommenters-manage = Manage
 profile-account-ignoredCommenters-cancel = Cancel
 profile-account-ignoredCommenters-close = Close