update typeScript and fix bug speed

Author: Fedorse

package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md}\""
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md}\"",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "react": "^18.3.1",

src/App.jsx

@@ -37,15 +37,15 @@ const App = () => {
   }, [player, runAlgorithm, resetAll, algorithmState]);
 
   // refactor - use CSS instead of JS logic  (hint: media queries, dvh units)
-  const barWidth = window.screen.width / array.length;
   disableScroll();
 
   const step = getCurrentStep();
+  console.log(step);
 
   return (
     <section>
       <span className="title-algorithm">{selectedAlgorithm} Sort</span>
-      <BarContainer {...step} barWidth={barWidth} />
+      <BarContainer {...step} />
       <Player
         selectAlgorithm={selectAlgorithm}
         goToNextStep={() => player.setPlayerState('forward')}

src/actions/useClickOutside.ts

@@ -1,9 +1,18 @@
 import { useEffect } from 'react';
 
-const useClickOutside = (callback, targetClass) => {
+type useClickOutsideProps = {
+  callback: () => void;
+  targetClass: string;
+};
+
+const useClickOutside = ({
+  callback,
+  targetClass,
+}: useClickOutsideProps): void => {
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (!event.target.closest(`.${targetClass}`)) {
+    const handleClickOutside = (event: MouseEvent): void => {
+      const target = event.target as HTMLElement | null;
+      if (target && !target.closest(`.${targetClass}`)) {
         callback();
       }
     };

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

@@ -1,6 +1,20 @@
 import './Bar.css';
 
-const Bar = ({ width, height, isActive, isCompare, isPivot }) => {
+type BarProps = {
+  width: number;
+  height: number;
+  isActive: boolean | null;
+  isCompare: boolean | null;
+  isPivot: boolean | null;
+};
+
+const Bar: React.FC<BarProps> = ({
+  width,
+  height,
+  isActive,
+  isCompare,
+  isPivot,
+}) => {
   const barStyles = {
     height: `${height}px`,
     width: `${width}px`,

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

@@ -1,10 +1,19 @@
 import Bar from '../Bar/Bar';
+import { Tracking } from '../../types';
 
 import './BarContainer.css';
 
-const Array = ({ barWidth, array, tracking }) => {
+type BarContainerProps = {
+  array: number[];
+  tracking: Tracking;
+};
+
+const BarContainer: React.FC<BarContainerProps> = ({ array, tracking }) => {
   const { activeIndex, compareIndex, pivotIndex } = tracking;
 
+  //Calculate width each column in array
+  const barWidth = window.screen.width / array.length;
+
   return (
     <div className="arr">
       {array.map((heightPx, index) => (
@@ -21,4 +30,4 @@ const Array = ({ barWidth, array, tracking }) => {
   );
 };
 
-export default Array;
+export default BarContainer;

src/components/Button/Button.jsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+
+import './Button.css';
+
+type ButtonProps = {
+  onClick?: () => void;
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseUp?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onTouchCancel?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  onTouchStart?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  onTouchEnd?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  children?: ReactNode;
+  className?: string;
+};
+
+const Button: React.FC<ButtonProps> = ({
+  onClick,
+  onMouseDown,
+  onMouseUp,
+  onMouseLeave,
+  onTouchCancel,
+  onTouchStart,
+  onTouchEnd,
+  children,
+  className,
+}) => {
+  return (
+    <button
+      className={`button ${className}`}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onMouseLeave={onMouseLeave}
+      onClick={onClick}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchCancel}
+      onTouchStart={onTouchStart}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/Button/Button.tsx

@@ -1,24 +1,40 @@
-import './DropDown.css';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import useClickOutside from '../../actions/useClickOutside';
-import DropDownIcon from '../icon/DropDownIcon';
 import { algorithms } from '../../constants';
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
+import DropDownIcon from '../icon/DropDownIcon';
+
+import './DropDown.css';
 
-const DropDown = ({ onSelect, selectedAlgorithm }) => {
+type DropDowmProps = {
+  selectAlgorithm: (select: string) => void;
+  selectedAlgorithm: string;
+};
+
+const DropDown: React.FC<DropDowmProps> = ({
+  selectAlgorithm,
+  selectedAlgorithm,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDropDown = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((prev) => !prev);
   };
 
-  const handleSelect = (algorithm) => {
-    onSelect(algorithm);
-    setIsOpen(false);
-  };
-  useClickOutside(() => {
-    if (isOpen) setIsOpen(false);
-  }, 'dropdown');
+  const handleSelect = useCallback(
+    (algorithm: string) => {
+      selectAlgorithm(algorithm);
+      setIsOpen(false);
+    },
+    [selectAlgorithm, setIsOpen],
+  );
+
+  useClickOutside({
+    callback: (): void => {
+      if (isOpen) setIsOpen(false);
+    },
+    targetClass: 'dropdown',
+  });
 
   return (
     <div className={`dropdown ${isOpen ? 'open' : ''}`}>

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

@@ -0,0 +1,22 @@
+import './InputRange.css';
+
+type InputRangeType = {
+  speed: number;
+  setSpeed: (speed: number) => void;
+};
+
+const InputRange: React.FC<InputRangeType> = ({ speed, setSpeed }) => {
+  return (
+    <input
+      type="range"
+      id="speed"
+      value={speed}
+      min={10}
+      max={20}
+      step={0.1}
+      onChange={(e) => setSpeed(parseFloat(e.target.value))}
+    />
+  );
+};
+
+export default InputRange;

src/components/InputRange/InputRange.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { speedOptions } from '../../constants';
 import ResetIcon from '../icon/ResetIcon';
 import NextStepIcon from '../icon/NextStepIcon';
@@ -8,7 +8,8 @@ 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 { AlgorithmState } from '../../types';
+import { PlayerState } from '../../hooks';
 
 import './Player.css';
 
@@ -37,7 +38,7 @@ const Player: React.FC<PlayerProps> = ({
   algorithmState,
   playerState,
 }) => {
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<number | null>(null);
 
   const startInterval = (action: () => void) => {
     if (intervalRef.current === null) {
@@ -82,7 +83,7 @@ const Player: React.FC<PlayerProps> = ({
     <div className="player-container">
       <div className="controls">
         <DropDown
-          onSelect={selectAlgorithm}
+          selectAlgorithm={selectAlgorithm}
           selectedAlgorithm={selectedAlgorithm}
         />
         <div className="step-buttons">

src/components/InputRange/InputRange.tsx

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

src/components/Player/Player.tsx

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

src/components/icon/DropDownIcon.tsx

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

src/components/icon/NextStepIcon.tsx

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

src/components/icon/PauseIcon.tsx

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

src/components/icon/PlayIcon.tsx

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

src/components/icon/PreviousStepIcon.tsx

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

src/components/icon/ResetIcon.tsx

@@ -0,0 +1,8 @@
+export const speedOptions: number[] = [1, 2, 3, 4, 5];
+
+export const algorithms: string[] = [
+  'selection',
+  'bubble',
+  'quick',
+  'insertion',
+];

src/components/icon/ResumePlay.tsx

@@ -1,9 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-export const useHistory = () => {
-  const [history, setHistory] = useState([]);
+type HistoryRef<T> = {
+  updateHistory: (newState: T) => void;
+  incrementTrack: () => void;
+  decrementTrack: () => void;
+  isHistoryEnd: () => boolean;
+};
+
+export const useHistory = <T>() => {
+  const [history, setHistory] = useState<T[]>([]);
   const [currentTrack, setCurrentTrack] = useState(0);
-  console.log(history);
+
   const incrementTrack = useCallback(() => {
     setCurrentTrack((prevTrack) => prevTrack + 1);
   }, [setCurrentTrack]);
@@ -17,7 +24,7 @@ export const useHistory = () => {
   }, [currentTrack, history]);
 
   const updateHistory = useCallback(
-    (newState) => {
+    (newState: T) => {
       setHistory((prevHistory) => {
         setCurrentTrack(prevHistory.length);
         return [...prevHistory, newState];
@@ -35,7 +42,7 @@ export const useHistory = () => {
     return history[currentTrack];
   }, [history, currentTrack]);
 
-  const historyRef = useRef({
+  const historyRef = useRef<HistoryRef<T>>({
     updateHistory,
     incrementTrack,
     decrementTrack,