refactor: use openapi client on song players | [#190]

Electron/src/__tests__/components/Footer/PlayerFiles.test.tsx

@@ -6,6 +6,7 @@ import Global from 'global/global';
 import Token from 'utils/token';
 import UserType from 'utils/role';
 import { act } from 'react-test-renderer';
+import getMockHeaders from 'utils/mockHeaders';
 
 const songName = 'songName';
 const userName = 'prueba';
@@ -30,6 +31,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => songMockFetch,
       status: 200,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });
@@ -39,6 +41,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => songMockFetch,
       status: 200,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });
@@ -48,6 +51,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => {},
       status: 204,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });
@@ -60,6 +64,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => {},
       status: 204,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });

Electron/src/__tests__/components/Footer/PlayerStreaming.test.tsx

@@ -6,6 +6,7 @@ import Global from 'global/global';
 import Token from 'utils/token';
 import UserType from 'utils/role';
 import { act } from 'react-test-renderer';
+import getMockHeaders from 'utils/mockHeaders';
 
 const songName = 'songName';
 const userName = 'prueba';
@@ -30,6 +31,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => songMockFetch,
       status: 200,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });
@@ -39,6 +41,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => songMockFetch,
       status: 200,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });
@@ -48,6 +51,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => {},
       status: 204,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });
@@ -60,6 +64,7 @@ global.fetch = jest.fn((url: string) => {
       json: () => {},
       status: 204,
       ok: true,
+      headers: getMockHeaders(),
     }).catch((error) => {
       console.log(error);
     });

Electron/src/components/AdvancedUIComponents/ContextMenu/Playlist/ContextMenuPlaylist.tsx

@@ -9,7 +9,7 @@ import Token from 'utils/token';
 import useFetchGetUserPlaylistNames from 'hooks/useFetchGetUserPlaylistNames';
 import { PlaylistsService } from 'swagger/api';
 import styles from '../contextMenu.module.css';
