feat: add discover customization (#3182)

src/components/Discover/RecentlyAddedSlider/index.tsx

@@ -0,0 +1,53 @@
+import Slider from '@app/components/Slider';
+import TmdbTitleCard from '@app/components/TitleCard/TmdbTitleCard';
+import { Permission, useUser } from '@app/hooks/useUser';
+import type { MediaResultsResponse } from '@server/interfaces/api/mediaInterfaces';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+
+const messages = defineMessages({
+  recentlyAdded: 'Recently Added',
+});
+
+const RecentlyAddedSlider = () => {
+  const intl = useIntl();
+  const { hasPermission } = useUser();
+  const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
+    '/api/v1/media?filter=allavailable&take=20&sort=mediaAdded',
+    { revalidateOnMount: true }
+  );
+
+  if (
+    (media && !media.results.length && !mediaError) ||
+    !hasPermission([Permission.MANAGE_REQUESTS, Permission.RECENT_VIEW], {
+      type: 'or',
+    })
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="slider-header">
+        <div className="slider-title">
+          <span>{intl.formatMessage(messages.recentlyAdded)}</span>
+        </div>
+      </div>
+      <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}
+          />
+        ))}
+      />
+    </>
+  );
+};
+
+export default RecentlyAddedSlider;