Thread reactions #3370

superbryntendo · 2018-06-20T23:51:39Z

Status

WIP
Ready for review
Needs testing

Deploy after merge (delete what needn't be deployed)

api
hyperion (frontend)
desktop
mobile

Run database migrations (delete if no migration was added)
YES

Release notes for users (delete if codebase-only change)

Allows users to "like" threads

Related issues (delete if you don't know of any)
Closes #

spectrum-bot · 2018-06-20T23:51:57Z

	Warnings
⚠️	These modified files do not have Flow enabled: mercury/queues/processReputationEvent.js src/views/dashboard/components/threadCommunityInfo.js src/views/notifications/components/notificationDropdownList.js src/views/notifications/utils.js src/views/titlebar/index.js

Generated by 🚫 dangerJS

…thread-likes

…er than only community info.

…a bit more to do yet.

…thread-likes

mxstbr

Overall LGTM, only concern is the Thread.reactions schema as noted below. Let's get something better in there that's not like the Message.reactions one, then I'm good with the backend side of things here apart from the nits!

mxstbr · 2018-06-26T13:53:29Z

api/models/threadReaction.js

+import { events } from 'shared/analytics';
+import { trackQueue } from 'shared/bull/queues';
+
+type ReactionType = 'like';


nit: this should probably be ThreadReactionType?

mxstbr · 2018-06-26T13:54:20Z

api/models/threadReaction.js

+          },
+        });
+
+        sendThreadReactionNotificationQueue.add({ threadReaction: thisReaction, userId });


This is probably not ideal? If I'm reading this correctly, it would mean that if I spam-click the thread reaction button you'll be sent millions of notifications, one for each click. We should only ever send one of 'em?

This is handled in athena. It works by looking up a previous notification of the same type on the same entity in the previous 30mins, then will de-duplicate actors. So the result is that it will mark the notification as "unread" for the thread author, but will not actually insert multiple notifications unless there is a 30 min gap in between.

mxstbr · 2018-06-26T13:54:52Z

api/types/Thread.js

@@ -97,13 +98,24 @@ const Thread = /* GraphQL */ `
    filesToUpload: [Upload]
  }

+  input AddThreadReactionInput {
+    threadId: ID!
+    type: ReactionTypes


nit: should be ThreadReactionTypes

mxstbr · 2018-06-26T13:55:21Z

athena/queues/thread-reaction-notification.js

+    debug('get thread');
+
+    // make sure that the person who left the original message still has notification permissions in this thread. We have to check the threadtype to determine if the reaction was left in a story thread or a direct message thread
+    // TODO: In the future we'll want reactions in direct message threads to trigger push notifications, but for now it introduces too much complexity so we just say false


this todo doesn't make any sense, you can't react to a dm thread?

mxstbr · 2018-06-26T13:55:25Z

athena/queues/thread-reaction-notification.js

+    const thread = await getThreadById(updatedNotification.context.id);
+
+    // make sure that the person who left the original message still has notification permissions in this thread. We have to check the threadtype to determine if the reaction was left in a story thread or a direct message thread
+    // TODO: In the future we'll want reactions in direct message threads to trigger push notifications, but for now it introduces too much complexity so we just say false


this todo doesn't make any sense, you can't react to a dm thread?

mxstbr · 2018-06-26T13:58:07Z

api/types/Thread.js

@@ -54,6 +54,7 @@ const Thread = /* GraphQL */ `
    attachments: [Attachment]
    watercooler: Boolean
    currentUserLastSeen: Date @cost(complexity: 1)
+    reactions: ReactionData @cost(complexity: 1)


I'm going to veto using the same schema as the message reactions because it doesn't let us show which users liked the thing. (you only see it in the notifications, but nobody else can see/check) Let's change the return type here to include that information somehow, (open to ideas) so we can in the future show who liked a thread or not in the UI.

Going to change this to be a separate type ThreadReactions which will expose:

count: Int hasReacted: Boolean reactors: [User]

Or something like that - we can actually extend the message reactions to have the same data model, but let's keep message reactions and thread reactions as separately defined types in case they diverge in the future.

…ntil you pass the actionbar probably?

…thread-likes

…ut of view

brianlovin · 2018-06-27T05:10:28Z

Took a while, but finally got this working. @mxstbr the one trouble I ran into was debouncing the handleScroll method in that last commit - ideally we would debounce or throttle it so we aren't putting a ton of load on the browser just to determine whether or not to show the header (I found a 100ms debounce is probably a good threshold). But I ran into some issues with React removing synthetic events from the event pool. I tried using event.persist() from the docs (https://reactjs.org/docs/events.html) but couldn't get it to work - React kept throwing the error:

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `target` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://facebook.github.io/react/docs/events.html#event-pooling for more information.

