From 03d5e56678c3a372114a0256ee3431deee42cb57 Mon Sep 17 00:00:00 2001 From: TheCatLady <52870424+TheCatLady@users.noreply.github.com> Date: Tue, 30 Aug 2022 16:51:55 -0700 Subject: [PATCH] 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 --- src/components/Discover/index.tsx | 136 +++++++++------- .../IssueModal/CreateIssueModal/index.tsx | 1 - src/components/RequestList/index.tsx | 13 +- src/components/Slider/index.tsx | 4 +- src/components/UserProfile/index.tsx | 146 +++++++++++------- src/i18n/locale/en.json | 5 +- src/pages/profile/requests.tsx | 8 + 7 files changed, 192 insertions(+), 121 deletions(-) create mode 100644 src/pages/profile/requests.tsx diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx index 2e9cf368..24dc6fea 100644 --- 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 Plex Watchlist will appear here.', }); const Discover = () => { @@ -58,76 +59,97 @@ const Discover = () => { return ( <> - {hasPermission([Permission.MANAGE_REQUESTS, Permission.RECENT_VIEW], { - type: 'or', - }) && ( - <> -
-
- {intl.formatMessage(messages.recentlyAdded)} + {(!media || !!media.results.length) && + !mediaError && + hasPermission([Permission.MANAGE_REQUESTS, Permission.RECENT_VIEW], { + type: 'or', + }) && ( + <> +
+
+ {intl.formatMessage(messages.recentlyAdded)} +
-
- ( - - ))} - /> - - )} -
- - - {intl.formatMessage(messages.recentrequests)} - - - -
- ( - - ))} - placeholder={} - emptyMessage={intl.formatMessage(messages.noRequests)} - /> - {(!watchlistItems || !!watchlistItems.results.length) && !watchlistError && ( + ( + + ))} + /> + + )} + {(!requests || !!requests.results.length) && !requestError && ( <> ( - ( + ))} + placeholder={} /> )} + {user?.userType === UserType.PLEX && + (!watchlistItems || + !!watchlistItems.results.length || + user.settings?.watchlistSyncMovies || + user.settings?.watchlistSyncTv) && + !watchlistError && ( + <> + + ( + + {msg} + + ), + })} + items={watchlistItems?.results.map((item) => ( + + ))} + /> + + )} { const { user } = useUser({ id: Number(router.query.userId), }); + const { user: currentUser } = useUser(); const [currentFilter, setCurrentFilter] = useState(Filter.PENDING); const [currentSort, setCurrentSort] = useState('added'); const [currentPageSize, setCurrentPageSize] = useState(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 = () => {
+ {currentUser?.displayName} + + ) : router.query.userId ? ( {user?.displayName} diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx index d8e4a175..daef05f4 100644 --- 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 = ({
))} {isEmpty && ( -
+
{emptyMessage ? emptyMessage : intl.formatMessage(globalMessages.noresults)} diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx index 26a78d76..c8bf3b2a 100644 --- 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 Plex Watchlist will appear here.', }); type MediaTitle = MovieDetails | TvDetails; @@ -70,22 +71,24 @@ const UserProfile = () => { ? `/api/v1/user/${user.id}/quota` : null ); - const { data: watchData } = useSWR( - 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( + 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( - 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)}
- + + {intl.formatNumber(user.requestCount)} +
{ currentHasPermission( [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW], { type: 'or' } - )) && ( - <> - - ( - - ))} - 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 && ( + <> + + ( + + ))} + 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 && ( <>
@@ -318,7 +338,20 @@ const UserProfile = () => {
( + + {msg} + + ), + })} items={watchlistItems?.results.map((item) => ( { /> )} - {(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 && ( <>
@@ -342,8 +377,7 @@ const UserProfile = () => { ( + items={watchData?.recentlyWatched.map((item) => ( Plex Watchlist 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 Plex Watchlist 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", diff --git a/src/pages/profile/requests.tsx b/src/pages/profile/requests.tsx new file mode 100644 index 00000000..f70b0f79 --- /dev/null +++ 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 ; +}; + +export default UserRequestsPage;