update ts

Author: Fedorse

src/App.jsx

@@ -57,7 +57,7 @@ const App = () => {
         selectedAlgorithm={selectedAlgorithm}
         currentTrack={history.currentTrack}
         algorithmState={algorithmState}
-        player={player}
+        playerState={player.playerState}
       />
     </section>
   );

src/components/Player/Player.jsx renamed to src/components/Player/Player.tsx

@@ -1,20 +1,31 @@
-import { useCallback, useRef } from 'react';
-
+import React, { useCallback, useRef } from 'react';
 import { speedOptions } from '../../constants';
-
 import ResetIcon from '../icon/ResetIcon';
 import NextStepIcon from '../icon/NextStepIcon';
 import PreviousStepIcon from '../icon/PreviousStepIcon';
 import PlayIcon from '../icon/PlayIcon';
-
 import InputRange from '../InputRange/InputRange';
 import Button from '../Button/Button';
 import PauseIcon from '../icon/PauseIcon';
 import DropDown from '../DropDown/DropDown';
+import { AlgorithmState, PlayerState } from '../../types';
 
 import './Player.css';
 
-const Player = ({
+type PlayerProps = {
+  selectAlgorithm: (algorithm: string) => void;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  resetAlgorithm: () => void;
+  setSpeed: (speed: number) => void;
+  handleAlgorithmRun: () => void;
+  speed: number;
+  selectedAlgorithm: string;
+  algorithmState: AlgorithmState;
+  playerState: PlayerState;
+};
+
+const Player: React.FC<PlayerProps> = ({
   selectAlgorithm,
   goToNextStep,
   goToPreviousStep,
@@ -24,10 +35,11 @@ const Player = ({
   handleAlgorithmRun,
   selectedAlgorithm,
   algorithmState,
-  player,
+  playerState,
 }) => {
-  const intervalRef = useRef(null);
-  const startInterval = (action) => {
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startInterval = (action: () => void) => {
     if (intervalRef.current === null) {
       intervalRef.current = setInterval(() => {
         action();
@@ -42,29 +54,29 @@ const Player = ({
     intervalRef.current = null;
   };
 
-  const handleMouseDown = (action) => {
+  const handleMouseDown = (action: () => void) => {
     action();
     startInterval(action);
   };
   const handleMouseUpOrLeave = () => {
     clearTimer();
   };
 
-  const getButtonText = useCallback(() => {
+  const getButtonIcon = useCallback(() => {
     if (algorithmState === 'notStarted') {
       return <PlayIcon />;
     }
     if (algorithmState === 'finished') {
       return <ResetIcon />;
     }
 
-    if (player.playerState === 'play') {
+    if (playerState === 'play') {
       return <PauseIcon />;
     }
     {
       return <PlayIcon />;
     }
-  }, [algorithmState, player]);
+  }, [algorithmState, playerState]);
 
   return (
     <div className="player-container">
@@ -84,7 +96,7 @@ const Player = ({
           >
             <PreviousStepIcon />
           </Button>
-          <Button onClick={handleAlgorithmRun}>{getButtonText()}</Button>
+          <Button onClick={handleAlgorithmRun}>{getButtonIcon()}</Button>
 
           <Button
             onMouseDown={() => handleMouseDown(goToNextStep)}

src/components/icon/DropDownIcon.jsx renamed to src/components/icon/DropDownIcon.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 const NextStepIcon = () => {
   return (
     <div>

src/components/icon/NextStepIcon.jsx renamed to src/components/icon/NextStepIcon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const PlayIcon = () => {
   return (
     <svg

src/components/icon/PauseIcon.jsx renamed to src/components/icon/PauseIcon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const PreviousStepIcon = () => {
   return (
     <svg

src/components/icon/PlayIcon.jsx renamed to src/components/icon/PlayIcon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const ResetIcon = () => {
   return (
     <svg

src/components/icon/PreviousStepIcon.jsx renamed to src/components/icon/PreviousStepIcon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const ResumePlay = () => {
   return (
     <svg

src/components/icon/ResetIcon.jsx renamed to src/components/icon/ResetIcon.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useState } from 'react';
 import { generateRandomArray } from '../utils/generateRandomArray';
 import { algorithms } from '../algorithms';
-
-type AlgorithmState = 'notStarted' | 'started' | 'finished';
+import { AlgorithmState } from '../types';
 
 export const useAlgorithm = ({ history, player }) => {
   const [selectedAlgorithm, setSelectedAlgorithm] = useState('quick');

src/components/icon/ResumePlay.jsx renamed to src/components/icon/ResumePlay.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-
-type PlayerState = 'forward' | 'backward' | 'pause' | 'play' | null;
+import { PlayerState } from '../types';
 
 export const usePlayer = () => {
   const [playerState, setPlayerState] = useState<PlayerState>(null);

src/hooks/useAlgorithm.ts

@@ -0,0 +1,3 @@
+export type AlgorithmState = 'notStarted' | 'started' | 'finished';
+
+export type PlayerState = 'forward' | 'backward' | 'pause' | 'play' | null;