-import { PropsContextMenuPlaylist } from '../types/PropsContextMenu';
+import { PropsContextMenuPlaylist } from '../types/propsContextMenu';
 
 interface ConfirmationMenuData {
   title: string;

Electron/src/components/AdvancedUIComponents/ContextMenu/Song/ContextMenuSong.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import useFetchGetUserPlaylistNames from 'hooks/useFetchGetUserPlaylistNames';
 import { PlaylistsService } from 'swagger/api';
 import styles from '../contextMenu.module.css';
-import { PropsContextMenuSong } from '../types/PropsContextMenu';
+import { PropsContextMenuSong } from '../types/propsContextMenu';
 
 const MessagesInfoPopOver = {
   CLIPBOARD_TITLE: 'Enlace copiado al portapapeles',

Electron/src/components/ShowAllItems/Items/ItemsAllPlaylistFromUser.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { PropsPlaylistCard } from 'components/Cards/PlaylistCard/types/propsPlaylistCard';
 import PlaylistCard from 'components/Cards/PlaylistCard/PlaylistCard';
 import Global from 'global/global';
-import { PropsItemsPlaylistsFromUser } from '../types/PropsItems';
+import { PropsItemsPlaylistsFromUser } from '../types/propsItems';
 import defaultThumbnailPlaylist from '../../../assets/imgs/DefaultThumbnailPlaylist.jpg';
 
 export default function ItemsAllPlaylistsFromUser({

Electron/src/components/ShowAllItems/Items/ItemsAllPlaylists.tsx

@@ -1,6 +1,6 @@
 import PlaylistCard from 'components/Cards/PlaylistCard/PlaylistCard';
 import useFetchGetPlaylists from 'hooks/useFetchGetPlaylists';
-import { PropsItemsPlaylist } from '../types/PropsItems';
+import { PropsItemsPlaylist } from '../types/propsItems';
 import defaultThumbnailPlaylist from '../../../assets/imgs/DefaultThumbnailPlaylist.jpg';
 
 export default function ItemsAllPlaylists({

Electron/src/components/ShowAllItems/Items/ItemsAllSongsFromArtist.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import SongCard, { PropsSongCard } from 'components/Cards/SongCard/SongCard';
 import Global from 'global/global';
-import { PropsItemsSongsFromArtist } from '../types/PropsItems';
+import { PropsItemsSongsFromArtist } from '../types/propsItems';
 
 export default function ItemsAllSongsFromArtist({
   artistName,

Electron/src/components/ShowAllItems/ShowAllItems.tsx

@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 import styles from './showAllItems.module.css';
 import ItemsPlaylist from './Items/ItemsAllPlaylists';
-import { PropsAllItems, ShowAllItemsTypes } from './types/PropsShowAllItems';
+import { PropsAllItems, ShowAllItemsTypes } from './types/propsShowAllItems';
 import ItemsArtist from './Items/ItemsAllArtist';
 import ItemsAllPlaylistsFromUser from './Items/ItemsAllPlaylistFromUser';
 import ItemsAllSongsFromArtist from './Items/ItemsAllSongsFromArtist';

Electron/src/components/Sidebar/Playlist/Playlist.tsx

@@ -3,7 +3,7 @@ import Popover, { PopoverPosition } from '@mui/material/Popover';
 import { useEffect, useState, MouseEvent } from 'react';
 import ContextMenuPlaylist from 'components/AdvancedUIComponents/ContextMenu/Playlist/ContextMenuPlaylist';
 import styles from './playlist.module.css';
-import { PropsPlaylist } from '../types/propsPlaylist.module';
+import { PropsPlaylist } from '../types/propsPlaylist';
 
 export default function Playlist({
   name,

Electron/src/components/Song/Song.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, MouseEvent } from 'react';
-import { PropsSongs } from 'components/Sidebar/types/propsSongs.module';
+import { PropsSongs } from 'components/Sidebar/types/propsSongs';
 import ContextMenuSong from 'components/AdvancedUIComponents/ContextMenu/Song/ContextMenuSong';
 import Popover, { PopoverPosition } from '@mui/material/Popover';
 import { useNavigate } from 'react-router-dom';

Electron/src/components/footer/Footer.tsx

@@ -6,14 +6,15 @@ import SongInfo from './SongInfo/SongInfo';
 import SongConfig from './SongConfig/SongConfig';
 import PlayerStreaming from './Player/PlayerStreaming';
 import PlayerFiles from './Player/PlayerFiles';
+import { PropsSongInfo } from './SongInfo/types/propsSongInfo';
 
 interface PropsFooter {
   songName: string;
 }
 
 export default function Footer({ songName }: PropsFooter) {
   const [volume, setVolume] = useState<number>(50);
-  const [songInfo, setSongInfo] = useState<JSON | undefined>();
+  const [songInfo, setSongInfo] = useState<PropsSongInfo | undefined>();
 
   return (
     <div

Electron/src/components/footer/Player/PlayerFiles.tsx

@@ -7,14 +7,12 @@ import {
 } from 'react';
 import Global from 'global/global';
 import Token from 'utils/token';
+import { SongsService, UsersService } from 'swagger/api';
 import styles from './player.module.css';
 import TimeSlider from './TimeSlider/TimeSlider';
+import { PropsPlayer } from './types/propsPlayer';
 
-interface PropsPlayer {
-  volume: number;
-  songName: string;
-  changeSongInfo: (data: JSON) => void;
-}
+// TODO refactor common logic with streaming player
 
 export default function Player({
   volume,
@@ -84,69 +82,52 @@ export default function Player({
 
   /* Handles updates of DB when song is played */
 
-  const handleIncreaseSongStreams = () => {
-    const requestOptions: RequestInit = {
-      method: 'PATCH',
-    };
-    const fetchUrlUpdateSong: string = `${Global.backendBaseUrl}/songs/${songName}/streams`;
-
-    fetch(fetchUrlUpdateSong, requestOptions).catch(() =>
-      console.log('Unable to update number of plays'),
-    );
+  const handleIncreaseSongStreams = async () => {
+    try {
+      await SongsService.increaseSongStreamsSongsNameStreamsPatch(songName);
+    } catch (err) {
+      console.log(`Unable to update number of streams of Song ${songName}`);
+      console.log(err);
+    }
   };
 
-  const handleUpdatePlaybackHistory = () => {
-    const username = Token.getTokenUsername();
+  const handleUpdatePlaybackHistory = async () => {
+    const userName = Token.getTokenUsername();
 
-    const fetchPatchPlayBackHistory: string = `${Global.backendBaseUrl}/users/${username}/playback_history?song_name=${songName}`;
-
-    const requestOptionsUpdatePlaybackHistory: RequestInit = {
-      method: 'PATCH',
-    };
-
-    fetch(fetchPatchPlayBackHistory, requestOptionsUpdatePlaybackHistory).catch(
-      () => console.log('Unable to update playback history'),
-    );
+    try {
+      await UsersService.patchPlaybackHistoryUsersNamePlaybackHistoryPatch(
+        userName,
+        songName,
+      );
+    } catch (err) {
+      console.log(
+        `Unable to update User ${userName} playback history with Son ${songName}`,
+      );
+      console.log(err);
+    }
   };
 
   /* Loads the song and metadata to the Player */
-  const handleMetaData = async () => {
+  const handlSongInfo = async () => {
     try {
       if (audio.current) {
         audio.current.pause();
       }
 
       if (songName === Global.noSongPlaying) return;
 
-      const resFetchSong = await fetch(
-        `${Global.backendBaseUrl}/songs/${songName}`,
-      );
-
-      const resFetchSongJson = await resFetchSong.json();
+      const songData = await SongsService.getSongSongsNameGet(songName);
 
       handleIncreaseSongStreams();
       handleUpdatePlaybackHistory();
-      const resFetchSongDTO = await fetch(
-        `${Global.backendBaseUrl}/songs/metadata/${songName}`,
-      );
-
-      const username = Token.getTokenUsername();
-
-      const fetchPatchPlayBackHistory: string = `${Global.backendBaseUrl}/users/${username}/playback_history?song_name=${songName}`;
-
-      const requestOptionsUpdatePlaybackHistory: RequestInit = {
-        method: 'PATCH',
-      };
-
-      fetch(
-        fetchPatchPlayBackHistory,
-        requestOptionsUpdatePlaybackHistory,
-      ).catch(() => console.log('Unable to update playback history'));
 
-      const resFetchSongDTOJson = await resFetchSongDTO.json();
-      changeSongInfo(resFetchSongDTOJson);
+      changeSongInfo({
+        name: songData.name,
+        thumbnail: songData.thumbnail,
+        artist: songData.artist,
+      });
 
-      let audioBytesString = resFetchSongJson.file;
+      let audioBytesString = songData.file;
 
       if (audioBytesString !== undefined) {
         audioBytesString = audioBytesString
@@ -218,15 +199,17 @@ export default function Player({
     }
   };
 
+  // TODO use hooks
   useEffect(() => {
     if (audio.current) {
       audio.current.pause();
       handlePause();
     }
-    handleMetaData();
+    handlSongInfo();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [songName, changeSongInfo]);
 
+  // TODO put inside single use effect?
   useEffect(() => {
     /* Pause audio if component unmount */
     return () => {