Merge pull request #58 from WAVONA-team/revert-56-test-4

Revert "feat(TEST-4): track fix"
WAVONA-team · Jun 4, 2024 · 9b8ec63 · 9b8ec63
2 parents 77ccbfa + c6e001b
commit 9b8ec63
Show file tree

Hide file tree

Showing 16 changed files with 150 additions and 205 deletions.
diff --git a/src/components/TrackInfo/TrackInfo.tsx b/src/components/TrackInfo/TrackInfo.tsx
@@ -123,7 +123,8 @@ const TrackInfo: React.FC<Props> = React.memo(
           className={classNames(
             'cursor-pointer relative w-full grid grid-cols-[64px_1fr_24px] gap-x-4 lg:grid-cols-[64px_1fr_1fr_1fr_24px] lg:rounded-[4px] items-center py-2 px-4 lg:px-2',
             {
-              'bg-background-trackInfo': isPlay && playerState,
+              'bg-background-trackInfo':
+                isPlay && playerState,
             },
           )}
         >

diff --git a/src/modules/Player/components/Playback/Playback.tsx b/src/modules/Player/components/Playback/Playback.tsx
@@ -70,16 +70,16 @@ export const Playback: React.FC = React.memo(() => {
     changeDuration(state);
   };
 
-  const handlerOnEnded = async () => {
+  const handlerOnEnded = () => {
     const currentTrackIndex = tracks?.findIndex(
       (track) => track.url === currentTrack?.url,
     ) as number;
 
     if (tracks && tracks[currentTrackIndex + 1]) {
-      await changeCurrentTrack(tracks[currentTrackIndex + 1]);
+      changeCurrentTrack(tracks[currentTrackIndex + 1]);
     } else {
       changePlayerState(false);
-      await changeCurrentTrack(null);
+      changeCurrentTrack(null);
     }
   };
 

diff --git a/src/modules/Player/components/TrackControlButtons/TrackControlButtons.tsx b/src/modules/Player/components/TrackControlButtons/TrackControlButtons.tsx
@@ -15,35 +15,35 @@ export const TrackControlButtons: React.FC = React.memo(() => {
     }),
   );
 
-  const NextTrack = async () => {
+  const NextTrack = () => {
     const currentTrackIndex = tracks?.findIndex(
       (track) => track.url === currentTrack?.url,
     ) as number;
 
     const nextTrack = tracks![currentTrackIndex + 1];
 
     if (tracks && nextTrack) {
-      return await changeCurrentTrack(nextTrack);
+      return changeCurrentTrack(nextTrack);
     }
 
     if (tracks && !nextTrack) {
-      return await changeCurrentTrack(tracks[0]);
+      return changeCurrentTrack(tracks[0]);
     }
   };
 
-  const PreviosTrack = async () => {
+  const PreviosTrack = () => {
     const currentTrackIndex = tracks?.findIndex(
       (track) => track.url === currentTrack?.url,
     ) as number;
 
     const previousTrack = tracks![currentTrackIndex - 1];
 
     if (tracks && previousTrack) {
-      return await changeCurrentTrack(previousTrack);
+      return changeCurrentTrack(previousTrack);
     }
 
     if (tracks && !previousTrack) {
-      return await changeCurrentTrack(tracks[tracks.length - 1]);
+      return changeCurrentTrack(tracks[tracks.length - 1]);
     }
   };
 

diff --git a/src/modules/Player/store/index.ts b/src/modules/Player/store/index.ts
@@ -14,12 +14,11 @@ export const createPlayerSlice: StateCreator<PlayerState> = (set) => ({
   duration: 0,
   seekTo: 0,
   seeking: false,
-  setTracks: (tracks) => set({ tracks }),
+  setTracks: (tracks: Track[]) => set({ tracks }),
   changePlayerState: (playerState: boolean) => set({ playerState }),
   changeIsLoop: (isLoop: boolean) => set({ isLoop }),
   changeVolume: (volume: number) => set({ volume }),
-  changeCurrentTrack: async (currentTrack: Track | null) =>
-    set({ currentTrack }),
+  changeCurrentTrack: (currentTrack: Track | null) => set({ currentTrack }),
   changeCurrentTime: (currentTime: number) => set({ currentTime }),
   changeSecondsLoaded: (secondsLoaded: number) => set({ secondsLoaded }),
   changeDuration: (duration: number) => set({ duration }),

diff --git a/src/modules/Player/store/types/PlayerState.ts b/src/modules/Player/store/types/PlayerState.ts
@@ -11,11 +11,11 @@ export type PlayerState = {
   duration: number;
   seekTo: number;
   seeking: boolean;
-  setTracks: (tracks: Track[] | null) => void;
+  setTracks: (tracks: Track[]) => void;
   changePlayerState: (playerState: boolean) => void;
   changeIsLoop: (isLoop: boolean) => void;
   changeVolume: (volume: number) => void;
-  changeCurrentTrack: (track: Track | null) => Promise<void>;
+  changeCurrentTrack: (track: Track | null) => void;
   changeCurrentTime: (currentTime: number) => void;
   changeSecondsLoaded: (secondsLoaded: number) => void;
   changeDuration: (duration: number) => void;

diff --git a/src/modules/TrackAddition/components/TrackAddition/TrackAddition.tsx b/src/modules/TrackAddition/components/TrackAddition/TrackAddition.tsx
@@ -66,7 +66,6 @@ const TrackAddition: React.FC = memo(() => {
     watch,
     control,
     setError,
-    clearErrors,
     formState: { errors },
   } = useForm({
     defaultValues: {
@@ -121,9 +120,6 @@ const TrackAddition: React.FC = memo(() => {
               className="mb-8 max-w-sm lg:mb-12"
               onChange={(event) => {
                 onChange(event.target.value);
-                clearErrors('url');
-                changePlayerState(false);
-                changeCurrentTrack(null);
 
                 if (!event.target.value.length) {
                   clearParsedTrack();
@@ -153,58 +149,54 @@ const TrackAddition: React.FC = memo(() => {
 
       {parsedTrack && !isParsedTrackLoading && (
         <>
-          <div className="xl:hidden">
-            <AnimatePresence>
-              <motion.div
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10, display: 'none' }}
-                transition={{ duration: 0.2 }}
-              >
-                <TrackInfo
-                  artist={parsedTrack.author as string}
-                  name={parsedTrack.title}
-                  provider={parsedTrack.source}
-                  duration={parsedTrackDuration || parsedTrack.duration}
-                  imgUrl={parsedTrack.imgUrl as string}
-                  isPlay={parsedTrack.url === currentTrack?.url}
-                  handlerPlay={async () => {
-                    await changeCurrentTrack(parsedTrack).then(() =>
-                      changePlayerState(!playerState),
-                    );
-                  }}
-                  handlerModal={() => {}}
-                />
-              </motion.div>
-            </AnimatePresence>
-          </div>
-
-          <div className="hidden xl:block">
-            <AnimatePresence>
-              <motion.div
-                initial={{ opacity: 0, y: -10, display: 'none' }}
-                animate={{ opacity: 1, y: 0, display: 'block' }}
-                exit={{ opacity: 0, y: -10, display: 'none' }}
-                transition={{ duration: 0.2, delay: 0.1 }}
-              >
-                <TrackInfo
-                  isDesktop={true}
-                  artist={parsedTrack.author as string}
-                  name={parsedTrack.title}
-                  provider={parsedTrack.source}
-                  duration={parsedTrackDuration || parsedTrack.duration}
-                  imgUrl={parsedTrack.imgUrl as string}
-                  isPlay={parsedTrack.url === currentTrack?.url}
-                  handlerPlay={async () => {
-                    await changeCurrentTrack(parsedTrack).then(() =>
-                      changePlayerState(!playerState),
-                    );
-                  }}
-                  handlerModal={() => {}}
-                />
-              </motion.div>
-            </AnimatePresence>
-          </div>
+          <AnimatePresence>
+            <motion.div
+              className="xl:hidden"
+              initial={{ opacity: 0, y: -10, display: 'none' }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10, display: 'none' }}
+              transition={{ duration: 0.2 }}
+            >
+              <TrackInfo
+                artist={parsedTrack.author as string}
+                name={parsedTrack.title}
+                provider={parsedTrack.source}
+                duration={parsedTrackDuration || parsedTrack.duration}
+                imgUrl={parsedTrack.imgUrl as string}
+                isPlay={parsedTrack.url === currentTrack?.url}
+                handlerPlay={() => {
+                  changeCurrentTrack(parsedTrack);
+                  changePlayerState(!playerState);
+                }}
+                handlerModal={() => {}}
+              />
+            </motion.div>
+          </AnimatePresence>
+
+          <AnimatePresence>
+            <motion.div
+              className="hidden xl:block"
+              initial={{ opacity: 0, y: -10, display: 'none' }}
+              animate={{ opacity: 1, y: 0, display: 'block' }}
+              exit={{ opacity: 0, y: -10, display: 'none' }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+            >
+              <TrackInfo
+                isDesktop={true}
+                artist={parsedTrack.author as string}
+                name={parsedTrack.title}
+                provider={parsedTrack.source}
+                duration={parsedTrackDuration || parsedTrack.duration}
+                imgUrl={parsedTrack.imgUrl as string}
+                isPlay={parsedTrack.url === currentTrack?.url}
+                handlerPlay={() => {
+                  changeCurrentTrack(parsedTrack);
+                  changePlayerState(!playerState);
+                }}
+                handlerModal={() => {}}
+              />
+            </motion.div>
+          </AnimatePresence>
         </>
       )}
 

diff --git a/src/modules/TrackHistory/components/TrackHistory.tsx b/src/modules/TrackHistory/components/TrackHistory.tsx
@@ -58,13 +58,13 @@ export const TrackHistory: React.FC = React.memo(() => {
                 duration={track.duration}
                 imgUrl={track.imgUrl as string}
                 isPlay={currentTrack?.url === track.url}
-                handlerPlay={async () => {
-                  await changeCurrentTrack(track).then(() => {
-                    changePlayerState(
-                      currentTrack?.url !== track.url ? true : !playerState,
-                    );
-                    updateHistoryOrder(track.id);
-                  });
+                handlerPlay={() => {
+                  changeCurrentTrack(track);
+                  changePlayerState(
+                    currentTrack?.url !== track.url ? true : !playerState,
+                  );
+
+                  updateHistoryOrder(track.id);
                 }}
                 handlerModal={() => {}}
               />

diff --git a/src/modules/TrackList/components/TrackList.tsx b/src/modules/TrackList/components/TrackList.tsx
@@ -14,19 +14,11 @@ type Props = {
   setIsLoading: (state: boolean) => void;
   tracks: Track[];
   totalTracks: number;
-  header: string;
-  headerCondition?: boolean;
+  header?: string;
 };
 
 const TrackList: React.FC<Props> = React.memo(
-  ({
-    isLoading,
-    setIsLoading,
-    tracks,
-    totalTracks,
-    header,
-    headerCondition = true,
-  }) => {
+  ({ isLoading, setIsLoading, tracks, totalTracks, header }) => {
     const { currentTrack, changeCurrentTrack, changePlayerState, playerState } =
       useStore(
         ({
@@ -42,12 +34,9 @@ const TrackList: React.FC<Props> = React.memo(
         }),
       );
 
-    const handleTrack = async (track: Track) => {
-      await changeCurrentTrack(track).then(() =>
-        changePlayerState(
-          track.url === currentTrack?.url ? !playerState : true,
-        ),
-      );
+    const handleTrack = (track: Track) => {
+      changeCurrentTrack(track);
+      changePlayerState(track.url === currentTrack?.url ? !playerState : true);
     };
 
     const scrollHandler = useCallback(() => {
@@ -72,25 +61,19 @@ const TrackList: React.FC<Props> = React.memo(
     }, [scrollHandler]);
 
     return (
-      <div className="mb-8 sm:mb-12 flex flex-col gap-11 relative">
-        {isLoading && (
-          <Container className="flex justify-center absolute left-1/2 -translate-x-1/2 -top-4">
-            <Spinner width="w-7" height="h-7" />
-          </Container>
-        )}
-
-        {!isLoading && !tracks.length && headerCondition && (
+      <div className="mb-8 sm:mb-12 flex flex-col gap-11">
+        {!isLoading && !tracks.length && (
           <Container>
             <h2
               className="
-                font-rubik
-                font-semibold
-                text-secondary-cadet-gray
-                text-2xl
-                sm:text-2xl
-                lg:text-xl
-                tracking-wide
-              "
+            font-rubik
+            font-semibold
+            text-secondary-cadet-gray
+            text-2xl
+            sm:text-2xl
+            lg:text-xl
+            tracking-wide
+          "
             >
               {header}
             </h2>
@@ -123,6 +106,12 @@ const TrackList: React.FC<Props> = React.memo(
             </div>
           )}
         </AnimatePresence>
+
+        {isLoading && (
+          <Container className="flex justify-center">
+            <Spinner width="w-7" height="h-7" />
+          </Container>
+        )}
       </div>
     );
   },

diff --git a/src/pages/SettingsPage/SettingsPage.tsx b/src/pages/SettingsPage/SettingsPage.tsx
@@ -9,35 +9,7 @@ import { Container } from '@/ui/Container';
 import arrowIcon from '../../../public/arrows/arrowIcon.svg';
 
 export const SettingsPage: React.FC = React.memo(() => {
-  const {
-    logout,
-    setTracks,
-    changePlayerState,
-    changeCurrentTrack,
-    setUserTracks,
-  } = useStore(
-    ({
-      logout,
-      setTracks,
-      changePlayerState,
-      changeCurrentTrack,
-      setUserTracks,
-    }) => ({
-      logout,
-      setTracks,
-      changePlayerState,
-      changeCurrentTrack,
-      setUserTracks,
-    }),
-  );
-
-  const logoutHandler = async () => {
-    setUserTracks([]);
-    setTracks(null);
-    changePlayerState(false);
-    changeCurrentTrack(null);
-    logout();
-  };
+  const { logout } = useStore(({ logout }) => ({ logout }));
 
   return (
     <Container
@@ -123,7 +95,7 @@ export const SettingsPage: React.FC = React.memo(() => {
             text-start
             focus:outline-none
           "
-            onClick={logoutHandler}
+            onClick={logout}
           >
             <span>Выйти</span>
           </button>

diff --git a/src/pages/TrackSearchPage/TrackSearchPage.tsx b/src/pages/TrackSearchPage/TrackSearchPage.tsx
@@ -19,7 +19,7 @@ export const TrackSearchPage: React.FC = React.memo(() => {
       <Container>
         <Search />
 
-        <div className="mt-4 relative">
+        <div className="mt-4">
           <TracksContainer />
         </div>
       </Container>