From b3f847a3711676817d1c4fe4e6410fbe86a3868c Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 11 Jul 2019 22:32:37 -0700
Subject: [PATCH] fix: User profiles dont open from document collaborator
 facepile

---
 app/components/Collaborators.js | 100 +++++++++++++++++---------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/app/components/Collaborators.js b/app/components/Collaborators.js
index b5374087..fa975b12 100644
--- a/app/components/Collaborators.js
+++ b/app/components/Collaborators.js
@@ -60,56 +60,60 @@ class Collaborators extends React.Component<Props> {
       <Avatars>
         {overflow > 0 && <More>+{overflow}</More>}
         {mostRecentViewers.map(({ lastViewedAt, user }) => (
-          <AvatarPile
-            key={user.id}
-            tooltip={
-              <TooltipCentered>
-                <strong>{user.name}</strong>
-                <br />
-                viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
-              </TooltipCentered>
-            }
-            placement="bottom"
-          >
-            <Viewer>
-              <Avatar
-                src={user.avatarUrl}
-                onClick={() => this.handleOpenProfile(user.id)}
-              />
-              <UserProfile
-                user={user}
-                isOpen={this.openProfileId === user.id}
-                onRequestClose={this.handleCloseProfile}
-              />
-            </Viewer>
-          </AvatarPile>
+          <React.Fragment>
+            <AvatarPile
+              key={user.id}
+              tooltip={
+                <TooltipCentered>
+                  <strong>{user.name}</strong>
+                  <br />
+                  viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
+                </TooltipCentered>
+              }
+              placement="bottom"
+            >
+              <Viewer>
+                <Avatar
+                  src={user.avatarUrl}
+                  onClick={() => this.handleOpenProfile(user.id)}
+                />
+              </Viewer>
+            </AvatarPile>
+            <UserProfile
+              user={user}
+              isOpen={this.openProfileId === user.id}
+              onRequestClose={this.handleCloseProfile}
+            />
+          </React.Fragment>
         ))}
         {collaborators.map(user => (
-          <AvatarPile
-            key={user.id}
-            tooltip={
-              <TooltipCentered>
-                <strong>{user.name}</strong>
-                <br />
-                {createdAt === updatedAt ? 'published' : 'updated'}{' '}
-                {updatedBy.id === user.id &&
-                  `${distanceInWordsToNow(new Date(updatedAt))} ago`}
-              </TooltipCentered>
-            }
-            placement="bottom"
-          >
-            <Collaborator>
-              <Avatar
-                src={user.avatarUrl}
-                onClick={() => this.handleOpenProfile(user.id)}
-              />
-              <UserProfile
-                user={user}
-                isOpen={this.openProfileId === user.id}
-                onRequestClose={this.handleCloseProfile}
-              />
-            </Collaborator>
-          </AvatarPile>
+          <React.Fragment>
+            <AvatarPile
+              key={user.id}
+              tooltip={
+                <TooltipCentered>
+                  <strong>{user.name}</strong>
+                  <br />
+                  {createdAt === updatedAt ? 'published' : 'updated'}{' '}
+                  {updatedBy.id === user.id &&
+                    `${distanceInWordsToNow(new Date(updatedAt))} ago`}
+                </TooltipCentered>
+              }
+              placement="bottom"
+            >
+              <Collaborator>
+                <Avatar
+                  src={user.avatarUrl}
+                  onClick={() => this.handleOpenProfile(user.id)}
+                />
+              </Collaborator>
+            </AvatarPile>
+            <UserProfile
+              user={user}
+              isOpen={this.openProfileId === user.id}
+              onRequestClose={this.handleCloseProfile}
+            />
+          </React.Fragment>
         ))}
       </Avatars>
     );