Refac move PlaylistType into loader and fix new response type

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}/`);
 };
 

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;
             }),
           );
 

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;

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'}

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[];

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: {

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) => {