fix(ui): hide 'Recently Added' & 'Recent Requests' sliders when empty (#2190)

* fix(ui): hide 'Recently Added' & 'Recent Requests' sliders when empty * fix(ui): hide 'errored' sliders too * fix: type import * fix: remove unneeded React import * fix: missing TmdbTitleCard props * refactor: remove isEmpty param for never-empty sliders * fix: display empty watchlist message if autorequest enabled * fix: pr suggestion * fix(lang): remove no-longer-needed string
2 years ago · 03d5e56678
parent 410ad0d4b4
commit 03d5e56678
7 changed files with 192 additions and 121 deletions
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@ -23,10 +23,11 @@ const messages = defineMessages({
  populartv: 'Popular Series',
  upcomingtv: 'Upcoming Series',
  recentlyAdded: 'Recently Added',
-  noRequests: 'No requests.',
  upcoming: 'Upcoming Movies',
  trending: 'Trending',
  plexwatchlist: 'Your Plex Watchlist',
+  emptywatchlist:
+    'Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.',
 });

 const Discover = () => {
@ -58,76 +59,97 @@ const Discover = () => {
  return (
    <>
      <PageTitle title={intl.formatMessage(messages.discover)} />
-      {hasPermission([Permission.MANAGE_REQUESTS, Permission.RECENT_VIEW], {
-        type: 'or',
-      }) && (
-        <>
-          <div className="slider-header">
-            <div className="slider-title">
-              <span>{intl.formatMessage(messages.recentlyAdded)}</span>
+      {(!media || !!media.results.length) &&
+        !mediaError &&
+        hasPermission([Permission.MANAGE_REQUESTS, Permission.RECENT_VIEW], {
+          type: 'or',
+        }) && (
+          <>
+            <div className="slider-header">
+              <div className="slider-title">
+                <span>{intl.formatMessage(messages.recentlyAdded)}</span>
+              </div>
            </div>
-          </div>
-          <Slider
-            sliderKey="media"
-            isLoading={!media && !mediaError}
-            isEmpty={!!media && !mediaError && media.results.length === 0}
-            items={media?.results?.map((item) => (
-              <TmdbTitleCard
-                key={`media-slider-item-${item.id}`}
-                id={item.id}
-                tmdbId={item.tmdbId}
-                tvdbId={item.tvdbId}
-                type={item.mediaType}
-              />
-            ))}
-          />
-        </>
-      )}
-      <div className="slider-header">
-        <Link href="/requests?filter=all">
-          <a className="slider-title">
-            <span>{intl.formatMessage(messages.recentrequests)}</span>
-            <ArrowCircleRightIcon />
-          </a>
-        </Link>
-      </div>
-      <Slider
-        sliderKey="requests"
-        isLoading={!requests && !requestError}
-        isEmpty={!!requests && !requestError && requests.results.length === 0}
-        items={(requests?.results ?? []).map((request) => (
-          <RequestCard
-            key={`request-slider-item-${request.id}`}
-            request={request}
-          />
-        ))}
-        placeholder={<RequestCard.Placeholder />}
-        emptyMessage={intl.formatMessage(messages.noRequests)}
-      />
-      {(!watchlistItems || !!watchlistItems.results.length) && !watchlistError && (
+            <Slider
+              sliderKey="media"
+              isLoading={!media}
+              items={(media?.results ?? []).map((item) => (
+                <TmdbTitleCard
+                  key={`media-slider-item-${item.id}`}
+                  id={item.id}
+                  tmdbId={item.tmdbId}
+                  tvdbId={item.tvdbId}
+                  type={item.mediaType}
+                />
+              ))}
+            />
+          </>
+        )}
+      {(!requests || !!requests.results.length) && !requestError && (
        <>
          <div className="slider-header">
-            <Link href="/discover/watchlist">
+            <Link href="/requests?filter=all">
              <a className="slider-title">
-                <span>{intl.formatMessage(messages.plexwatchlist)}</span>
+                <span>{intl.formatMessage(messages.recentrequests)}</span>
                <ArrowCircleRightIcon />
              </a>
            </Link>
          </div>
          <Slider
-            sliderKey="watchlist"
-            isLoading={!watchlistItems && !watchlistError}
-            items={watchlistItems?.results.map((item) => (
-              <TmdbTitleCard
-                id={item.tmdbId}
-                key={`watchlist-slider-item-${item.ratingKey}`}
-                tmdbId={item.tmdbId}
-                type={item.mediaType}
+            sliderKey="requests"
+            isLoading={!requests}
+            items={(requests?.results ?? []).map((request) => (
+              <RequestCard
+                key={`request-slider-item-${request.id}`}
+                request={request}
              />
            ))}
+            placeholder={<RequestCard.Placeholder />}
          />
        </>
      )}
+      {user?.userType === UserType.PLEX &&
+        (!watchlistItems ||
+          !!watchlistItems.results.length ||
+          user.settings?.watchlistSyncMovies ||
+          user.settings?.watchlistSyncTv) &&
+        !watchlistError && (
+          <>
+            <div className="slider-header">
+              <Link href="/discover/watchlist">
+                <a className="slider-title">
+                  <span>{intl.formatMessage(messages.plexwatchlist)}</span>
+                  <ArrowCircleRightIcon />
+                </a>
+              </Link>
+            </div>
+            <Slider
+              sliderKey="watchlist"
+              isLoading={!watchlistItems}
+              isEmpty={!!watchlistItems && watchlistItems.results.length === 0}
+              emptyMessage={intl.formatMessage(messages.emptywatchlist, {
+                PlexWatchlistSupportLink: (msg: React.ReactNode) => (
+                  <a
+                    href="https://support.plex.tv/articles/universal-watchlist/"
+                    className="text-white transition duration-300 hover:underline"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {msg}
+                  </a>
+                ),
+              })}
+              items={watchlistItems?.results.map((item) => (
+                <TmdbTitleCard
+                  id={item.tmdbId}
+                  key={`watchlist-slider-item-${item.ratingKey}`}
+                  tmdbId={item.tmdbId}
+                  type={item.mediaType}
+                />
+              ))}
+            />
+          </>
+        )}
      <MediaSlider
        sliderKey="trending"
        title={intl.formatMessage(messages.trending)}
--- a/src/components/IssueModal/CreateIssueModal/index.tsx
+++ b/src/components/IssueModal/CreateIssueModal/index.tsx
@ -20,7 +20,6 @@ import * as Yup from 'yup';

 const messages = defineMessages({
  validationMessageRequired: 'You must provide a description',
-  issomethingwrong: 'Is there a problem with {title}?',
  whatswrong: "What's wrong?",
  providedetail:
    'Please provide a detailed explanation of the issue you encountered.',
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@ -44,6 +44,7 @@ const RequestList = () => {
  const { user } = useUser({
    id: Number(router.query.userId),
  });
+  const { user: currentUser } = useUser();
  const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.PENDING);
  const [currentSort, setCurrentSort] = useState<Sort>('added');
  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
@ -60,7 +61,11 @@ const RequestList = () => {
    `/api/v1/request?take=${currentPageSize}&skip=${
      pageIndex * currentPageSize
    }&filter=${currentFilter}&sort=${currentSort}${
-      router.query.userId ? `&requestedBy=${router.query.userId}` : ''
+      router.pathname.startsWith('/profile')
+        ? `&requestedBy=${currentUser?.id}`
+        : router.query.userId
+        ? `&requestedBy=${router.query.userId}`
+        : ''
    }`
  );

@ -116,7 +121,11 @@ const RequestList = () => {
      <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
        <Header
          subtext={
-            router.query.userId ? (
+            router.pathname.startsWith('/profile') ? (
+              <Link href={`/profile`}>
+                <a className="hover:underline">{currentUser?.displayName}</a>
+              </Link>
+            ) : router.query.userId ? (
              <Link href={`/users/${user?.id}`}>
                <a className="hover:underline">{user?.displayName}</a>
              </Link>
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@ -11,7 +11,7 @@ interface SliderProps {
  items?: JSX.Element[];
  isLoading: boolean;
  isEmpty?: boolean;
-  emptyMessage?: string;
+  emptyMessage?: React.ReactNode;
  placeholder?: React.ReactNode;
 }

@ -192,7 +192,7 @@ const Slider = ({
            </div>
          ))}
        {isEmpty && (
-          <div className="mt-16 mb-16 text-center text-white">
+          <div className="mt-16 mb-16 text-center font-medium text-gray-400">
            {emptyMessage
              ? emptyMessage
              : intl.formatMessage(globalMessages.noresults)}
--- a/src/components/UserProfile/index.tsx
+++ b/src/components/UserProfile/index.tsx
@ -20,12 +20,11 @@ import type { TvDetails } from '@server/models/Tv';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
-import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';

 const messages = defineMessages({
  recentrequests: 'Recent Requests',
-  norequests: 'No requests.',
  limit: '{remaining} of {limit}',
  requestsperdays: '{limit} remaining',
  unlimited: 'Unlimited',
@ -35,6 +34,8 @@ const messages = defineMessages({
  seriesrequest: 'Series Requests',
  recentlywatched: 'Recently Watched',
  plexwatchlist: 'Plex Watchlist',
+  emptywatchlist:
+    'Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.',
 });

 type MediaTitle = MovieDetails | TvDetails;
@ -70,22 +71,24 @@ const UserProfile = () => {
      ? `/api/v1/user/${user.id}/quota`
      : null
  );
-  const { data: watchData } = useSWR<UserWatchDataResponse>(
-    user?.userType === UserType.PLEX &&
-      (user.id === currentUser?.id || currentHasPermission(Permission.ADMIN))
-      ? `/api/v1/user/${user.id}/watch_data`
-      : null
-  );
+  const { data: watchData, error: watchDataError } =
+    useSWR<UserWatchDataResponse>(
+      user?.userType === UserType.PLEX &&
+        (user.id === currentUser?.id || currentHasPermission(Permission.ADMIN))
+        ? `/api/v1/user/${user.id}/watch_data`
+        : null
+    );
  const { data: watchlistItems, error: watchlistError } =
    useSWR<WatchlistResponse>(
-      user?.id === currentUser?.id ||
-        currentHasPermission(
-          [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
-          {
-            type: 'or',
-          }
-        )
-        ? `/api/v1/user/${user?.id}/watchlist`
+      user?.userType === UserType.PLEX &&
+        (user.id === currentUser?.id ||
+          currentHasPermission(
+            [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
+            {
+              type: 'or',
+            }
+          ))
+        ? `/api/v1/user/${user.id}/watchlist`
        : null,
      {
        revalidateOnMount: true,
@ -146,7 +149,15 @@ const UserProfile = () => {
                  {intl.formatMessage(messages.totalrequests)}
                </dt>
                <dd className="mt-1 text-3xl font-semibold text-white">
-                  <FormattedNumber value={user.requestCount} />
+                  <Link
+                    href={
+                      user.id === currentUser?.id
+                        ? '/profile/requests?filter=all'
+                        : `/users/${user?.id}/requests?filter=all`
+                    }
+                  >
+                    <a>{intl.formatNumber(user.requestCount)}</a>
+                  </Link>
                </dd>
              </div>
              <div
@ -266,40 +277,49 @@ const UserProfile = () => {
        currentHasPermission(
          [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
          { type: 'or' }
-        )) && (
-        <>
-          <div className="slider-header">
-            <Link href={`/users/${user?.id}/requests?filter=all`}>
-              <a className="slider-title">
-                <span>{intl.formatMessage(messages.recentrequests)}</span>
-                <ArrowCircleRightIcon />
-              </a>
-            </Link>
-          </div>
-          <Slider
-            sliderKey="requests"
-            isLoading={!requests && !requestError}
-            isEmpty={
-              !!requests && !requestError && requests.results.length === 0
-            }
-            items={(requests?.results ?? []).map((request) => (
-              <RequestCard
-                key={`request-slider-item-${request.id}`}
-                request={request}
-                onTitleData={updateAvailableTitles}
-              />
-            ))}
-            placeholder={<RequestCard.Placeholder />}
-            emptyMessage={intl.formatMessage(messages.norequests)}
-          />
-        </>
-      )}
-      {(user.id === currentUser?.id ||
-        currentHasPermission(
-          [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
-          { type: 'or' }
        )) &&
-        (!watchlistItems || !!watchlistItems.results.length) &&
+        (!requests || !!requests.results.length) &&
+        !requestError && (
+          <>
+            <div className="slider-header">
+              <Link
+                href={
+                  user.id === currentUser?.id
+                    ? '/profile/requests?filter=all'
+                    : `/users/${user?.id}/requests?filter=all`
+                }
+              >
+                <a className="slider-title">
+                  <span>{intl.formatMessage(messages.recentrequests)}</span>
+                  <ArrowCircleRightIcon />
+                </a>
+              </Link>
+            </div>
+            <Slider
+              sliderKey="requests"
+              isLoading={!requests}
+              items={(requests?.results ?? []).map((request) => (
+                <RequestCard
+                  key={`request-slider-item-${request.id}`}
+                  request={request}
+                  onTitleData={updateAvailableTitles}
+                />
+              ))}
+              placeholder={<RequestCard.Placeholder />}
+            />
+          </>
+        )}
+      {user.userType === UserType.PLEX &&
+        (user.id === currentUser?.id ||
+          currentHasPermission(
+            [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
+            { type: 'or' }
+          )) &&
+        (!watchlistItems ||
+          !!watchlistItems.results.length ||
+          (user.id === currentUser?.id &&
+            (user.settings?.watchlistSyncMovies ||
+              user.settings?.watchlistSyncTv))) &&
        !watchlistError && (
          <>
            <div className="slider-header">
@ -318,7 +338,20 @@ const UserProfile = () => {
            </div>
            <Slider
              sliderKey="watchlist"
-              isLoading={!watchlistItems && !watchlistError}
+              isLoading={!watchlistItems}
+              isEmpty={!!watchlistItems && watchlistItems.results.length === 0}
+              emptyMessage={intl.formatMessage(messages.emptywatchlist, {
+                PlexWatchlistSupportLink: (msg: React.ReactNode) => (
+                  <a
+                    href="https://support.plex.tv/articles/universal-watchlist/"
+                    className="text-white transition duration-300 hover:underline"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {msg}
+                  </a>
+                ),
+              })}
              items={watchlistItems?.results.map((item) => (
                <TmdbTitleCard
                  id={item.tmdbId}
@ -330,9 +363,11 @@ const UserProfile = () => {
            />
          </>
        )}
-      {(user.id === currentUser?.id ||
-        currentHasPermission(Permission.ADMIN)) &&
-        !!watchData?.recentlyWatched.length && (
+      {user.userType === UserType.PLEX &&
+        (user.id === currentUser?.id ||
+          currentHasPermission(Permission.ADMIN)) &&
+        (!watchData || !!watchData.recentlyWatched.length) &&
+        !watchDataError && (
          <>
            <div className="slider-header">
              <div className="slider-title">
@ -342,8 +377,7 @@ const UserProfile = () => {
            <Slider
              sliderKey="media"
              isLoading={!watchData}
-              isEmpty={!watchData?.recentlyWatched.length}
-              items={watchData.recentlyWatched.map((item) => (
+              items={watchData?.recentlyWatched.map((item) => (
                <TmdbTitleCard
                  key={`media-slider-item-${item.id}`}
                  id={item.id}
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@ -23,7 +23,7 @@
  "components.Discover.discover": "Discover",
  "components.Discover.discovermovies": "Popular Movies",
  "components.Discover.discovertv": "Popular Series",
-  "components.Discover.noRequests": "No requests.",
+  "components.Discover.emptywatchlist": "Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.",
  "components.Discover.plexwatchlist": "Your Plex Watchlist",
  "components.Discover.popularmovies": "Popular Movies",
  "components.Discover.populartv": "Popular Series",
@ -91,7 +91,6 @@
  "components.IssueModal.CreateIssueModal.allseasons": "All Seasons",
  "components.IssueModal.CreateIssueModal.episode": "Episode {episodeNumber}",
  "components.IssueModal.CreateIssueModal.extras": "Extras",
-  "components.IssueModal.CreateIssueModal.issomethingwrong": "Is there a problem with {title}?",
  "components.IssueModal.CreateIssueModal.problemepisode": "Affected Episode",
  "components.IssueModal.CreateIssueModal.problemseason": "Affected Season",
  "components.IssueModal.CreateIssueModal.providedetail": "Please provide a detailed explanation of the issue you encountered.",
@ -1048,9 +1047,9 @@
  "components.UserProfile.UserSettings.menuNotifications": "Notifications",
  "components.UserProfile.UserSettings.menuPermissions": "Permissions",
  "components.UserProfile.UserSettings.unauthorizedDescription": "You do not have permission to modify this user's settings.",
+  "components.UserProfile.emptywatchlist": "Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.",
  "components.UserProfile.limit": "{remaining} of {limit}",
  "components.UserProfile.movierequests": "Movie Requests",
-  "components.UserProfile.norequests": "No requests.",
  "components.UserProfile.pastdays": "{type} (past {days} days)",
  "components.UserProfile.plexwatchlist": "Plex Watchlist",
  "components.UserProfile.recentlywatched": "Recently Watched",
--- a/src/pages/profile/requests.tsx
+++ b/src/pages/profile/requests.tsx
@ -0,0 +1,8 @@
+import RequestList from '@app/components/RequestList';
+import type { NextPage } from 'next';
+
+const UserRequestsPage: NextPage = () => {
+  return <RequestList />;
+};
+
+export default UserRequestsPage;