From 8a08e7dcca1fd93346ff7ea7730750e79d399cb0 Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Sun, 16 Feb 2025 13:19:21 +0100
Subject: [PATCH] Refac move PlaylistType into loader and fix new response type

---
 frontend/src/api/loader/loadPlaylistById.ts   | 28 ++++++++++++++++++-
 .../src/components/EmbeddableVideoPlayer.tsx  |  2 +-
 frontend/src/components/PlaylistList.tsx      |  2 +-
 frontend/src/pages/Playlist.tsx               | 27 +++---------------
 frontend/src/pages/Playlists.tsx              | 10 +------
 frontend/src/pages/Search.tsx                 |  2 +-
 frontend/src/pages/Video.tsx                  |  2 +-
 7 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/frontend/src/api/loader/loadPlaylistById.ts b/frontend/src/api/loader/loadPlaylistById.ts
index ad31fcf6..44007945 100644
--- a/frontend/src/api/loader/loadPlaylistById.ts
+++ b/frontend/src/api/loader/loadPlaylistById.ts
@@ -1,6 +1,32 @@
 import APIClient from '../../functions/APIClient';
 
-const loadPlaylistById = async (playlistId: string | undefined) => {
+export type PlaylistEntryType = {
+  youtube_id: string;
+  title: string;
+  uploader: string;
+  idx: number;
+  downloaded: boolean;
+};
+
+export type PlaylistType = {
+  playlist_active: boolean;
+  playlist_channel: string;
+  playlist_channel_id: string;
+  playlist_description: string;
+  playlist_entries: PlaylistEntryType[];
+  playlist_id: string;
+  playlist_last_refresh: string;
+  playlist_name: string;
+  playlist_subscribed: boolean;
+  playlist_thumbnail: string;
+  playlist_type: string;
+  _index: string;
+  _score: number;
+};
+
+export type PlaylistResponseType = PlaylistType;
+
+const loadPlaylistById = async (playlistId: string | undefined): Promise<PlaylistResponseType> => {
   return APIClient(`/api/playlist/${playlistId}/`);
 };
 
diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx
index de393fe5..4bab055d 100644
--- a/frontend/src/components/EmbeddableVideoPlayer.tsx
+++ b/frontend/src/components/EmbeddableVideoPlayer.tsx
@@ -46,7 +46,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
             playlistIds.map(async playlistid => {
               const playlistResponse = await loadPlaylistById(playlistid);
 
-              return playlistResponse.data;
+              return playlistResponse;
             }),
           );
 
diff --git a/frontend/src/components/PlaylistList.tsx b/frontend/src/components/PlaylistList.tsx
index 03317097..182499db 100644
--- a/frontend/src/components/PlaylistList.tsx
+++ b/frontend/src/components/PlaylistList.tsx
@@ -1,11 +1,11 @@
 import { Link } from 'react-router-dom';
 import Routes from '../configuration/routes/RouteList';
-import { PlaylistType } from '../pages/Playlist';
 import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscription';
 import formatDate from '../functions/formatDates';
 import Button from './Button';
 import PlaylistThumbnail from './PlaylistThumbnail';
 import { useUserConfigStore } from '../stores/UserConfigStore';
