From 8982159f117ceb6bdf7bcb0f3c15d41e47ab8e54 Mon Sep 17 00:00:00 2001
From: sballesteros <sebastien.ballesteros@gmail.com>
Date: Thu, 21 Nov 2019 19:26:21 -0800
Subject: [PATCH] switch to infinite scroll for moderate #11

---
 src/components/moderate.css        |   1 +
 src/components/moderate.js         |  34 ++--
 src/components/moderation-card.css |   8 +
 src/components/moderation-card.js  | 305 +++++++++++++++++++++--------
 src/ddocs/ddoc-docs.js             |   2 +
 src/hooks/api-hooks.js             |  22 ++-
 6 files changed, 263 insertions(+), 109 deletions(-)

diff --git a/src/components/moderate.css b/src/components/moderate.css
index 8e445fd..a528d19 100644
--- a/src/components/moderate.css
+++ b/src/components/moderate.css
@@ -1,6 +1,7 @@
 .moderate {
   padding: calc(var(--header-bar-height) + var(--lgrd)) var(--mgrd) var(--lgrd);
   max-width: 900px;
+  min-height: 100vh;
   margin: 0 auto;
 
   & .moderate__header {
diff --git a/src/components/moderate.js b/src/components/moderate.js
index 92540ad..fe96dec 100644
--- a/src/components/moderate.js
+++ b/src/components/moderate.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { MdChevronRight, MdFirstPage } from 'react-icons/md';
 import { useUser } from '../contexts/user-context';
 import { getId } from '../utils/jsonld';
 import HeaderBar from './header-bar';
@@ -16,7 +15,9 @@ export default function Moderate() {
 
   const search = createModerationQs({ bookmark });
 
-  const [results, progress] = useActionsSearchResults(search);
+  // TODO set of exluded content
+
+  const [results, progress] = useActionsSearchResults(search, !!bookmark);
 
   const [isOpenedMap, setIsOpenedMap] = useState(
     results.rows.reduce((map, row) => {
@@ -33,6 +34,10 @@ export default function Moderate() {
     );
   }, [results]);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div className="moderate">
       <Helmet>
@@ -45,10 +50,9 @@ export default function Moderate() {
           <span>Moderate Content</span>
           <span>{results.total_rows} Flagged Reviews</span>
         </header>
+
         {results.total_rows === 0 && !progress.isActive ? (
-          <div>No activity yet.</div>
-        ) : bookmark && results.bookmark === bookmark && !progress.isActive ? (
-          <div>No more activity.</div>
+          <div>No reported reviews.</div>
         ) : (
           <div>
             <ul className="moderate__card-list">
@@ -58,6 +62,7 @@ export default function Moderate() {
                     user={user}
                     reviewAction={doc}
                     isOpened={isOpenedMap[getId(doc)] || false}
+                    isLockedBy={undefined /* TODO wire */}
                     onOpen={() => {
                       setIsOpenedMap(
                         results.rows.reduce((map, row) => {
@@ -66,6 +71,10 @@ export default function Moderate() {
                         }, {})
                       );
                     }}
+                    onSuccess={moderationAction => {
+                      // TODO add a `exclude` params to the search qs so that we refresh the results in a safe way
+                      console.log('moderationAction', moderationAction);
+                    }}
                     onClose={() => {
                       setIsOpenedMap(
                         results.rows.reduce((map, row) => {
@@ -83,26 +92,17 @@ export default function Moderate() {
 
         <div>
           {/* Cloudant returns the same bookmark when it hits the end of the list */}
-          {!!bookmark && (
-            <Button
-              onClick={() => {
-                setBookmark(null);
-              }}
-            >
-              <MdFirstPage /> First page
-            </Button>
-          )}
-
           {!!(
             results.rows.length < results.total_rows &&
             results.bookmark !== bookmark
           ) && (
             <Button
-              onClick={() => {
+              onClick={e => {
+                e.preventDefault();
                 setBookmark(results.bookmark);
               }}
             >
-              Next Page <MdChevronRight />
+              More
             </Button>
           )}
         </div>
diff --git a/src/components/moderation-card.css b/src/components/moderation-card.css
index 96f9f16..b137d3d 100644
--- a/src/components/moderation-card.css
+++ b/src/components/moderation-card.css
@@ -170,3 +170,11 @@
     margin-left: var(--sgrd);
   }
 }
+
+
+.moderation-card-modal {
+  & textarea {
+    width: 100%;
+    margin: var(--xsgrd) 0 var(--mgrd) 0;
+  }
+}
diff --git a/src/components/moderation-card.js b/src/components/moderation-card.js
index 9bf2a2d..722d57f 100644
--- a/src/components/moderation-card.js
+++ b/src/components/moderation-card.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { MdExpandLess, MdExpandMore, MdLock } from 'react-icons/md';
 import { format } from 'date-fns';
-import { getId } from '../utils/jsonld';
+import { getId, unprefix } from '../utils/jsonld';
 import Collapse from './collapse';
 import IconButton from './icon-button';
 import Value from './value';
@@ -19,22 +19,24 @@ export default function ModerationCard({
   user,
   reviewAction,
   isOpened,
+  isLockedBy,
   onOpen,
-  onClose
+  onClose,
+  onSuccess
 }) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [role, fetchRoleProgress] = useRole(reviewAction.agent);
+  const [modalFrame, setModalFrame] = useState(null);
+  const [reviewActionAgent, fetchReviewActionAgentProgress] = useRole(
+    reviewAction.agent
+  );
+  const [lockerRole, fetchLockerRole] = useRole(isLockedBy);
 
   const reports = getActiveReports(reviewAction);
   const textAnswers = getTextAnswers(reviewAction);
 
-  /* !TODO: @sballesteros wire the lock state of the card here */
-  const isLocked = false;
-
   return (
     <div
       className={classNames('moderation-card', {
-        'moderation-card--locked': isLocked
+        'moderation-card--locked': !!isLockedBy
       })}
     >
       {/* The card body */}
@@ -45,7 +47,8 @@ export default function ModerationCard({
             className="moderation-card__header-badge"
           />
           <span className="moderation-card__header-name">
-            {role && role.name}
+            {reviewActionAgent &&
+              (reviewActionAgent.name || unprefix(getId(reviewActionAgent)))}
           </span>
         </div>
         <div className="moderation-card__header__right">
@@ -123,18 +126,22 @@ export default function ModerationCard({
           </ul>
 
           <Controls className="moderation-card__expansion-controls">
+            {user.isAdmin &&
+              reviewActionAgent &&
+              !reviewActionAgent.isModerated && (
+                <Button
+                  primary={true}
+                  onClick={() => {
+                    setModalFrame('ModerateRoleAction');
+                  }}
+                >
+                  Block user
+                </Button>
+              )}
             <Button
               primary={true}
               onClick={() => {
-                setIsModalOpen(true);
-              }}
-            >
-              Block user
-            </Button>
-            <Button
-              primary={true}
-              onClick={() => {
-                setIsModalOpen(true);
+                setModalFrame('ModerateRapidPREreviewAction');
               }}
             >
               Retract review
@@ -142,25 +149,27 @@ export default function ModerationCard({
             <Button
               primary={true}
               onClick={() => {
-                setIsModalOpen(true);
+                setModalFrame('IgnoreReportRapidPREreviewAction');
               }}
             >
               Ignore report
             </Button>
 
-            {isModalOpen && (
+            {modalFrame && (
               <ModerationCardModal
+                defaultFrame={modalFrame}
                 user={user}
                 reviewAction={reviewAction}
                 onClose={() => {
-                  setIsModalOpen(false);
+                  setModalFrame(null);
                 }}
+                onSuccess={onSuccess}
               />
             )}
           </Controls>
         </div>
       </Collapse>
-      {isLocked && (
+      {!!lockerRole && (
         <div className="moderation-card__lock-overlay">
           <div className="moderation-card__lock-overal__content">
             <div className="moderation-card__lock-overlay__lock-icon-container">
@@ -169,11 +178,13 @@ export default function ModerationCard({
             <span className="moderation-card__lock-overlay__message">
               This report is currently being reviewed by another moderator.
             </span>
-            {/*!TODO: @sballesteros wire the badge here */}
+
             <span className="moderation-card__lock-overlay__agent">
-              <RoleBadge roleId={getId(reports[0].agent)} />
+              <RoleBadge roleId={getId(lockerRole)} />
               <span className="moderation-card__lock-overlay__agent-name">
-                [Moderator Name]
+                {lockerRole
+                  ? lockerRole.name || unprefix(getId(lockerRole))
+                  : null}
               </span>
             </span>
           </div>
@@ -206,85 +217,205 @@ ModerationCard.propTypes = {
       })
     ).isRequired
   }).isRequired,
+  isLockedBy: PropTypes.string, // the roleId of a moderator currently viewing the card
   isOpened: PropTypes.bool.isRequired,
   onOpen: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired
 };
 
-function ModerationCardModal({ onClose, reviewAction, user }) {
-  const [frame, setFrame] = useState('action');
+function ModerationCardModal({
+  onClose,
+  onSuccess,
+  reviewAction,
+  user,
+  defaultFrame
+}) {
+  const [frame, setFrame] = useState(defaultFrame);
   const [post, postProgress] = usePostAction();
   const ref = useRef();
 
   return (
     <Modal title="Retract review">
-      {frame === 'action' ? (
-        <Fragment>
-          <p>
-            Retracting the review will prevent reader to see its content or
-            existence.
-          </p>
+      <div className="moderation-card-modal">
+        {frame === 'ModerateRapidPREreviewAction' ? (
+          <Fragment>
+            <p>
+              Retracting the review will prevent reader to see its content or
+              existence.
+            </p>
 
-          <label htmlFor="retraction-reason">Retraction Reason</label>
+            <label htmlFor="retraction-reason">Retraction Reason</label>
 
-          <textarea
-            ref={ref}
-            id="retraction-reason"
-            name="moderationReason"
-            rows="4"
-          />
+            <textarea
+              ref={ref}
+              id="retraction-reason"
+              name="moderationReason"
+              rows="4"
+            />
 
-          <Controls error={postProgress.error}>
-            <Button
-              disabled={postProgress.isActive}
-              onClick={() => {
-                onClose();
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              disabled={postProgress.isActive}
-              isWaiting={postProgress.isActive}
-              onClick={() => {
-                post(
-                  {
-                    '@type': 'ModerateRapidPREreviewAction',
-                    actionStatus: 'CompletedActionStatus',
-                    agent: getId(user.defaultRole),
-                    object: getId(reviewAction),
-                    moderationReason: ref.current.value
-                  },
-                  body => {
-                    setFrame('success');
-                  }
-                );
-              }}
-            >
-              Confirm
-            </Button>
-          </Controls>
-        </Fragment>
-      ) : (
-        <Fragment>
-          <p>Success: the review has now been retracted.</p>
+            <Controls error={postProgress.error}>
+              <Button
+                disabled={postProgress.isActive}
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={postProgress.isActive}
+                isWaiting={postProgress.isActive}
+                onClick={() => {
+                  post(
+                    {
+                      '@type': 'ModerateRapidPREreviewAction',
+                      actionStatus: 'CompletedActionStatus',
+                      agent: getId(user.defaultRole),
+                      object: getId(reviewAction),
+                      moderationReason: ref.current.value
+                    },
+                    body => {
+                      onSuccess(body);
+                      setFrame('success');
+                    }
+                  );
+                }}
+              >
+                Confirm
+              </Button>
+            </Controls>
+          </Fragment>
+        ) : frame === 'ModerateRoleAction' ? (
+          <Fragment>
+            <p>
+              Blocking the user will prevent the persona used for this review to
+              post further content.
+            </p>
 
-          <Controls>
-            <Button
-              onClick={() => {
-                onClose();
-              }}
-            >
-              Close
-            </Button>
-          </Controls>
-        </Fragment>
-      )}
+            <label htmlFor="retraction-reason">Blocking Reason</label>
+
+            <textarea
+              ref={ref}
+              id="retraction-reason"
+              name="moderationReason"
+              rows="4"
+            />
+
+            <Controls error={postProgress.error}>
+              <Button
+                disabled={postProgress.isActive}
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={postProgress.isActive}
+                isWaiting={postProgress.isActive}
+                onClick={() => {
+                  post(
+                    {
+                      '@type': 'ModerateRoleAction',
+                      actionStatus: 'CompletedActionStatus',
+                      agent: getId(user),
+                      object: getId(reviewAction.agent),
+                      moderationReason: ref.current.value
+                    },
+                    body => {
+                      onSuccess(body);
+                      setFrame('success');
+                    }
+                  );
+                }}
+              >
+                Confirm
+              </Button>
+            </Controls>
+          </Fragment>
+        ) : frame === 'IgnoreReportRapidPREreviewAction' ? (
+          <Fragment>
+            <p>
+              Ignoring the user reports will remove the review from the
+              moderation page and ensure that the review remains displayed going
+              forward.
+            </p>
+
+            <label htmlFor="retraction-reason">Reason</label>
+
+            <textarea
+              ref={ref}
+              id="retraction-reason"
+              name="moderationReason"
+              rows="4"
+            />
+
+            <Controls error={postProgress.error}>
+              <Button
+                disabled={postProgress.isActive}
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={postProgress.isActive}
+                isWaiting={postProgress.isActive}
+                onClick={() => {
+                  post(
+                    {
+                      '@type': 'IgnoreReportRapidPREreviewAction',
+                      actionStatus: 'CompletedActionStatus',
+                      agent: getId(user.defaultRole),
+                      object: getId(reviewAction),
+                      moderationReason: ref.current.value
+                    },
+                    body => {
+                      onSuccess(body);
+                      setFrame('success');
+                    }
+                  );
+                }}
+              >
+                Confirm
+              </Button>
+            </Controls>
+          </Fragment>
+        ) : (
+          <Fragment>
+            <p>{`Success: ${
+              frame === 'ModerateRapidPREreviewAction'
+                ? 'the review has now been retracted'
+                : frame === 'IgnoreReportRapidPREreviewAction'
+                ? 'the moderation reports have been ignored and will now longer be displayed here'
+                : 'the user personna has been blocked and won’t be able to post further reviews'
+            }.`}</p>
+
+            <Controls>
+              <Button
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                Close
+              </Button>
+            </Controls>
+          </Fragment>
+        )}
+      </div>
     </Modal>
   );
 }
 ModerationCardModal.propTypes = {
+  defaultFrame: PropTypes.oneOf([
+    'ModerateRoleAction',
+    'ModerateRapidPREreviewAction',
+    'IgnoreReportRapidPREreviewAction'
+  ]).isRequired,
   user: PropTypes.object.isRequired,
   reviewAction: PropTypes.object.isRequired,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired
 };
diff --git a/src/ddocs/ddoc-docs.js b/src/ddocs/ddoc-docs.js
index 1532b13..72e98ab 100644
--- a/src/ddocs/ddoc-docs.js
+++ b/src/ddocs/ddoc-docs.js
@@ -39,6 +39,7 @@ const ddoc = {
         name: 'perfield',
         default: 'english',
         fields: {
+          '@id': 'keyword',
           '@type': 'keyword',
           agentId: 'keyword',
           isReported: 'keyword',
@@ -50,6 +51,7 @@ const ddoc = {
           doc['@type'] === 'RapidPREreviewAction' ||
           doc['@type'] === 'RequestForRapidPREreviewAction'
         ) {
+          index('@id', doc['@id']);
           index('@type', doc['@type'], { facet: true });
           index('actionStatus', doc.actionStatus, { facet: true });
 
diff --git a/src/hooks/api-hooks.js b/src/hooks/api-hooks.js
index fbb015c..01a9ff5 100644
--- a/src/hooks/api-hooks.js
+++ b/src/hooks/api-hooks.js
@@ -620,7 +620,8 @@ export function useUserRoles(user) {
  * Search using the `actions` index
  */
 export function useActionsSearchResults(
-  search // the ?qs part of the url
+  search, // the ?qs part of the url
+  append = false
 ) {
   const [progress, setProgress] = useState({
     isActive: false,
@@ -634,7 +635,9 @@ export function useActionsSearchResults(
       isActive: true,
       error: null
     });
-    setResults(DEFAULT_SEARCH_RESULTS);
+    if (!append) {
+      setResults(DEFAULT_SEARCH_RESULTS);
+    }
 
     const controller = new AbortController();
 
@@ -656,7 +659,16 @@ export function useActionsSearchResults(
         }
       })
       .then(data => {
-        setResults(data);
+        if (append) {
+          setResults(prevResults => {
+            return Object.assign(data, {
+              rows: prevResults.rows.concat(data.rows)
+            });
+          });
+        } else {
+          setResults(data);
+        }
+
         setProgress({ isActive: false, error: null });
       })
       .catch(err => {
@@ -669,7 +681,7 @@ export function useActionsSearchResults(
     return () => {
       controller.abort();
     };
-  }, [search]);
+  }, [search, append]);
 
-  return [results, progress];
+  return [results, progress, append];
 }