Merge pull request #155 from PREreview/dashboard-pages

Dashboard style fixes & pagination
PREreview · Jul 30, 2020 · 09a1266 · 09a1266
2 parents cd1607e + 2e5b0ef
commit 09a1266
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 58 deletions.
diff --git a/src/components/banner.css b/src/components/banner.css
@@ -15,6 +15,10 @@
 
   @media (--mobile) {
     height: var(--announcement-bar-height--mobile);
+    padding-bottom: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 95vw;
   }
 }
 

diff --git a/src/components/banner.js b/src/components/banner.js
@@ -7,7 +7,7 @@ export default function Banner() {
   return (
   <React.Fragment>
     <div className='announcement'>
-      <p>Click <a className='announcement-link' href={`${process.env.API_URL}/?q=COVID-19`}>here</a> to find preprints on COVID-19 with reviews or requests for reviews.</p>
+      <p>Click <a className='announcement-link' href={`${process.env.API_URL}/dashboard`}>here</a> to find preprints on COVID-19 with reviews or requests for reviews.</p>
       <p>Click <a className='announcement-link' href="https://oaspa.org/covid-19-publishers-open-letter-of-intent-rapid-review/?highlight=covid-19" target="_blank">here</a> to read OASPA's open letter of intent to ensure rapid review of key work related to COVID-19.</p>
     </div>
   </React.Fragment>

diff --git a/src/components/dashboard.css b/src/components/dashboard.css
@@ -1,6 +1,61 @@
 .dashboard {
+  margin-bottom: 2em;
   width: 96vw;
 
+  & .dashboard__activity {
+    align-items: flex-start;
+    display: flex;
+    margin-left: -10px;
+    margin-top: 30px;
+
+    & .dashboard__activity_item {
+      border: 1px solid var(--light-grey);
+      border-radius: 8px;
+      padding: 10px;
+      margin-left: 10px;
+
+      &:first-child {
+        width: 60%;
+
+        @media (--mid) {
+          margin-left: 0;
+          width: 90%;
+        }
+      }
+
+      &:last-child {
+        width: 40%;
+
+        @media (--mid) {
+          margin-left: 0;
+          margin-top: 20px;
+          width: 90%;
+        }
+      }
+
+      & .dashboard__activity_item_list {
+        padding-left: 16px;
+
+        & li {
+          &:not(:last-child) {
+            margin-bottom: 5px;
+          }
+        }
+      }
+
+      & .dashboard__activity_item_text {
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    @media (--mid) {
+      display: block;
+      margin-left: 0;
+    }
+  }
+
   & .dashboard__checkbox {
     position: relative;
   }
@@ -21,6 +76,10 @@
       display: block;
       margin-left: 0;
     }
+
+    @media (--mobile) {
+      margin-top: 0;
+    }
   }
 
   & .dashboard__flex_item {
@@ -81,7 +140,7 @@
     }
   }
 
-  & .dashboard__tags {
+  & .dashboard__pagination {
     display: flex;
     justify-content: center;
   }
@@ -110,67 +169,30 @@
       & .preprint-card__tag-list {
         list-style: none;
       }
+
+      @media (--mobile) {
+        width: 88vw;
+      }
     }
   }
 
-  & .dashboard__activity {
-    align-items: flex-start;
+  & .dashboard__tags {
     display: flex;
-    margin-left: -10px;
-    margin-top: 30px;
-
-    & .dashboard__activity_item {
-      border: 1px solid var(--light-grey);
-      border-radius: 8px;
-      padding: 10px;
-      margin-left: 10px;
-
-      &:first-child {
-        width: 60%;
-
-        @media (--mid) {
-          margin-left: 0;
-          width: 90%;
-        }
-      }
-
-      &:last-child {
-        width: 40%;
-
-        @media (--mid) {
-          margin-left: 0;
-          margin-top: 20px;
-          width: 90%;
-        }
-      }
-
-      & .dashboard__activity_item_list {
-        padding-left: 16px;
-
-        & li {
-          &:not(:last-child) {
-            margin-bottom: 5px;
-          }
-        }
-      }
-
-      & .dashboard__activity_item_text {
-        &:not(:last-child) {
-          margin-bottom: 10px;
-        }
-      }
-    }
+    justify-content: center;
+  }
 
-    @media (--mid) {
-      display: block;
-      margin-left: 0;
+  .preprint-card__server-id {
+    a {
+      word-wrap: break-word;
+      word-wrap: anywhere;
     }
   }
 
   .search-bar {
     border-top: unset;
     box-shadow: unset;
     position: relative;
+    margin-top: 0;
     top: unset;
     width: unset;
     z-index: unset;
@@ -182,6 +204,18 @@
 
   .sort-options {
     justify-content: space-between;
+
+    @media (--mobile) {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+  }
+
+  .sort-options__item {
+    @media (--mobile) {
+      margin-top: 10px;
+      width: 34%;
+    }
   }
 
   .sort-options__item:last-of-type {
@@ -191,6 +225,10 @@
   @media (--mid) {
     width: 92vw;
   }
+
+  @media (--mobile) {
+    margin-top: 30px;
+  }
 }
 
 #Dashboard {

diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -2,18 +2,21 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import omit from 'lodash/omit';
-import { ORG } from '../constants';
+import { subDays } from 'date-fns'
+import { MdChevronRight, MdFirstPage } from 'react-icons/md';
 import { useHistory, useLocation } from 'react-router-dom';
+
+import { ORG } from '../constants';
 import Org from './org';
 
 // hooks
-import { useActionsSearchResults, usePreprintActions, usePreprintSearchResults } from '../hooks/api-hooks';
+import { usePreprintSearchResults } from '../hooks/api-hooks';
 
 // utils
 import { checkIfIsModerated } from '../utils/actions';
-import { getTags, getUsersRank, isYes } from '../utils/stats';
-import { createActivityQs, createPreprintQs, apifyPreprintQs } from '../utils/search';
-import { getId, arrayify } from '../utils/jsonld'
+import { getUsersRank, isYes } from '../utils/stats';
+import { createPreprintQs, apifyPreprintQs } from '../utils/search';
+import { getId } from '../utils/jsonld'
 
 
 // contexts
@@ -22,6 +25,8 @@ import { useUser } from '../contexts/user-context';
 // modules
 import AddButton from './add-button';
 import Banner from "./banner.js";
+import Button from './button';
+
 import Checkbox from './checkbox';
 import SortOptions from './sort-options';
 import HeaderBar from './header-bar';
@@ -31,7 +36,6 @@ import XLink from './xlink';
 import RecentActivity from './recent-activity'
 import ActiveUser from './active-user'
 
-import { subDays } from 'date-fns'
 
 export default function Dashboard() {
   const history = useHistory();
@@ -49,7 +53,7 @@ export default function Dashboard() {
 
   useEffect(() => {
     if (location.search === "") {
-      history.replace({ search: "q=COVID-19" }) // add an OR query here too
+      history.replace({ search: "q=COVID-19" })
     }
   }, [apiQs]);
 
@@ -369,7 +373,42 @@ export default function Dashboard() {
                     )) : null}
                   </ul>
                 )}
+                <br/>
+                <div className="home__pagination dashboard__pagination">
+                  {!!(location.state && location.state.bookmark) && (
+                    <Button
+                      onClick={() => {
+                        history.push({
+                          pathname: location.pathname,
+                          search: createPreprintQs({ text: params.get('q') }, location.search)
+                        });
+                      }}
+                    >
+                      <MdFirstPage /> First page
+                    </Button>
+                  )}
+                  {/* Cloudant returns the same bookmark when it hits the end of the list */}
+                  {!!(
+                    preprints.rows.length < preprints.total_rows &&
+                    preprints.bookmark !== (location.state && location.state.bookmark)
+                  ) && (
+                      <Button
+                        className="home__next-page-button"
+                        onClick={() => {
+                          history.push({
+                            pathname: location.pathname,
+                            search: createPreprintQs({ text: params.get('q') }, location.search),
+                            state: { bookmark: preprints.bookmark }
+                          });
+                        }}
+                      >
+                        Next Page <MdChevronRight />
+                      </Button>
+                    )}
+                </div>
+
               </div>
+
               <div className="dashboard__flex_item">
                 <div>
                   <AddButton