Console log - trying to debug duplicate direct messages

.eslintrc.json

@@ -1,6 +1,6 @@
 {
     "env": {
-        "browser": false,
+        "browser": true,
         "commonjs": true,
         "es6": true,
         "node": true

package.json

@@ -201,7 +201,7 @@
     "postbuild:hyperion": "cp now.json build-hyperion/now.json",
     "build:client": "cross-env NODE_PATH=./ react-app-rewired build",
     "jest": "cross-env NODE_PATH=./ jest",
-    "test": "npm run jest -- --watch",
+    "test": "npm run jest -- --runInBand --watch",
     "test:ci": "npm run jest -- --forceExit",
     "db:migrate": "npm run rethinkdb:migrate -- up",
     "db:drop": "npm run rethinkdb:migrate -- down",

shared/graphql/mutations/message/sendDirectMessage.js

@@ -19,8 +19,9 @@ export const sendDirectMessageMutation = gql`
 `;
 const sendDirectMessageOptions = {
   props: ({ ownProps, mutate }) => ({
-    sendDirectMessage: message =>
-      mutate({
+    sendDirectMessage: message => {
+      const fakeId = Math.round(Math.random() * -1000000);
+      return mutate({
         variables: {
           message: {
             ...message,
@@ -32,9 +33,12 @@ const sendDirectMessageOptions = {
         optimisticResponse: {
           __typename: 'Mutation',
           addMessage: {
-            __typename: 'Message',
+            id: fakeId,
+            timestamp: JSON.parse(JSON.stringify(new Date())),
+            messageType: message.messageType,
             sender: {
               ...ownProps.currentUser,
+              totalReputation: 0,
               contextPermissions: {
                 communityId: null,
                 reputation: 0,
@@ -44,27 +48,19 @@ const sendDirectMessageOptions = {
               },
               __typename: 'User',
             },
-            timestamp: +new Date(),
             content: {
               ...message.content,
               __typename: 'MessageContent',
             },
-            id: Math.round(Math.random() * -1000000),
             reactions: {
               count: 0,
               hasReacted: false,
               __typename: 'ReactionData',
             },
-            messageType: message.messageType,
+            __typename: 'Message',
           },
         },
         update: (store, { data: { addMessage } }) => {
-          // ignore the addMessage from the server, apollo will automatically
-          // override the optimistic object
-          if (!addMessage || typeof addMessage.id === 'string') {
-            return;
-          }
-
           // Read the data from our cache for this query.
           const data = store.readQuery({
             query: getDMThreadMessageConnectionQuery,
@@ -74,11 +70,16 @@ const sendDirectMessageOptions = {
           });
 
           data.directMessageThread.messageConnection.edges.push({
-            cursor: addMessage.id,
-            node: addMessage,
             __typename: 'DirectMessageEdge',
+            cursor: window.btoa(addMessage.id),
+            node: addMessage,
           });
 
+          console.log(
+            'output data',
+            data.directMessageThread.messageConnection.edges
+          );
+
           // Write our data back to the cache.
           store.writeQuery({
             query: getDMThreadMessageConnectionQuery,
@@ -88,7 +89,8 @@ const sendDirectMessageOptions = {
             },
           });
         },
-      }),
+      });
+    },
   }),
 };
 

shared/graphql/mutations/message/sendMessage.js

@@ -36,6 +36,7 @@ const sendMessageOptions = {
           },
         },
         optimisticResponse: {
+          __typename: 'Mutation',
           addMessage: {
             id: fakeId,
             timestamp: JSON.parse(JSON.stringify(new Date())),
@@ -74,7 +75,6 @@ const sendMessageOptions = {
 
           data.thread.messageConnection.edges.push({
             __typename: 'ThreadMessageEdge',
-            // eslint-disable-next-line
             cursor: window.btoa(addMessage.id),
             node: addMessage,
           });

shared/graphql/queries/directMessageThread/getCurrentUserDMThreadConnection.js

@@ -54,7 +54,6 @@ export const getCurrentUserDMThreadConnectionOptions = {
             ].cursor,
         },
         updateQuery: (prev, { fetchMoreResult }) => {
-          console.log(fetchMoreResult);
           if (!fetchMoreResult.user) {
             return prev;
           }

shared/graphql/queries/directMessageThread/getDirectMessageThreadMessageConnection.js

@@ -98,7 +98,13 @@ export const getDMThreadMessageConnectionOptions = {
           thread: ownProps.id,
         },
         updateQuery: (prev, { subscriptionData }) => {
+          console.log('subscriptionData', subscriptionData);
           const newMessage = subscriptionData.data.messageAdded;
+          const existingMessage = prev.directMessageThread.messageConnection.edges.find(
+            ({ node }) => node.id === newMessage.id
+          );
+          console.log('existing message', existingMessage);
+          if (existingMessage) return prev;
           // Add the new message to the data
           return Object.assign({}, prev, {
             ...prev,
@@ -108,11 +114,10 @@ export const getDMThreadMessageConnectionOptions = {
                 ...prev.directMessageThread.messageConnection,
                 edges: [
                   ...prev.directMessageThread.messageConnection.edges,
-                  // NOTE(@mxstbr): The __typename hack is to work around react-apollo/issues/658
                   {
-                    cursor: newMessage.id,
                     node: newMessage,
-                    __typename: 'DirectMessageThreadMessageEdge',
+                    cursor: window.btoa(newMessage.id),
+                    __typename: 'DirectMessageEdge',
                   },
                 ],
               },

shared/graphql/queries/thread/getThreadMessageConnection.js

@@ -59,7 +59,6 @@ export const getThreadMessageConnectionOptions = {
           new Date(props.lastSeen).getTime() <
           new Date(props.lastActive).getTime()
         ) {
-          // eslint-disable-next-line
           variables.after = window.btoa(new Date(props.lastSeen).getTime());
           // Otherwise load the last 50 messages
         } else {
@@ -193,7 +192,6 @@ export const getThreadMessageConnectionOptions = {
                   // NOTE(@mxstbr): The __typename hack is to work around react-apollo/issues/658
                   {
                     node: newMessage,
-                    // eslint-disable-next-line
                     cursor: window.btoa(newMessage.id),
                     __typename: 'ThreadMessageEdge',
                   },

src/components/threadComposer/components/composer.js

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 import compose from 'recompose/compose';
 import Textarea from 'react-textarea-autosize';

src/components/upsell/joinChannel.js

@@ -82,7 +82,6 @@ class JoinChannel extends React.Component<Props, State> {
           isLoading: false,
         });
 
-        console.log('error toggling subscription', err);
         dispatch(addToastWithTimeout('error', err.message));
       });
   };

src/views/directMessages/components/messages.js

@@ -121,6 +121,8 @@ class MessagesWithData extends React.Component<Props, State> {
       const uniqueMessages = unique(unsortedMessages);
       const sortedMessages = sortAndGroupMessages(uniqueMessages);
 
+      console.log('sortedMessages', sortedMessages);
+
       return (
         <MessagesScrollWrapper>
           {hasNextPage && (

src/views/directMessages/index.js

@@ -82,7 +82,6 @@ class DirectMessages extends React.Component<Props, State> {
 
   render() {
     const { match, currentUser, data, hasError, fetchMore } = this.props;
-    console.log('data', data);
 
     // Only logged-in users can view DM threads
     if (!currentUser) return null;

src/views/thread/components/threadCommunityBanner.js

@@ -103,13 +103,12 @@ class ThreadCommunityBanner extends React.Component<Props, State> {
         }
 
         const type = isMember || isPending ? 'success' : 'neutral';
-        dispatch(addToastWithTimeout(type, str));
+        return dispatch(addToastWithTimeout(type, str));
       })
       .catch(err => {
         this.setState({
           isLoading: false,
         });
-        console.log('error toggling channel subscription', err);
         dispatch(addToastWithTimeout('error', err.message));
       });
   };

src/views/userSettings/components/notificationSettings.js

@@ -64,7 +64,6 @@ class NotificationSettings extends React.Component<Props, State> {
       })
       .catch(err => {
         track('browser push notifications', 'blocked');
-        console.log('error subscribing to browser notifications', err);
         return this.props.dispatch(
           addToastWithTimeout(
             'error',
@@ -92,8 +91,7 @@ class NotificationSettings extends React.Component<Props, State> {
           );
         }
       })
-      .catch(err => {
-        console.log('error unsubscribing from browser notifications', err);
+      .catch(() => {
         return this.props.dispatch(
           addToastWithTimeout(
             'error',