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
sct · Mar 29, 2021 · 49782c0 · 49782c0
1 parent e16277c
commit 49782c0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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>