feat: fixing restricted eslint rules

.eslintrc.js

@@ -41,6 +41,10 @@ module.exports = {
     'import/extensions': 'off',
     camelcase: 'off',
     'react/require-default-props': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
   },
   ignorePatterns: [
     '**/*.spec.ts',

next.config.mjs

@@ -5,7 +5,7 @@ const withNextIntl = createNextIntlPlugin();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ['flagcdn.com'],
+    domains: ['flagcdn.com', 'avatars.steamstatic.com'],
   },
 };
 

src/app/[locale]/layout.tsx

@@ -5,6 +5,7 @@ import { Analytics } from '@vercel/analytics/react';
 import ToastProvider from '@/toast.provider';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { Roboto, Inknut_Antiqua } from 'next/font/google';
+import React from 'react';
 import AdSense from '../components/AdSense';
 
 const roboto = Roboto({

src/app/components/LocationCard/LocationCardSkeleton.tsx

@@ -7,11 +7,8 @@ function LocationCardSkeleton() {
   return (
     <div className={`mt-8 text-white py-4 px-8 ${glassmorphism}`}>
       <div className="flex flex-col gap-y-4">
-        {Array.from({ length: 3 }).map((_, index) => (
-          <div
-            key={index}
-            className="flex md:items-center md:justify-between md:flex-row flex-col mb-2 animate-pulse"
-          >
+        {Array.from({ length: 3 }).map(() => (
+          <div className="flex md:items-center md:justify-between md:flex-row flex-col mb-2 animate-pulse">
             <div className="flex items-center gap-x-2">
               <div className="w-7 h-6 bg-gray-500" />
               <div className="w-80 h-6 bg-gray-500 rounded-md" />

src/app/components/UserCard/UserCard.tsx

@@ -43,6 +43,8 @@ function UserCard({
             src={itsTargetUser ? friend.avatar.large : friend.avatar.medium}
             className={`${itsTargetUser ? 'w-36' : ''} rounded-lg`}
             alt={`Avatar image of the user ${friend.nickname}`}
+            width={itsTargetUser ? 120 : 60}
+            height={itsTargetUser ? 120 : 60}
           />
         </div>
       )}
@@ -70,6 +72,8 @@ function UserCard({
                 }/${friend.countryCode.toLowerCase()}.png`}
                 className="w-max h-max"
                 alt={`country flag (${friend.countryCode}) of the user ${friend.nickname}`}
+                width={itsTargetUser ? 40 : 20}
+                height={itsTargetUser ? 28 : 14}
               />
               {city && `${city.name}, `}
               {state && `${state.name}, `}

src/app/templates/Home/templates/FriendsSection/FriendsSection.tsx

@@ -9,10 +9,7 @@ type FriendsSectionProps = {
   isLoading: boolean;
 };
 
-function FriendsSection({
-  closeFriendsJson,
-  isLoading,
-}: FriendsSectionProps) {
+function FriendsSection({ closeFriendsJson, isLoading }: FriendsSectionProps) {
   const translator = useTranslations('Index');
 
   if (!closeFriendsJson && !isLoading) {
@@ -35,8 +32,8 @@ function FriendsSection({
             />
           ))
         : isLoading &&
-          Array.from({ length: 5 }).map((_, index) => (
-            <UserCardSkeleton key={index} itsTargetUser={false} />
+          Array.from({ length: 5 }).map(() => (
+            <UserCardSkeleton itsTargetUser={false} />
           ))}
     </div>
   );

src/app/templates/Home/templates/VideoBackground/VideoBackground.tsx

@@ -5,11 +5,7 @@ function VideoBackground() {
   const env = process.env.NODE_ENV;
   if (env === 'development') {
     return (
-      <Image
-        src="/images/background.png"
-        alt="image for the background"
-        fill
-      />
+      <Image src="/images/background.png" alt="image for the background" fill />
     );
   }
 

src/app/templates/Home/useHome.ts

@@ -12,14 +12,12 @@ export const getLocationDetails = (
   stateCode?: string,
   cityID?: string,
 ) => {
-  const country = listOfLocation.countries.find(
-    (country) => country.code === countryCode,
-  );
+  const country = listOfLocation.countries.find((c) => c.code === countryCode);
 
-  const state = country?.states?.find((state) => state.code === stateCode);
+  const state = country?.states?.find((s) => s.code === stateCode);
 
   const city = state?.cities?.find(
-    (city) => cityID && city.id === parseInt(cityID),
+    (c) => cityID && c.id === parseInt(cityID, 10),
   );
 
   return { country, state, city };
@@ -46,14 +44,16 @@ export const useHome = () => {
 
   const [targetInfoJson, setTargetInfoJson] = useState<targetInfoJsonType>();
 
-  const sortCitiesByScore = (listOfCities: cityNameAndScore) => Object.entries(listOfCities)
+  const sortCitiesByScore = (listOfCities: cityNameAndScore) =>
+    Object.entries(listOfCities)
       .sort((a, b) => b[1] - a[1])
-      .reduce((obj: cityNameAndScore, [key, value]) => {
-        obj[key] = value;
-        return obj;
-      }, {});
+      .reduce(
+        (acc: cityNameAndScore, [key, value]) => ({ ...acc, [key]: value }),
+        {},
+      );
 
-  const getCitiesNames = (citiesScored: cityNameAndScore) => Object.entries(citiesScored).map(([key, value]) => {
+  const getCitiesNames = (citiesScored: cityNameAndScore) =>
+    Object.entries(citiesScored).map(([key, value]) => {
       const [countryCode, stateCode, cityID] = key.split('/');
 
       const { city, state, country } = getLocationDetails(
@@ -81,7 +81,7 @@ export const useHome = () => {
     );
 
     let citiesScored: cityNameAndScore = {};
-    closeFriendsWithCities.map((f: closeFriendsDataIWant) => {
+    closeFriendsWithCities.forEach((f: closeFriendsDataIWant) => {
       const cityKey = `${f.friend.countryCode}/${f.friend.stateCode}/${f.friend.cityID}`;
 
       citiesScored[cityKey] = citiesScored[cityKey]
@@ -101,18 +101,21 @@ export const useHome = () => {
     const rasoableNumberToBeAGoodGuess = 100;
 
     const withProbability = citiesScoredWithNames.map((c) => {
-      const probability =
-        (((c.count / totalCountOfScores) * 2 +
-          (c.count > rasoableNumberToBeAGoodGuess
-            ? 1
-            : c.count / rasoableNumberToBeAGoodGuess)) /
-          3) *
-        100;
+      const totalCountMethod =
+        totalCountOfScores === 0 ? 0 : c.count / totalCountOfScores;
+
+      const constantMethod =
+        c.count > rasoableNumberToBeAGoodGuess
+          ? 1
+          : c.count / rasoableNumberToBeAGoodGuess;
+
+      const probabilityFloat = (totalCountMethod * 2 + constantMethod) / 3;
+      const probabilityPercentage = probabilityFloat * 100;
 
       return {
         location: c.location,
         count: c.count,
-        probability,
+        probability: probabilityPercentage,
       };
     });
 
@@ -162,7 +165,7 @@ export const useHome = () => {
       } = response;
 
       let totalCountOf5ClosestFriends = 0;
-      for (let i = 0; i < 5; i++) {
+      for (let i = 0; i < 5; i += 1) {
         totalCountOf5ClosestFriends += closeFriends[i].count;
       }