+import { PlaylistType } from '../api/loader/loadPlaylistById';
 
 type PlaylistListProps = {
   playlistList: PlaylistType[] | undefined;
diff --git a/frontend/src/pages/Playlist.tsx b/frontend/src/pages/Playlist.tsx
index 7f229ca8..b82dfecb 100644
--- a/frontend/src/pages/Playlist.tsx
+++ b/frontend/src/pages/Playlist.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
-import loadPlaylistById from '../api/loader/loadPlaylistById';
+import loadPlaylistById, { PlaylistResponseType } from '../api/loader/loadPlaylistById';
 import { OutletContextType } from './Base';
 import { VideoType } from './Home';
 import Filterbar from '../components/Filterbar';
-import { PlaylistEntryType } from './Playlists';
 import loadChannelById from '../api/loader/loadChannelById';
 import VideoList from '../components/VideoList';
 import Pagination, { PaginationType } from '../components/Pagination';
@@ -25,24 +24,6 @@ import loadVideoListByFilter from '../api/loader/loadVideoListByPage';
 import useIsAdmin from '../functions/useIsAdmin';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 
-export type PlaylistType = {
-  playlist_active: boolean;
-  playlist_channel: string;
-  playlist_channel_id: string;
-  playlist_description: string;
-  playlist_entries: PlaylistEntryType[];
-  playlist_id: string;
-  playlist_last_refresh: string;
-  playlist_name: string;
-  playlist_subscribed: boolean;
-  playlist_thumbnail: string;
-  playlist_type: string;
-  _index: string;
-  _score: number;
-};
-
-export type PlaylistResponseType = PlaylistType;
-
 export type VideoResponseType = {
   data?: VideoType[];
   paginate?: PaginationType;
@@ -94,9 +75,9 @@ const Playlist = () => {
         sort: 'downloaded', // downloaded or published? or playlist sort order?
       });
 
-      const isCustomPlaylist = playlist?.data?.playlist_type === 'custom';
+      const isCustomPlaylist = playlist?.playlist_type === 'custom';
       if (!isCustomPlaylist) {
-        const channel = await loadChannelById(playlist.data.playlist_channel_id);
+        const channel = await loadChannelById(playlist.playlist_channel_id);
 
         setChannelResponse(channel);
       }
@@ -294,7 +275,7 @@ const Playlist = () => {
           </div>
         </div>
 
-        {playlist.playlist_description && (
+        {playlist.playlist_description !== 'False' && (
           <div className="description-box">
             <p
               id={descriptionExpanded ? 'text-expand-expanded' : 'text-expand'}
diff --git a/frontend/src/pages/Playlists.tsx b/frontend/src/pages/Playlists.tsx
index f7bb80af..d7e4539d 100644
--- a/frontend/src/pages/Playlists.tsx
+++ b/frontend/src/pages/Playlists.tsx
@@ -9,7 +9,6 @@ import { OutletContextType } from './Base';
 import loadPlaylistList from '../api/loader/loadPlaylistList';
 import Pagination, { PaginationType } from '../components/Pagination';
 import PlaylistList from '../components/PlaylistList';
-import { PlaylistType } from './Playlist';
 import updateBulkPlaylistSubscriptions from '../api/actions/updateBulkPlaylistSubscriptions';
 import createCustomPlaylist from '../api/actions/createCustomPlaylist';
 import ScrollToTopOnNavigate from '../components/ScrollToTop';
@@ -18,14 +17,7 @@ import useIsAdmin from '../functions/useIsAdmin';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import Notifications from '../components/Notifications';
 import updateUserConfig, { UserConfigType } from '../api/actions/updateUserConfig';
-
-export type PlaylistEntryType = {
-  youtube_id: string;
-  title: string;
-  uploader: string;
-  idx: number;
-  downloaded: boolean;
-};
+import { PlaylistType } from '../api/loader/loadPlaylistById';
 
 export type PlaylistsResponseType = {
   data?: PlaylistType[];
diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx
index 3d9bcdf6..b391ee18 100644
--- a/frontend/src/pages/Search.tsx
+++ b/frontend/src/pages/Search.tsx
@@ -2,7 +2,6 @@ import { useSearchParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { VideoType } from './Home';
 import loadSearch from '../api/loader/loadSearch';
-import { PlaylistType } from './Playlist';
 import { ChannelType } from './Channels';
 import VideoList from '../components/VideoList';
 import ChannelList from '../components/ChannelList';
@@ -12,6 +11,7 @@ import { ViewStyles } from '../configuration/constants/ViewStyle';
 import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer';
 import SearchExampleQueries from '../components/SearchExampleQueries';
 import { useUserConfigStore } from '../stores/UserConfigStore';
+import { PlaylistType } from '../api/loader/loadPlaylistById';
 
 const EmptySearchResponse: SearchResultsType = {
   results: {
diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx
index 14be57b2..cb05a592 100644
--- a/frontend/src/pages/Video.tsx
+++ b/frontend/src/pages/Video.tsx
@@ -31,7 +31,6 @@ import loadPlaylistList from '../api/loader/loadPlaylistList';
 import { PlaylistsResponseType } from './Playlists';
 import PaginationDummy from '../components/PaginationDummy';
 import updateCustomPlaylist from '../api/actions/updateCustomPlaylist';
-import { PlaylistType } from './Playlist';
 import loadCommentsbyVideoId from '../api/loader/loadCommentsbyVideoId';
 import CommentBox, { CommentsType } from '../components/CommentBox';
 import Button from '../components/Button';
@@ -39,6 +38,7 @@ import getApiUrl from '../configuration/getApiUrl';
 import loadVideoNav, { VideoNavResponseType } from '../api/loader/loadVideoNav';
 import useIsAdmin from '../functions/useIsAdmin';
 import ToggleConfig from '../components/ToggleConfig';
+import { PlaylistType } from '../api/loader/loadPlaylistById';
 // import { useAppSettingsStore } from '../stores/AppSettingsStore';
 
 const isInPlaylist = (videoId: string, playlist: PlaylistType) => {