From 09cf8c5490d77c7a7b0021f71b9d0a473e1dcced Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Fri, 22 Nov 2019 12:59:46 -0500
Subject: [PATCH] [CORL-732] allow navigation via j/k in single comment view
 (#2712)

* allow navigation via j/k in single comment view

* update snaps
---
 .../client/admin/routes/Moderate/Queue/Queue.tsx   |  1 +
 .../admin/routes/Moderate/Queue/QueueWrapper.tsx   | 14 ++++++++++----
 .../Queue/__snapshots__/Queue.spec.tsx.snap        |  2 ++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
index d22c8e43e..2098ec5be 100644
--- a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
@@ -113,6 +113,7 @@ const Queue: FunctionComponent<Props> = ({
       <QueueWrapper
         comments={comments}
         singleView={singleView}
+        selected={selectedComment}
         card={(comment, i) => (
           <ModerateCardContainer
             key={comment.id}
diff --git a/src/core/client/admin/routes/Moderate/Queue/QueueWrapper.tsx b/src/core/client/admin/routes/Moderate/Queue/QueueWrapper.tsx
index e792934b1..29e756a82 100644
--- a/src/core/client/admin/routes/Moderate/Queue/QueueWrapper.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/QueueWrapper.tsx
@@ -14,27 +14,33 @@ interface Props {
     c: { id: string } & PropTypesOf<typeof ModerateCardContainer>["comment"],
     i: number
   ) => ReactNode;
+  selected: number | null;
 }
 
 const QueueWrapper: FunctionComponent<Props> = ({
   singleView,
   card,
   comments,
+  selected,
 }) => {
-  const commentsQueue = singleView ? [comments[0]] : comments;
   if (singleView) {
     return (
       <>
-        {commentsQueue
+        {comments
           // FIXME (Nick/Wyatt): Investigate why comments are coming back null
           .filter(c => Boolean(c))
-          .map((c, i) => card(c, i))}
+          .map((c, i) => {
+            if (i === selected) {
+              return card(c, i);
+            }
+            return null;
+          })}
       </>
     );
   }
   return (
     <TransitionGroup component={null} appear={false} enter={false} exit>
-      {commentsQueue
+      {comments
         // FIXME (Nick/Wyatt): Investigate why comments are coming back null
         .filter(c => Boolean(c))
         .map((c, i) => (
diff --git a/src/core/client/admin/routes/Moderate/Queue/__snapshots__/Queue.spec.tsx.snap b/src/core/client/admin/routes/Moderate/Queue/__snapshots__/Queue.spec.tsx.snap
index 518bd38ba..58b33fd30 100644
--- a/src/core/client/admin/routes/Moderate/Queue/__snapshots__/Queue.spec.tsx.snap
+++ b/src/core/client/admin/routes/Moderate/Queue/__snapshots__/Queue.spec.tsx.snap
@@ -8,6 +8,7 @@ exports[`renders correctly with load more 1`] = `
   <QueueWrapper
     card={[Function]}
     comments={Array []}
+    selected={0}
     singleView={false}
   />
   <ForwardRef(forwardRef)
@@ -34,6 +35,7 @@ exports[`renders correctly without load more 1`] = `
   <QueueWrapper
     card={[Function]}
     comments={Array []}
+    selected={0}
     singleView={false}
   />
   <UserHistoryDrawer