Show clicked-on reaction in ReactionViewer

ts/components/conversation/Message.tsx

@@ -161,6 +161,7 @@ interface State {
   isSelected: boolean;
   prevSelectedCounter: number;
 
+  pickedReaction?: string;
   reactionViewerRoot: HTMLDivElement | null;
   reactionPickerRoot: HTMLDivElement | null;
 
@@ -1417,7 +1418,10 @@ export class Message extends React.PureComponent<Props, State> {
     );
   }
 
-  public toggleReactionViewer = (onlyRemove = false) => {
+  public toggleReactionViewer = (
+    onlyRemove = false,
+    pickedReaction?: string
+  ) => {
     this.setState(({ reactionViewerRoot }) => {
       if (reactionViewerRoot) {
         document.body.removeChild(reactionViewerRoot);
@@ -1427,7 +1431,7 @@ export class Message extends React.PureComponent<Props, State> {
           true
         );
 
-        return { reactionViewerRoot: null };
+        return { reactionViewerRoot: null, pickedReaction };
       }
 
       if (!onlyRemove) {
@@ -1441,10 +1445,11 @@ export class Message extends React.PureComponent<Props, State> {
 
         return {
           reactionViewerRoot: root,
+          pickedReaction,
         };
       }
 
-      return { reactionViewerRoot: null };
+      return { reactionViewerRoot: null, pickedReaction };
     });
   };
 
@@ -1537,7 +1542,7 @@ export class Message extends React.PureComponent<Props, State> {
       someNotRendered &&
       maybeNotRendered.some(res => res.some(re => Boolean(re.from.isMe)));
 
-    const { reactionViewerRoot, containerWidth } = this.state;
+    const { reactionViewerRoot, containerWidth, pickedReaction } = this.state;
 
     // Calculate the width of the reactions container
     const reactionsWidth = toRender.reduce((sum, res, i, arr) => {
@@ -1598,7 +1603,10 @@ export class Message extends React.PureComponent<Props, State> {
                     onClick={e => {
                       e.stopPropagation();
                       e.preventDefault();
-                      this.toggleReactionViewer();
+                      this.toggleReactionViewer(
+                        false,
+                        isMore ? 'all' : re.emoji
+                      );
                     }}
                     onKeyDown={e => {
                       // Prevent enter key from opening stickers/attachments
@@ -1653,6 +1661,7 @@ export class Message extends React.PureComponent<Props, State> {
                     zIndex: 2,
                   }}
                   reactions={reactions}
+                  pickedReaction={pickedReaction}
                   i18n={i18n}
                   onClose={this.toggleReactionViewer}
                 />

ts/components/conversation/ReactionViewer.md

@@ -24,6 +24,31 @@
 </util.ConversationContext>
 ```
 
+#### Picked Reaction
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
+  <ReactionViewer
+    i18n={util.i18n}
+    pickedReaction="👍"
+    reactions={[
+      {
+        emoji: '❤️',
+        from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
+      },
+      {
+        emoji: '👍',
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Joel Ferrari',
+        },
+      },
+    ]}
+  />
+</util.ConversationContext>
+```
+
 #### Many Reactions
 
 ```jsx

ts/components/conversation/ReactionViewer.tsx

@@ -22,6 +22,7 @@ export type Reaction = {
 
 export type OwnProps = {
   reactions: Array<Reaction>;
+  pickedReaction?: string;
   onClose?: () => unknown;
 };
 
@@ -33,11 +34,11 @@ const emojisOrder = ['❤️', '👍', '👎', '😂', '😮', '😢', '😡'];
 
 export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
   // tslint:disable-next-line max-func-body-length
-  ({ i18n, reactions, onClose, ...rest }, ref) => {
+  ({ i18n, reactions, onClose, pickedReaction, ...rest }, ref) => {
     const grouped = mapValues(groupBy(reactions, 'emoji'), res =>
       orderBy(res, ['timestamp'], ['desc'])
     );
-    const [selected, setSelected] = React.useState('all');
+    const [selected, setSelected] = React.useState(pickedReaction || 'all');
     const focusRef = React.useRef<HTMLButtonElement>(null);
 
     // Handle escape key
@@ -77,7 +78,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
     }, [reactions]);
 
     const allSorted = React.useMemo(() => {
-      return sortBy(reactions, 'timestamp');
+      return orderBy(reactions, ['timestamp'], ['desc']);
     }, [reactions]);
 
     // If we have previously selected a reaction type that is no longer present