feat: plex watchlist sync integration (#2885)

src/components/Discover/index.tsx

@@ -2,9 +2,10 @@ import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
+import type { WatchlistItem } from '../../../server/interfaces/api/discoverInterfaces';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
-import { Permission, useUser } from '../../hooks/useUser';
+import { Permission, UserType, useUser } from '../../hooks/useUser';
 import PageTitle from '../Common/PageTitle';
 import MediaSlider from '../MediaSlider';
 import RequestCard from '../RequestCard';
@@ -25,11 +26,12 @@ const messages = defineMessages({
   noRequests: 'No requests.',
   upcoming: 'Upcoming Movies',
   trending: 'Trending',
+  plexwatchlist: 'Your Plex Watchlist',
 });
 
 const Discover = () => {
   const intl = useIntl();
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
 
   const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
     '/api/v1/media?filter=allavailable&take=20&sort=mediaAdded',
@@ -44,6 +46,15 @@ const Discover = () => {
       }
     );
 
+  const { data: watchlistItems, error: watchlistError } = useSWR<{
+    page: number;
+    totalPages: number;
+    totalResults: number;
+    results: WatchlistItem[];
+  }>(user?.userType === UserType.PLEX ? '/api/v1/discover/watchlist' : null, {
+    revalidateOnMount: true,
+  });
+
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.discover)} />
@@ -93,6 +104,30 @@ const Discover = () => {
         placeholder={<RequestCard.Placeholder />}
         emptyMessage={intl.formatMessage(messages.noRequests)}
       />
+      {(!watchlistItems || !!watchlistItems.results.length) && !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 && !watchlistError}
+            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)}