From 49782c0b730cce9f0bad14e9c83842b5b0bfe11e Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Sun, 28 Mar 2021 22:02:03 -0400
Subject: [PATCH] fix(frontend): 'Recent Requests' slider should link to
 request list w/ same filter (#1235)

* fix(frontend): 'Recent Requests' slider should link to request list w/ same filter

* fix(frontend): use 'all' instead of 'unavailable' filter for recent requests slider

* refactor: use enum for request list filter
---
 src/components/Discover/index.tsx    |  4 ++--
 src/components/RequestList/index.tsx | 26 +++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index 74e416f6a..9a4d05c8e 100644
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@@ -38,7 +38,7 @@ const Discover: React.FC = () => {
     data: requests,
     error: requestError,
   } = useSWR<RequestResultsResponse>(
-    '/api/v1/request?filter=unavailable&take=10&sort=modified&skip=0',
+    '/api/v1/request?filter=all&take=10&sort=modified&skip=0',
     { revalidateOnMount: true }
   );
 
@@ -63,7 +63,7 @@ const Discover: React.FC = () => {
         ))}
       />
       <div className="slider-header">
-        <Link href="/requests">
+        <Link href="/requests?filter=all">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.recentrequests)}</span>
             <svg
diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx
index e1052ba43..f5dd0ea56 100644
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -17,13 +17,21 @@ const messages = defineMessages({
   sortModified: 'Last Modified',
 });
 
-type Filter = 'all' | 'pending' | 'approved' | 'processing' | 'available';
+enum Filter {
+  ALL = 'all',
+  PENDING = 'pending',
+  APPROVED = 'approved',
+  PROCESSING = 'processing',
+  AVAILABLE = 'available',
+  UNAVAILABLE = 'unavailable',
+}
+
 type Sort = 'added' | 'modified';
 
 const RequestList: React.FC = () => {
   const router = useRouter();
   const intl = useIntl();
-  const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
+  const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.PENDING);
   const [currentSort, setCurrentSort] = useState<Sort>('added');
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
 
@@ -47,7 +55,12 @@ const RequestList: React.FC = () => {
       setCurrentSort(filterSettings.currentSort);
       setCurrentPageSize(filterSettings.currentPageSize);
     }
-  }, []);
+
+    // If filter value is provided in query, use that instead
+    if (Object.values(Filter).includes(router.query.filter as Filter)) {
+      setCurrentFilter(router.query.filter as Filter);
+    }
+  }, [router.query.filter]);
 
   // Set filter values to local storage any time they are changed
   useEffect(() => {
@@ -118,6 +131,9 @@ const RequestList: React.FC = () => {
               <option value="available">
                 {intl.formatMessage(globalMessages.available)}
               </option>
+              <option value="unavailable">
+                {intl.formatMessage(globalMessages.unavailable)}
+              </option>
             </select>
           </div>
           <div className="flex flex-grow mb-2 sm:mb-0 lg:flex-grow-0">
@@ -167,11 +183,11 @@ const RequestList: React.FC = () => {
           <span className="text-2xl text-gray-400">
             {intl.formatMessage(globalMessages.noresults)}
           </span>
-          {currentFilter !== 'all' && (
+          {currentFilter !== Filter.ALL && (
             <div className="mt-4">
               <Button
                 buttonType="primary"
-                onClick={() => setCurrentFilter('all')}
+                onClick={() => setCurrentFilter(Filter.ALL)}
               >
                 {intl.formatMessage(messages.showallrequests)}
               </Button>