From 7aa0239cd99d41048da90203331bf3080aa0ae5e Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Sat, 6 Mar 2021 08:15:39 +0000
Subject: [PATCH] refactor(ui): request list now adds a page query parameter
 for switching pages

this helps return back to the page you were last looking at when navigated to and from the request
list.
---
 .../RequestList/RequestItem/index.tsx         |  4 ++-
 src/components/RequestList/index.tsx          | 34 +++++++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 0a1b7503..be99ec19 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -136,7 +136,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
         <div
           className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
           style={{
-            backgroundImage: `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
+            backgroundImage: title.backdropPath
+              ? `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`
+              : undefined,
           }}
         />
         <div className="relative flex flex-col justify-between w-full sm:flex-row">
diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx
index 126b0882..7d1aceff 100644
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -7,6 +7,7 @@ import Header from '../Common/Header';
 import Button from '../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import PageTitle from '../Common/PageTitle';
+import { useRouter } from 'next/router';
 
 const messages = defineMessages({
   requests: 'Requests',
@@ -30,12 +31,15 @@ type Filter = 'all' | 'pending' | 'approved' | 'processing' | 'available';
 type Sort = 'added' | 'modified';
 
 const RequestList: React.FC = () => {
+  const router = useRouter();
   const intl = useIntl();
-  const [pageIndex, setPageIndex] = useState(0);
   const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
   const [currentSort, setCurrentSort] = useState<Sort>('added');
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
 
+  const page = router.query.page ? Number(router.query.page) : 1;
+  const pageIndex = page - 1;
+
   const { data, error, revalidate } = useSWR<RequestResultsResponse>(
     `/api/v1/request?take=${currentPageSize}&skip=${
       pageIndex * currentPageSize
@@ -103,8 +107,8 @@ const RequestList: React.FC = () => {
               id="filter"
               name="filter"
               onChange={(e) => {
-                setPageIndex(0);
                 setCurrentFilter(e.target.value as Filter);
+                router.push(router.pathname);
               }}
               value={currentFilter}
               className="rounded-r-only"
@@ -141,12 +145,8 @@ const RequestList: React.FC = () => {
               id="sort"
               name="sort"
               onChange={(e) => {
-                setPageIndex(0);
-                setCurrentSort(e.target.value as Sort);
-              }}
-              onBlur={(e) => {
-                setPageIndex(0);
                 setCurrentSort(e.target.value as Sort);
+                router.push(router.pathname);
               }}
               value={currentSort}
               className="rounded-r-only"
@@ -218,8 +218,10 @@ const RequestList: React.FC = () => {
                     id="pageSize"
                     name="pageSize"
                     onChange={(e) => {
-                      setPageIndex(0);
                       setCurrentPageSize(Number(e.target.value));
+                      router
+                        .push(router.pathname)
+                        .then(() => window.scrollTo(0, 0));
                     }}
                     value={currentPageSize}
                     className="inline short"
@@ -237,13 +239,25 @@ const RequestList: React.FC = () => {
           <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
             <Button
               disabled={!hasPrevPage}
-              onClick={() => setPageIndex((current) => current - 1)}
+              onClick={() =>
+                router
+                  .push(`${router.pathname}?page=${page - 1}`, undefined, {
+                    shallow: true,
+                  })
+                  .then(() => window.scrollTo(0, 0))
+              }
             >
               {intl.formatMessage(messages.previous)}
             </Button>
             <Button
               disabled={!hasNextPage}
-              onClick={() => setPageIndex((current) => current + 1)}
+              onClick={() =>
+                router
+                  .push(`${router.pathname}?page=${page + 1}`, undefined, {
+                    shallow: true,
+                  })
+                  .then(() => window.scrollTo(0, 0))
+              }
             >
               {intl.formatMessage(messages.next)}
             </Button>