Properly transform author username suggestion

src/components/chatInput/index.js

@@ -93,6 +93,16 @@ type Props = {
   onBlur: ?Function,
 };
 
+export const cleanSuggestionUserObject = (user: ?Object) => {
+  if (!user) return null;
+  return {
+    ...user,
+    id: user.username,
+    display: user.username,
+    filterName: user.name.toLowerCase(),
+  };
+};
+
 // $FlowFixMe
 const ChatInput = (props: Props) => {
   const cacheKey = `last-content-${props.thread}`;
@@ -312,6 +322,7 @@ const ChatInput = (props: Props) => {
   const searchUsers = async (queryString, callback) => {
     const filteredParticipants = props.participants
       ? props.participants
+          .map(cleanSuggestionUserObject)
           .filter(Boolean)
           .filter(participant => {
             return (
@@ -352,13 +363,7 @@ const ChatInput = (props: Props) => {
       .filter(edge => edge.node.username)
       .map(edge => {
         const user = edge.node;
-        return {
-          ...user,
-          id: user.username,
-          display: user.username,
-          username: user.username,
-          filterName: user.name.toLowerCase(),
-        };
+        return cleanSuggestionUserObject(user);
       });
 
     // Prepend the filtered participants in case a user is tabbing down right now

src/views/directMessages/containers/existingThread.js

@@ -6,7 +6,7 @@ import { withApollo } from 'react-apollo';
 import setLastSeenMutation from 'shared/graphql/mutations/directMessageThread/setDMThreadLastSeen';
 import Messages from '../components/messages';
 import Header from '../components/header';
-import ChatInput from 'src/components/chatInput';
+import ChatInput, { cleanSuggestionUserObject } from 'src/components/chatInput';
 import viewNetworkHandler from 'src/components/viewNetworkHandler';
 import getDirectMessageThread, {
   type GetDirectMessageThreadType,
@@ -111,12 +111,8 @@ class ExistingThread extends React.Component<Props> {
       if (data.directMessageThread) {
         const thread = data.directMessageThread;
         const mentionSuggestions = thread.participants
-          .map(user => ({
-            ...user,
-            id: user.username,
-            display: user.username,
-          }))
-          .filter(user => user.username !== currentUser.username);
+          .map(cleanSuggestionUserObject)
+          .filter(user => user && user.username !== currentUser.username);
         return (
           <MessagesContainer>
             <ViewContent

src/views/thread/container.js

@@ -404,23 +404,16 @@ class ThreadContainer extends React.Component<Props, State> {
 
     if (!messageConnection || messageConnection.edges.length === 0)
       return this.setState({
-        participants: [
-          { ...author.user, filterName: author.user.name.toLowerCase() },
-        ],
+        participants: [author.user],
       });
 
     const participants = messageConnection.edges
       .map(edge => edge.node)
       .map(node => node.author.user);
 
-    const participantsWithAuthor = [...participants, author.user]
-      .filter((user, index, array) => array.indexOf(user) === index)
-      .map(user => ({
-        ...user,
-        id: user.username,
-        display: user.username,
-        filterName: user.name.toLowerCase(),
-      }));
+    const participantsWithAuthor = [...participants, author.user].filter(
+      (user, index, array) => array.indexOf(user) === index
+    );
 
     return this.setState({ participants: participantsWithAuthor });
   };