switch to infinite scroll for moderate #11

PREreview · Nov 22, 2019 · 8982159 · 8982159
1 parent 5fb3d90
commit 8982159
Show file tree

Hide file tree

Showing 6 changed files with 263 additions and 109 deletions.
diff --git 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
@@ -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
@@ -170,3 +170,11 @@
     margin-left: var(--sgrd);
   }
 }
+
+
+.moderation-card-modal {
+  & textarea {
+    width: 100%;
+    margin: var(--xsgrd) 0 var(--mgrd) 0;
+  }
+}