Any chance you could take a look? Without the debounce people's machines are gonna get real real hot.

brianlovin · 2018-06-27T05:11:53Z

Also @uberbryn @mxstbr - if you want to pull this and try it out, let me know what you think. In my opinion it's very very distracting to have this header jump in and out every time you change the thread in the inbox view. But it seems to be quite a challenge to work around that since we're doing so much scroll position handling every time a thread is changed.

superbryntendo · 2018-06-27T07:13:38Z

Would be cool for it to be more chill when we jump your scroll position as you mentioned, but I also think it's fine as is - it really wouldn't have bothered me other than that you mentioned it.

Other solution I could think of would be transitioning it from 0 opacity to 1 so the motion isn't jumpy, but I really don't think it's that big of a deal. Would prefer shipping and refining later.

Great work, bud! Thanks for grabbing that!

mxstbr · 2018-06-27T07:14:13Z

Will take a look!

mxstbr · 2018-06-27T07:17:26Z

src/views/thread/container.js

+    // enable the `bannerIsVisible` state to slide the thread context banner
+    // in from the top of the screen
+    const scrollOffset = e.target.scrollTop;
+    this.setState({ scrollOffset }, () => {


We shouldn't be putting the scroll offset (which changes every single frame you scroll) into the state, this is what's causing the issues. This isn't even necessary, just don't put it into the state, compare scrollOffset against threadDetailHeight and only set the state if it changes. That way you don't even need to debounce which is kinda annoying for this behavior

I'm taking a look at refactoring this!

mxstbr

Needs an optimistic update on the like click—feels bad rn on slow networks/with the remote server overhead. Will also tackle.

@brianlovin

…re-renders @brianlovin see how I made it so we only `setState` once the state actually changes? This means we barely re-render the React side of things, which makes this much much much more performant! 👌

mxstbr · 2018-06-27T07:29:43Z

api/types/Thread.js

+  type ThreadReactions {
+		count: Int!
+		hasReacted: Boolean
+	}


Even though you split 'em up, this is still the same schema as the message reactions? I thought we agreed that we should do this one right from the start (to one that let's us show who liked a thread) so we wouldn't have to migrate to a different one in the future?

Right, see comment below.

mxstbr · 2018-06-27T08:00:50Z

Needs an optimistic update on the like click—feels bad rn on slow networks/with the remote server overhead. Will also tackle.

Nevermind, played around with this a bit and it's a pain in the butt. Let's not do this for now 😅 So the last bit here is coming up with a nicer schema that let's us show who liked a thread, right?

brianlovin · 2018-06-27T16:33:29Z

Hm, the schema will be:

type ThreadReactions {
  count: Int!
  hasReacted: Boolean
  users: [User]
}

Right? We just add a field inside that type. users could follow the connection spec, or just be an array of user data (obviously will be problematic when we get to hundreds of reactions on a post). So then it would be:

type ReactionUsersConnection {
  pageInfo: PageInfo
  edges: [ReactionUserEdge]
}

type ReactionUserEdge {
  node: User
  cursor: String
}

type ThreadReactions {
  count: Int!
  hasReacted: Boolean
  users: ReactionUsersConnection
}

But again, all of this can be added later. Querying would not change except adding the field to the graphql query and extracting it on the frontend with thread.reactions.users.edges.map(({ node: user }) => ...)

brianlovin · 2018-06-27T16:34:00Z

Let me see if I can handle optimistic update real quick

…thread-likes

brianlovin · 2018-06-27T16:59:03Z

Optimistic updating is pushed, @mxstbr this is ready for a final review!

mxstbr

That schema actually makes a lot of sense. This LGTM, let's ship it?!

brianlovin · 2018-06-27T17:23:58Z

LET'S SHIP IT! Gonna put it on alpha, run the migration, test, then do a prod cut.

commenting everything out so I can push

0a61ee0

spectrum-bot bot added the WIP: Building label Jun 20, 2018

brianlovin and others added 27 commits June 20, 2018 17:17

Create threadReactions table and indexes

194103b

Add loaders

ae8c888

Add model query

f29d58f

Add query resolvers

2fd8359

Add types

91f345c

Process reputation and flow type mercury

e759243

Add analytics tracking

a827e16

Add bull queues

91b98f8

Add mutations and mutation resolvers

b9ffb19

Add athena notificatio type

cae5e0b

Properly return threads from mutations

967443f

Clean up function formatting

d87f44d

Add graphql mutations

3c04d1b

Add sample frontend implementation

190bd84

API bugfixes

c4bd171

renders button and count components. needs new glyphs and backend.

3f79709

Merge branch 'thread-likes' of github.com:withspectrum/spectrum into …

9d9808d

…thread-likes

Fix flow

bee6619

moves likes into threadHeader and updates it to have Thread info rath…

5623aba

…er than only community info.

static thread header is good. also added likes to threadCards. quite …

3008142

…a bit more to do yet.

Split out api loaders and models

3665589

Fix imports

aa3da3e

Add client side reactions

be40323

Merge branch 'thread-likes' of github.com:withspectrum/spectrum into …

a460ad1

…thread-likes

Fix mutation

930b17a

Fix flow, eslint, peril

7f0b735

Swap icons, add notification to dropdown

16aee81

brianlovin and others added 2 commits June 21, 2018 10:54

Fix reputation processing

e4a3562

updates threadCard design to handle likes and statuses more simply

4b2c720

mxstbr reviewed Jun 26, 2018

View reviewed changes

brianlovin and others added 6 commits June 26, 2018 11:11

Clean up nits

8fd049d

sets the two states for likes. The titlebar should be display: none u…

0aaf2dc

…ntil you pass the actionbar probably?

Merge branch 'thread-likes' of github.com:withspectrum/spectrum into …

4b3df27

…thread-likes

Eslint

7a1de81

Fix flow

93266cf

Enable the thread header to slide in/out when the thread content is o…

efecb23

…ut of view

Fix flow

94e5ccb

mxstbr reviewed Jun 27, 2018

View reviewed changes

mxstbr suggested changes Jun 27, 2018

View reviewed changes

Stop storing scroll offset in state unnecessarily, causing excessive …

bab91ab

…re-renders @brianlovin see how I made it so we only `setState` once the state actually changes? This means we barely re-render the React side of things, which makes this much much much more performant! 👌

mxstbr suggested changes Jun 27, 2018

View reviewed changes

brianlovin added 3 commits June 27, 2018 09:35

Transition opacity to smooth jumpiness

6c49128

Add optimistic udpates for thread likes

0edb2f6

Merge branch 'thread-likes' of github.com:withspectrum/spectrum into …

6483b77

…thread-likes

mxstbr approved these changes Jun 27, 2018

View reviewed changes

brianlovin merged commit 54128d4 into alpha Jun 27, 2018

brianlovin deleted the thread-likes branch June 27, 2018 17:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Thread reactions #3370

Thread reactions #3370

superbryntendo commented Jun 20, 2018

spectrum-bot bot commented Jun 20, 2018 •

edited

mxstbr left a comment

mxstbr Jun 26, 2018

mxstbr Jun 26, 2018

brianlovin Jun 26, 2018

mxstbr Jun 26, 2018

mxstbr Jun 26, 2018

mxstbr Jun 26, 2018

mxstbr Jun 26, 2018

brianlovin Jun 26, 2018 •

edited

brianlovin commented Jun 27, 2018

brianlovin commented Jun 27, 2018

superbryntendo commented Jun 27, 2018 •

edited

mxstbr commented Jun 27, 2018

mxstbr Jun 27, 2018

mxstbr left a comment

mxstbr Jun 27, 2018

brianlovin Jun 27, 2018

mxstbr commented Jun 27, 2018 •

edited

brianlovin commented Jun 27, 2018

brianlovin commented Jun 27, 2018

brianlovin commented Jun 27, 2018

mxstbr left a comment

brianlovin commented Jun 27, 2018

Thread reactions #3370

Thread reactions #3370

Conversation

superbryntendo commented Jun 20, 2018

spectrum-bot bot commented Jun 20, 2018 • edited

mxstbr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brianlovin Jun 26, 2018 • edited

Choose a reason for hiding this comment

brianlovin commented Jun 27, 2018

brianlovin commented Jun 27, 2018

superbryntendo commented Jun 27, 2018 • edited

mxstbr commented Jun 27, 2018

Choose a reason for hiding this comment

mxstbr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mxstbr commented Jun 27, 2018 • edited

brianlovin commented Jun 27, 2018

brianlovin commented Jun 27, 2018

brianlovin commented Jun 27, 2018

mxstbr left a comment

Choose a reason for hiding this comment

brianlovin commented Jun 27, 2018

spectrum-bot bot commented Jun 20, 2018 •

edited

brianlovin Jun 26, 2018 •

edited

superbryntendo commented Jun 27, 2018 •

edited

mxstbr commented Jun 27, 2018 •

edited