onClick_HandlerFunction

.eslintignore

@@ -1,2 +1,3 @@
 /build
 /node_modules
+/.eslintrc.js

package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@mate-academy/eslint-config-react-typescript": "latest",
-    "@mate-academy/scripts": "^1.7.9",
+    "@mate-academy/scripts": "^1.9.4",
     "@mate-academy/students-ts-config": "latest",
     "@mate-academy/stylelint-config": "latest",
     "@types/node": "^16.18.80",

src/components/UserSelector.tsx

@@ -1,4 +1,10 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import classNames from 'classnames';
 import { User } from '../types/User';
 import { getUsers } from '../api/users';
@@ -35,6 +41,15 @@ export const UserSelector: React.FC = () => {
     };
   }, []);
 
+  const handleUserSelection = useCallback(
+    (user: User) => {
+      setSelectedUser(user);
+      setSelectedPost(null);
+      setIsVisible(false);
+    },
+    [setSelectedUser, setSelectedPost, setIsVisible],
+  );
+
   return (
     <div
       ref={dropdownRef}
@@ -73,18 +88,14 @@ export const UserSelector: React.FC = () => {
                 className={classNames('dropdown-item', {
                   'is-active': user.id === selectedUser?.id,
                 })}
-                onClick={() => {
-                  setSelectedUser(user);
-                  setSelectedPost(null);
-                  setIsVisible(false);
-                }}
+                onClick={() => handleUserSelection(user)}
               >
                 {user.name}
               </a>
             ))
           ) : (
             <div className="dropdown-item has-background-danger has-text-light">
-              Something go wrong! Refresh the page or try again later.
+              Something went wrong! Refresh the page or try again later.
             </div>
           )}
         </div>

tsconfig.json

@@ -1,10 +1,12 @@
 {
   "extends": "@mate-academy/students-ts-config",
   "include": [
-    "src"
+    "src",
+    ".eslintrc.js"
   ],
   "compilerOptions": {
     "sourceMap": false,
-    "types": ["node", "cypress"]
+    "types": ["node", "cypress"],
+    "jsx": "react"
   }
 }