From 7a1db5d85a48eb7a8174ef0cbb9b7560eb5bc9e4 Mon Sep 17 00:00:00 2001 From: nick-funk Date: Fri, 17 Apr 2020 15:28:03 -0600 Subject: [PATCH] Improve ignored commenter management Show "you are no longer ignoring" a commenter when you choose to no longer ignore them. CORL-457 --- .../IgnoreUserSettingsContainer.css | 22 ++++ .../IgnoreUserSettingsContainer.tsx | 119 ++++++++++++------ .../Preferences/RemoveUserIgnoreMutation.ts | 40 +++--- .../stream/test/profile/preferences.spec.tsx | 24 ++-- src/locales/en-US/stream.ftl | 2 + 5 files changed, 147 insertions(+), 60 deletions(-) diff --git a/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.css b/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.css index 71fe00f6ee..9b2284c24f 100644 --- 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 index d022874f10..83f2859c05 100644 --- 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 ( + + {name} + + ); +}; + const IgnoreUserSettingsContainer: FunctionComponent = ({ viewer }) => { const emitShow = useViewerEvent(ShowIgnoreUserdDialogEvent); const removeUserIgnore = useMutation(RemoveUserIgnoreMutation); const [showManage, setShowManage] = useState(false); + const [removed, setRemoved] = useState(new Array()); 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 (
= ({ viewer }) => { color="secondary" upperCase onClick={toggleManage} - className={CLASSES.ignoredCommenters.manageButton} + className={cn( + styles.manageButton, + CLASSES.ignoredCommenters.manageButton + )} > Manage @@ -75,41 +120,43 @@ const IgnoreUserSettingsContainer: FunctionComponent = ({ viewer }) => { spacing={1} className={cn(styles.list, CLASSES.ignoredCommenters.list)} > - {viewer.ignoredUsers.map(user => ( - - - {user.username} - - - - ))} - {viewer.ignoredUsers.length === 0 && ( + {renderName(user.name)} + + + ) + )} + {userList.length === 0 && (
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 index 8822bb5153..ad9dc646dc 100644 --- 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 +) => { + 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 index 1560fbff22..47e1320905 100644 --- 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 index afe393c9c8..0dca9aca5a 100644 --- 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