Cleanup warnings on eslint. Formatted all and modified a typo for cre…

package.json

@@ -97,7 +97,7 @@
  "cypress:run": "cypress run",
  "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
  "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
- "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,md}\" --config ./.prettierrc",
+ "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss,md}\" --config ./.prettierrc",
  "prepare": "husky install",
  "pre-commit": "lint-staged"
  },

src/App.css

@@ -620,4 +620,4 @@ small {
 
 ::-webkit-scrollbar {
  width: 25px;
-}
+}

src/common/home/home.css

@@ -728,7 +728,7 @@
  .heart-handshake {
  opacity: 0;
  transition: all 0.2s ease-in-out;
- position: absolute; 
+ position: absolute;
  left: 15rem;
  }
  }

src/common/playlists/PlayThumbnail.jsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { BsPlayCircleFill } from 'react-icons/bs';
-import thumbPlay from 'images/thumb-play.png';
 import Shimmer from 'react-shimmer-effect';
 import userImage from 'images/user.png';
 import Like from 'common/components/Like/Like';

src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.js

@@ -1,4 +1,4 @@
-import { createSlice, current } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 import tracks from '../../data/track';
 
 const initialState = {

src/plays/cricket-game/components/EndGameScreen.jsx

@@ -16,7 +16,7 @@ export default function EndGameScreen({ endScreenRef, resultTitle, resultDesc, r
 
  <button
  className="start-match-button w-32 h-8 md:w-40 md:h-10 rounded-full font-semibold text-base md:text-xl font-cricket-game"
- onClick={(event) => {
+ onClick={() => {
  window.location.reload();
  }}
  >

src/plays/cricket-game/components/Modal.jsx

@@ -15,7 +15,7 @@ export default function Modal({ userLevel, levelInfo, startGame, modalRef }) {
 
  <button
  className="start-match-button w-32 h-8 md:w-40 md:h-10 rounded-full font-semibold text-lg md:text-xl font-cricket-game"
- onClick={(event) => startGame()}
+ onClick={() => startGame()}
  >
  START!
  </button>

src/plays/cricket-game/components/TopBar.jsx

@@ -26,13 +26,13 @@ export default function TopBar({ hitBoxRef, gameTrack }) {
  </button>
  <button
  className="top-bar-button w-6 md:w-8 h-8 rounded-lg bg-orange-200 text-sm opacity-80 hover:opacity-90 active:opacity-100"
- onClick={(event) => toggleMusicPlay()}
+ onClick={() => toggleMusicPlay()}
  >
  🎵
  </button>
  <button
  className="top-bar-button w-24 md:w-28 h-8 rounded-lg bg-orange-200 text-[0.80rem] md:text-sm opacity-80 hover:opacity-90 active:opacity-100 font-cricket-game"
- onClick={(event) => hitBoxRef.current.classList.toggle('hit-box-blink')}
+ onClick={() => hitBoxRef.current.classList.toggle('hit-box-blink')}
  >
  Toggle Hit Box
  </button>

src/plays/cricket-game/game/gameLogic.js

@@ -1,4 +1,4 @@
-import { plural, sleep, randomChoice } from './utils.js';
+import { sleep, randomChoice } from './utils.js';
 import { COMMENTARY } from './commentary.js';
 
 export class GameState {
@@ -87,7 +87,7 @@ export function hitTheBall(event, ballCentre, shotBallRef) {
  shotBallRef.current.classList.add(shotName);
 
  // Reset shot ball's position now
- sleep(1 * 1000).then((resp) => {
+ sleep(1 * 1000).then(() => {
  shotBallRef.current.classList.add('invisible');
  shotBallRef.current.classList.remove(shotName);
 

src/plays/custommemesgenerator/Custommemesgenerator.jsx

@@ -1,10 +1,9 @@
-import PlayHeader from 'common/playlists/PlayHeader';
 import './Custommemesgenerator.css';
 import Header from './Header.jsx';
 import Meme from './Meme.jsx';
 
 // WARNING: Do not change the entry componenet name
-function Custommemesgenerator(props) {
+function Custommemesgenerator() {
  // Your Code Start below.
 
  return (

src/plays/digital-delight/components/CategoryFact.jsx

@@ -8,7 +8,7 @@ import './Categoryfact.css';
 
 function CategoryFact() {
  const [fact, setFact] = useState(CategoryFacts);
- const [error, setError] = useState('');
+ // const [error, setError] = useState('');
  const [selectedVoice, setSelectedVoice] = useState('Zira');
  const [showSelecter, setShowSelecter] = useState(false);
  const speechHandler = (msg) => {
@@ -42,7 +42,7 @@ function CategoryFact() {
  speechHandler(new SpeechSynthesisUtterance(data.number + ' is ' + data.text));
  setShowSelecter(true);
  } catch (error) {
- setError('Error fetching fact. Please try again later.');
+ // setError('Error fetching fact. Please try again later.');
  }
  };
 

src/plays/digital-delight/components/Modal.jsx

@@ -7,7 +7,7 @@ import { MdClose } from 'react-icons/md';
 
 const Modal = ({ showModal, toggle }) => {
  const [currState, setCurrentState] = useState(0);
- const data = structuringData[currState];
+ // const data = structuringData[currState];
 
  useEffect(() => {
  setCurrentState(0);

src/plays/digital-delight/components/Title.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './Title.css';
 
 function RealTitle() {

src/plays/hangman-game/Readme.md

@@ -1,6 +1,6 @@
 # Hangman Game
 
-Hangman is an old school favorite, a word game where the goal is simply to find the missing word or words.  You will be presented with a number of blank spaces representing the missing letters you need to find.  Use the keyboard to guess a letter.
+Hangman is an old school favorite, a word game where the goal is simply to find the missing word or words. You will be presented with a number of blank spaces representing the missing letters you need to find. Use the keyboard to guess a letter.
 
 ## Play Demographic
 
@@ -11,30 +11,29 @@ Hangman is an old school favorite, a word game where the goal is simply to find
 
 - User: ANKITy102
 - Gihub Link: https://github.com/ANKITy102
-- Blog: 
-- Video: 
+- Blog:
+- Video:
 
 ## Implementation Details
 
 The Hangman game is structured around four major components, each designed for enhanced aesthetics and responsiveness using the Styled Components library:
 
 1. Drawing.tsx
-The Drawing.tsx component plays a crucial role in rendering the visual representation of the Hangman figure as the game progresses. It provides a visual cue to the player regarding their current progress and incorrect guesses.
+ The Drawing.tsx component plays a crucial role in rendering the visual representation of the Hangman figure as the game progresses. It provides a visual cue to the player regarding their current progress and incorrect guesses.
 
 2. Word.tsx
-The Word.tsx component is responsible for managing the user's input and displaying the correct answer. It ensures a seamless interaction between the player's guesses and the hidden word, providing real-time feedback on the correctness of their choices.
+ The Word.tsx component is responsible for managing the user's input and displaying the correct answer. It ensures a seamless interaction between the player's guesses and the hidden word, providing real-time feedback on the correctness of their choices.
 
 3. Keyboard.tsx
-The Keyboard.tsx component is designed to facilitate user input. It presents an interactive keyboard to players, allowing them to select letters as guesses. This component enhances the user experience by making it intuitive and straightforward to make guesses.
+ The Keyboard.tsx component is designed to facilitate user input. It presents an interactive keyboard to players, allowing them to select letters as guesses. This component enhances the user experience by making it intuitive and straightforward to make guesses.
 
 4. Main.tsx
-The Main.tsx component serves as the central hub where all other components are integrated, resulting in the complete Hangman game experience. It orchestrates the flow of the game, including initializing the game state, tracking guessed letters, and determining whether the player has won or lost.
+ The Main.tsx component serves as the central hub where all other components are integrated, resulting in the complete Hangman game experience. It orchestrates the flow of the game, including initializing the game state, tracking guessed letters, and determining whether the player has won or lost.
 
 In addition to these core components, the game relies on a wordList.json file, which contains a collection of hints and words used throughout the gameplay. These hints provide context to players and make the game more engaging and challenging.
 
 This modular and organized structure ensures that the Hangman game is not only enjoyable but also maintainable and extensible, making it an excellent showcase of best practices in React development.
 
-
 ## Consideration
 
 Update all considerations(if any)

src/plays/hangman-game/components/Drawing.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+
 import {
  Head,
  Body,

src/plays/hangman-game/components/Keyboard.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import React from 'react';
-import styled from 'styled-components';
 import { KEYS } from '../constants/constants';
 import { Key, KeyboardGrid, KeyContainer } from '../styled-components';
 

src/plays/hangman-game/components/Word.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Border, LetterComponent, WordContainer } from '../styled-components';
 
 interface WordProps {

src/plays/hangman-game/constants/constants.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const KEYS = [
  'a',
  'b',

src/plays/hangman-game/styles.css

@@ -1,2 +1 @@
 /* enter stlyes here */
-

src/plays/infinite-scroll-with-debouncing-concept/InfiniteScrollWithDebouncingConcept.jsx

@@ -34,14 +34,14 @@ function InfiniteScrollWithDebouncingConcept(props) {
  return new Promise((resolve, reject) => {
  if (apiQuery) {
  try {
- const promise = fetch(
+ fetch(
  'https://openlibrary.org/search.json?' +
  new URLSearchParams({
  q: apiQuery,
  page: pageNumber
  })
  ).then((res) => {
- const data = res.json().then((data) => {
+ res.json().then((data) => {
  resolve();
  if (data.docs.length === 0) {
  setNoData(true);

src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx

@@ -50,9 +50,10 @@ function MultiplayerTicTacToe(props: any) {
  if (pos === 'cross' || pos === 'circle') {
  count++;
  }
- if (GAME_ARRAY.length === 9 && GAME_ARRAY.indexOf('') < 0) {
+ if (count > 9 || (GAME_ARRAY.length === 9 && GAME_ARRAY.indexOf('')) < 0) {
  setFinalMessage('Game Draw!');
  setIsFinished(true);
+ count = 0;
  }
  });
 

src/plays/multiselect-component/styles.scss

@@ -9,7 +9,7 @@ $select-component-dropdown-max-height: 450px;
 
 #multi-select-component {
  width: $select-component-width;
- margin-top: 100px; 
+ margin-top: 100px;
  width: 100%;
  height: max-content;
 

src/plays/object-detector/ObjectDetector.jsx

@@ -1,6 +1,5 @@
 import PlayHeader from 'common/playlists/PlayHeader';
 import React, { useRef, useEffect } from 'react';
-import * as tf from '@tensorflow/tfjs';
 import * as cocossd from '@tensorflow-models/coco-ssd';
 import Webcam from 'react-webcam';
 

src/plays/random-quote-card-generator/Components/SideBarOperation.jsx

@@ -109,7 +109,7 @@ const SideBarOperation = ({
 
  // 2. Card Color Feature
 
- const handleCardColor = (e) => {
+ const handleCardColor = () => {
  if (cardColor === 'Light') {
  setCardColor('Dark');
  } else {

src/plays/savings-calculator/components/SavingOptions/savingOptions.scss

@@ -1,4 +1,4 @@
-@import "../../styles/variables";
+@import '../../styles/variables';
 
 .savingCalculator__savingOptions {
  padding-left: 100px;
@@ -112,21 +112,20 @@
 
  .savingOptions__radioInput:checked + label:before,
  .savingOptions__radioInput:not(:checked) + label:before {
- content: "";
+ content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
- box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.1),
- -3px -3px 2px 2px rgba(255, 255, 255, 0.868);
+ box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.1), -3px -3px 2px 2px rgba(255, 255, 255, 0.868);
  border-radius: 100%;
  background: #fff;
  }
 
  .savingOptions__radioInput:checked + label:after,
  .savingOptions__radioInput:not(:checked) + label:after {
- content: "";
+ content: '';
  width: 10px;
  height: 10px;
  background: $gradient;

src/plays/savings-calculator/components/Total/total.scss

@@ -1,4 +1,4 @@
-@import "../../styles/variables";
+@import '../../styles/variables';
 
 .savingCalculator__total {
  text-align: center;

src/plays/savings-calculator/styles/savingsCalculator.scss

@@ -1,4 +1,4 @@
-@import "./variables";
+@import './variables';
 
 .savingsCalculator__container {
  display: flex;
@@ -11,8 +11,7 @@
 .savingsCalculator {
  display: flex;
  align-items: center;
- box-shadow: 7px 7px 20px 5px rgba(0, 0, 0, 0.1),
- -7px -7px 20px 5px rgba(255, 255, 255, 0.868);
+ box-shadow: 7px 7px 20px 5px rgba(0, 0, 0, 0.1), -7px -7px 20px 5px rgba(255, 255, 255, 0.868);
  border-radius: 16px;
  color: $text;
  padding: 4vh 3vw;

src/plays/self-clicking-button/SelfClickingButton.jsx

@@ -9,7 +9,7 @@ function SelfClickingButton(props) {
  const buttonRef = useRef(null);
  const [counter, setCounter] = useState(0);
 
- function clickHandler(event) {
+ function clickHandler() {
  setCounter((prev) => prev + 1);
  }
 

src/plays/tube2tunes/Tube2tunes.jsx

@@ -57,7 +57,7 @@ function Tube2tunes(props) {
  setLoading(false);
  }
  })
- .catch((err) => {
+ .catch(() => {
  // console.log('Error: ', err);
  });