fix: fixed request card not displaying the requested season and episodes

When requested, the request card shows as {seasonCount, plural, one {Season}} and does not display which season or episode was requested because it was still using the alpha request cards. This fixed that issue
2022-04-13 17:24:47 +05:00
parent 73672e29f8
commit b03b9b1dbb
7 changed files with 1074 additions and 685 deletions
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -1,51 +1,98 @@
-import React, { useState } from 'react';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  FilterIcon,
+  SortDescendingIcon,
+} from '@heroicons/react/solid';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
-import LoadingSpinner from '../Common/LoadingSpinner';
-import RequestItem from './RequestItem';
-import Header from '../Common/Header';
-import Table from '../Common/Table';
+import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
+import { useUser } from '../../hooks/useUser';
+import globalMessages from '../../i18n/globalMessages';
 import Button from '../Common/Button';
-import { defineMessages, useIntl } from 'react-intl';
+import Header from '../Common/Header';
+import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
+import RequestItem from './RequestItem';

 const messages = defineMessages({
  requests: 'Requests',
-  mediaInfo: 'Media Info',
-  status: 'Status',
-  requestedAt: 'Requested At',
-  modifiedBy: 'Last Modified By',
-  showingresults:
-    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
-  resultsperpage: 'Display {pageSize} results per page',
-  next: 'Next',
-  previous: 'Previous',
-  filterAll: 'All',
-  filterPending: 'Pending',
-  filterApproved: 'Approved',
-  filterAvailable: 'Available',
-  filterProcessing: 'Processing',
-  noresults: 'No results.',
  showallrequests: 'Show All Requests',
-  sortAdded: 'Request Date',
+  sortAdded: 'Most Recent',
  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 [pageIndex, setPageIndex] = useState(0);
-  const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
+  const { user } = useUser({
+    id: Number(router.query.userId),
+  });
+  const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.PENDING);
  const [currentSort, setCurrentSort] = useState<Sort>('added');
  const [currentPageSize, setCurrentPageSize] = useState<number>(10);

-  const { data, error, revalidate } = useSWR<RequestResultsResponse>(
+  const page = router.query.page ? Number(router.query.page) : 1;
+  const pageIndex = page - 1;
+  const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
+
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<RequestResultsResponse>(
    `/api/v1/request?take=${currentPageSize}&skip=${
      pageIndex * currentPageSize
-    }&filter=${currentFilter}&sort=${currentSort}`
+    }&filter=${currentFilter}&sort=${currentSort}${
+      router.query.userId ? `&requestedBy=${router.query.userId}` : ''
+    }`
  );
+
+  // Restore last set filter values on component mount
+  useEffect(() => {
+    const filterString = window.localStorage.getItem('rl-filter-settings');
+
+    if (filterString) {
+      const filterSettings = JSON.parse(filterString);
+
+      setCurrentFilter(filterSettings.currentFilter);
+      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(() => {
+    window.localStorage.setItem(
+      'rl-filter-settings',
+      JSON.stringify({
+        currentFilter,
+        currentSort,
+        currentPageSize,
+      })
+    );
+  }, [currentFilter, currentSort, currentPageSize]);
+
  if (!data && !error) {
    return <LoadingSpinner />;
  }
@@ -59,73 +106,81 @@ const RequestList: React.FC = () => {

  return (
    <>
-      <PageTitle title={intl.formatMessage(messages.requests)} />
-      <div className="flex flex-col justify-between lg:items-end lg:flex-row">
-        <Header>{intl.formatMessage(messages.requests)}</Header>
-        <div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
-          <div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
-            <span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
-              <svg
-                className="w-6 h-6"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
-                  clipRule="evenodd"
-                />
-              </svg>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.requests),
+          router.query.userId ? user?.displayName : '',
+        ]}
+      />
+      <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
+        <Header
+          subtext={
+            router.query.userId ? (
+              <Link href={`/users/${user?.id}`}>
+                <a className="hover:underline">{user?.displayName}</a>
+              </Link>
+            ) : (
+              ''
+            )
+          }
+        >
+          {intl.formatMessage(messages.requests)}
+        </Header>
+        <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <FilterIcon className="h-6 w-6" />
            </span>
            <select
              id="filter"
              name="filter"
              onChange={(e) => {
-                setPageIndex(0);
                setCurrentFilter(e.target.value as Filter);
+                router.push({
+                  pathname: router.pathname,
+                  query: router.query.userId
+                    ? { userId: router.query.userId }
+                    : {},
+                });
              }}
              value={currentFilter}
              className="rounded-r-only"
            >
              <option value="all">
-                {intl.formatMessage(messages.filterAll)}
+                {intl.formatMessage(globalMessages.all)}
              </option>
              <option value="pending">
-                {intl.formatMessage(messages.filterPending)}
+                {intl.formatMessage(globalMessages.pending)}
              </option>
              <option value="approved">
-                {intl.formatMessage(messages.filterApproved)}
+                {intl.formatMessage(globalMessages.approved)}
              </option>
              <option value="processing">
-                {intl.formatMessage(messages.filterProcessing)}
+                {intl.formatMessage(globalMessages.processing)}
              </option>
              <option value="available">
-                {intl.formatMessage(messages.filterAvailable)}
+                {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">
-            <span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default sm:text-sm rounded-l-md">
-              <svg
-                className="w-6 h-6"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M3 3a1 1 0 000 2h11a1 1 0 100-2H3zM3 7a1 1 0 000 2h7a1 1 0 100-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3zM15 8a1 1 0 10-2 0v5.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L15 13.586V8z" />
-              </svg>
+          <div className="mb-2 flex flex-grow sm:mb-0 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
+              <SortDescendingIcon className="h-6 w-6" />
            </span>
            <select
              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({
+                  pathname: router.pathname,
+                  query: router.query.userId
+                    ? { userId: router.query.userId }
+                    : {},
+                });
              }}
              value={currentSort}
              className="rounded-r-only"
@@ -140,114 +195,104 @@ const RequestList: React.FC = () => {
          </div>
        </div>
      </div>
-      <Table>
-        <thead>
-          <tr>
-            <Table.TH>{intl.formatMessage(messages.mediaInfo)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.status)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.requestedAt)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.modifiedBy)}</Table.TH>
-            <Table.TH></Table.TH>
-          </tr>
-        </thead>
-        <Table.TBody>
-          {data.results.map((request) => {
-            return (
-              <RequestItem
-                request={request}
-                key={`request-list-${request.id}`}
-                revalidateList={() => revalidate()}
-              />
-            );
-          })}
+      {data.results.map((request) => {
+        return (
+          <div className="py-2" key={`request-list-${request.id}`}>
+            <RequestItem
+              request={request}
+              revalidateList={() => revalidate()}
+            />
+          </div>
+        );
+      })}

-          {data.results.length === 0 && (
-            <tr className="relative h-24 p-2 text-white">
-              <Table.TD colSpan={6} noPadding>
-                <div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
-                  <span className="text-base">
-                    {intl.formatMessage(messages.noresults)}
-                  </span>
-                  {currentFilter !== 'all' && (
-                    <div className="mt-4">
-                      <Button
-                        buttonSize="sm"
-                        buttonType="primary"
-                        onClick={() => setCurrentFilter('all')}
-                      >
-                        {intl.formatMessage(messages.showallrequests)}
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </Table.TD>
-            </tr>
-          )}
-          <tr className="bg-gray-700">
-            <Table.TD colSpan={6} noPadding>
-              <nav
-                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
-                aria-label="Pagination"
+      {data.results.length === 0 && (
+        <div className="flex w-full flex-col items-center justify-center py-24 text-white">
+          <span className="text-2xl text-gray-400">
+            {intl.formatMessage(globalMessages.noresults)}
+          </span>
+          {currentFilter !== Filter.ALL && (
+            <div className="mt-4">
+              <Button
+                buttonType="primary"
+                onClick={() => setCurrentFilter(Filter.ALL)}
              >
-                <div className="hidden lg:flex lg:flex-1">
-                  <p className="text-sm">
-                    {data.results.length > 0 &&
-                      intl.formatMessage(messages.showingresults, {
-                        from: pageIndex * currentPageSize + 1,
-                        to:
-                          data.results.length < currentPageSize
-                            ? pageIndex * currentPageSize + data.results.length
-                            : (pageIndex + 1) * currentPageSize,
-                        total: data.pageInfo.results,
-                        strong: function strong(msg) {
-                          return <span className="font-medium">{msg}</span>;
-                        },
-                      })}
-                  </p>
-                </div>
-                <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
-                    {intl.formatMessage(messages.resultsperpage, {
-                      pageSize: (
-                        <select
-                          id="pageSize"
-                          name="pageSize"
-                          onChange={(e) => {
-                            setPageIndex(0);
-                            setCurrentPageSize(Number(e.target.value));
-                          }}
-                          value={currentPageSize}
-                          className="inline short"
-                        >
-                          <option value="5">5</option>
-                          <option value="10">10</option>
-                          <option value="25">25</option>
-                          <option value="50">50</option>
-                          <option value="100">100</option>
-                        </select>
-                      ),
-                    })}
-                  </span>
-                </div>
-                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
-                  <Button
-                    disabled={!hasPrevPage}
-                    onClick={() => setPageIndex((current) => current - 1)}
+                {intl.formatMessage(messages.showallrequests)}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+      <div className="actions">
+        <nav
+          className="mb-3 flex flex-col items-center space-y-3 sm:flex-row sm:space-y-0"
+          aria-label="Pagination"
+        >
+          <div className="hidden lg:flex lg:flex-1">
+            <p className="text-sm">
+              {data.results.length > 0 &&
+                intl.formatMessage(globalMessages.showingresults, {
+                  from: pageIndex * currentPageSize + 1,
+                  to:
+                    data.results.length < currentPageSize
+                      ? pageIndex * currentPageSize + data.results.length
+                      : (pageIndex + 1) * currentPageSize,
+                  total: data.pageInfo.results,
+                  strong: function strong(msg) {
+                    return <span className="font-medium">{msg}</span>;
+                  },
+                })}
+            </p>
+          </div>
+          <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
+            <span className="-mt-3 items-center truncate text-sm sm:mt-0">
+              {intl.formatMessage(globalMessages.resultsperpage, {
+                pageSize: (
+                  <select
+                    id="pageSize"
+                    name="pageSize"
+                    onChange={(e) => {
+                      setCurrentPageSize(Number(e.target.value));
+                      router
+                        .push({
+                          pathname: router.pathname,
+                          query: router.query.userId
+                            ? { userId: router.query.userId }
+                            : {},
+                        })
+                        .then(() => window.scrollTo(0, 0));
+                    }}
+                    value={currentPageSize}
+                    className="short inline"
                  >
-                    {intl.formatMessage(messages.previous)}
-                  </Button>
-                  <Button
-                    disabled={!hasNextPage}
-                    onClick={() => setPageIndex((current) => current + 1)}
-                  >
-                    {intl.formatMessage(messages.next)}
-                  </Button>
-                </div>
-              </nav>
-            </Table.TD>
-          </tr>
-        </Table.TBody>
-      </Table>
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="25">25</option>
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                  </select>
+                ),
+              })}
+            </span>
+          </div>
+          <div className="flex flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
+            <Button
+              disabled={!hasPrevPage}
+              onClick={() => updateQueryParams('page', (page - 1).toString())}
+            >
+              <ChevronLeftIcon />
+              <span>{intl.formatMessage(globalMessages.previous)}</span>
+            </Button>
+            <Button
+              disabled={!hasNextPage}
+              onClick={() => updateQueryParams('page', (page + 1).toString())}
+            >
+              <span>{intl.formatMessage(globalMessages.next)}</span>
+              <ChevronRightIcon />
+            </Button>
+          </div>
+        </nav>
+      </div>
    </>
  );
 };