fix linter

.gitignore

@@ -10,8 +10,6 @@
 
 # production
 /build
-/public
-
 
 # misc
 .DS_Store

frontend/.eslintrc.yml

@@ -1,8 +1,3 @@
-# Линтер подключаем именно в папку, созданную create-react-app
-# Все зависимости линтера должны быть установлены на этом уровне,
-# а не в корне проекта
-# Не забудьте удалить ключ eslintConfig из package.json,
-# автоматический созданный при запуске CRA
 env:
   browser: true
   es2021: true
@@ -29,13 +24,12 @@ rules:
   react/prop-types: 0
   no-console: 0
   react/react-in-jsx-scope: 0
-  functional/no-conditional-statements: 0
-  functional/no-expression-statements: 0
+  functional/no-conditional-statement: 0
+  functional/no-expression-statement: 0
   functional/immutable-data: 0
   functional/functional-parameters: 0
-  functional/no-try-statements: 0
-  functional/no-throw-statements: 0
-  functional/no-return-void: 0
+  functional/no-try-statement: 0
+  functional/no-throw-statement: 0
   no-underscore-dangle: [2, { "allow": ["__filename", "__dirname"] }]
   react/function-component-definition: [2, { "namedComponents": "arrow-function" }]
   testing-library/no-debug: 0

frontend/.gitignore

@@ -10,7 +10,6 @@
 
 # production
 /build
-/public
 
 # misc
 .DS_Store

frontend/package.json

@@ -52,12 +52,14 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
+    "@eslint/js": "^9.9.0",
+    "eslint": "^9.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-functional": "^4.4.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2"
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "globals": "^15.9.0"
   }
 }

frontend/src/Components/ErrorPage.jsx

@@ -3,7 +3,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import MainContainer from './MainContainer';
 
-export default function () {
+const ErrorPage = () => {
   const { t } = useTranslation();
   return (
     <MainContainer>
@@ -17,4 +17,6 @@ export default function () {
       </Row>
     </MainContainer>
   );
-}
+};
+
+export default ErrorPage;

frontend/src/Components/Header.jsx

@@ -21,7 +21,7 @@ const BurgerButton = ({ isMenuOpen, onClick, ref }) => (
     <span />
   </Button>
 );
-export default function () {
+const Header = () => {
   const { t } = useTranslation();
   const mobileMenuRef = useRef(null);
   const dispatch = useDispatch();
@@ -52,7 +52,7 @@ export default function () {
     return () => {
       document.removeEventListener('mousedown', listener);
     };
-  }, [isMenuOpen]);
+  }, [dispatch, isMenuOpen]);
 
   return (
     <Navbar bg="light" data-bs-theme="light" style={{ position: 'sticky' }}>
@@ -74,4 +74,6 @@ export default function () {
       </Container>
     </Navbar>
   );
-}
+};
+
+export default Header;

frontend/src/Components/LoginPage.jsx

@@ -16,7 +16,7 @@ const sendAuthRequest = async (dispatch, loginValues) => {
   const { token, username } = res.data;
   dispatch(login({ name: username, token }));
 };
-export default function () {
+const LoginPage = () => {
   const { t } = useTranslation();
 
   const dispatch = useDispatch();
@@ -80,4 +80,6 @@ export default function () {
       </Row>
     </MainContainer>
   );
-}
+};
+
+export default LoginPage;

frontend/src/Components/MainContainer.jsx

@@ -1,13 +1,14 @@
+/* eslint-disable react/destructuring-assignment */
 import { Container } from 'react-bootstrap';
 import { ToastContainer } from 'react-toastify';
 import Header from './Header';
 
-export default function (props) {
-  return (
-    <Container fluid className="h-100 p-0">
-      <Header />
-      {props.children}
-      <ToastContainer />
-    </Container>
-  );
-}
+const MainContainer = (props) => (
+  <Container fluid className="h-100 p-0">
+    <Header />
+    {props.children}
+    <ToastContainer />
+  </Container>
+);
+
+export default MainContainer;

frontend/src/Components/SignupPage.jsx

@@ -18,7 +18,7 @@ const sendAuthRequest = async (dispatch, loginValues) => {
   dispatch(login({ name: username, token }));
 };
 
-export default function () {
+const SignupPage = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -132,4 +132,6 @@ export default function () {
       </Row>
     </MainContainer>
   );
-}
+};
+
+export default SignupPage;

frontend/src/Components/mainPage/Channels.jsx

@@ -1,3 +1,9 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-use-before-define */
+/* eslint-disable default-case */
+/* eslint-disable functional/no-let */
+/* eslint-disable functional/no-expression-statement */
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Nav, Button, Col, Modal, Form, Dropdown,
@@ -60,7 +66,8 @@ const ChannelModal = ({
   const f = useFormik({
     onSubmit: (values) => {
       setLoading(true);
-      action.name == 'remove' ? action.handler(token) : action.handler(token, values.channelName);
+      // eslint-disable-next-line no-unused-expressions
+      action.name === 'remove' ? action.handler(token) : action.handler(token, values.channelName);
       handleCloseModal();
       values.channelName = '';
       setLoading(false);
@@ -85,7 +92,7 @@ const ChannelModal = ({
         <Modal.Title>{action.description}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        {action.name == 'remove' ? (
+        {action.name === 'remove' ? (
           t('channelRemoveConfirmation'))
           : (
             <Form onSubmit={f.handleSubmit}>
@@ -119,7 +126,7 @@ const ChannelModal = ({
   );
 };
 
-export default function ({ filter }) {
+const Channels = ({ filter }) => {
   const messages = useSelector(selectMessages);
   const channels = useSelector(selectChannels);
   const currentChennelId = useSelector(selectCurrentChannelId);
@@ -176,7 +183,7 @@ export default function ({ filter }) {
     <Channel
       key={channel.id}
       name={channel.name}
-      variant={currentChennelId == channel.id ? 'secondary' : ''}
+      variant={+currentChennelId === +channel.id ? 'secondary' : ''}
       handleClick={handleChangeChannel(channel.id)}
       removable={channel.removable}
       id={channel.id}
@@ -225,7 +232,8 @@ export default function ({ filter }) {
           Authorization: `Bearer ${token}`,
         },
       });
-      const thisChannelMessagesIds = messages.filter((m) => m.channelId == channelId).map((m) => m.id);
+      const thisChannelMessagesIds = messages
+        .filter((m) => +m.channelId === +channelId).map((m) => m.id);
       thisChannelMessagesIds.map(async (messageId) => {
         await axios.delete(routes.messagePath(messageId), {
           headers: {
@@ -269,4 +277,6 @@ export default function ({ filter }) {
       )}
     </Col>
   );
-}
+};
+
+export default Channels;

frontend/src/Components/mainPage/MainPage.jsx

@@ -33,7 +33,7 @@ const fetchMessages = async (token, dispatch) => {
   return res.data;
 };
 
-export default function () {
+const MainPage = () => {
   const [loading, setLoading] = useState(true);
   const currentUser = useSelector(selectCurrentUser);
   const dispatch = useDispatch();
@@ -76,4 +76,6 @@ export default function () {
       )}
     </MainContainer>
   );
-}
+};
+
+export default MainPage;

frontend/src/Components/mainPage/Message.jsx

@@ -55,16 +55,17 @@ const MessageRemoveModal = ({
   );
 };
 
-export default function ({
+const Message = ({
   username, body, id, filter,
-}) {
+}) => {
   const { t } = useTranslation();
   const currentUser = useSelector(selectCurrentUser);
   const isMessageMine = username === currentUser.name;
   const [showModal, setShowModal] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
 
   const lines = body.split('\n').map((line, index) => (
+    // eslint-disable-next-line react/no-array-index-key
     <div key={index}><Anchorme target="_blank">{filter.clean(line)}</Anchorme></div>
   ));
 
@@ -76,9 +77,9 @@ export default function ({
     setShowModal(false);
   };
 
-  const editMessageHandler = async (id, token, body) => {
+  const editMessageHandler = async (messageId, token, messageBody) => {
     try {
-      const res = await axios.patch(routes.messagePath(id), { body }, {
+      const res = await axios.patch(routes.messagePath(messageId), { messageBody }, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
@@ -91,9 +92,9 @@ export default function ({
     }
   };
 
-  const removeMessageHandler = (id) => async (token) => {
+  const removeMessageHandler = (messageId) => async (token) => {
     try {
-      const res = await axios.delete(routes.messagePath(id), {
+      const res = await axios.delete(routes.messagePath(messageId), {
         headers: {
           Authorization: `Bearer ${token}`,
         },
@@ -169,4 +170,6 @@ export default function ({
       />
     </div>
   );
-}
+};
+
+export default Message;

frontend/src/Components/mainPage/Messages.jsx

@@ -8,7 +8,7 @@ import MessagesHeader from './MessagesHeader';
 import { selectMessages } from '../../slices/messagesSlice';
 import { selectCurrentChannelId } from '../../slices/channelsSlice';
 
-export default function ({ filter }) {
+const Messages = ({ filter }) => {
   const messages = useSelector(selectMessages);
   const currentChannelId = useSelector(selectCurrentChannelId);
   const container = useRef(null);
@@ -79,4 +79,6 @@ export default function ({ filter }) {
       </div>
     </Col>
   );
-}
+};
+
+export default Messages;

frontend/src/Components/mainPage/MessagesForm.jsx

@@ -1,6 +1,8 @@
+/* eslint-disable no-param-reassign */
 import { BsSend } from 'react-icons/bs';
 import { Form, Button } from 'react-bootstrap';
 import { useSelector } from 'react-redux';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Picker from 'emoji-picker-react';
 import { useFormik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +22,7 @@ const postMessage = async (token, newMessage) => {
   return res.data;
 };
 
-export default function () {
+const MessageForm = () => {
   const { t } = useTranslation();
   const currentUser = useSelector(selectCurrentUser);
   const currentChannelId = useSelector(selectCurrentChannelId);
@@ -31,6 +33,7 @@ export default function () {
   const [isMobileKeyboard, setIsMobileKeyboard] = useState(false);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
 
+  // eslint-disable-next-line consistent-return
   useEffect(() => {
     if ('virtualKeyboard' in navigator) {
       navigator.virtualKeyboard.overlaysContent = true;
@@ -61,13 +64,11 @@ export default function () {
     return () => {
       window.removeEventListener('resize', updateBodyHeight);
     };
-  }, [keyboardHeight]);
+  }, [bodyEl.style, keyboardHeight]);
 
   const f = useFormik({
     onSubmit: (values) => {
-      if (values.messageText === '') {
-
-      } else {
+      if (values.messageText === '') { /* empty */ } else {
         setIsSending(true);
         const newMessage = {
           body: values.messageText,
@@ -107,9 +108,9 @@ export default function () {
 
   const handleChange = (event) => {
     if (!isSending) {
-      let { value } = event.target;
-      value = value.replace(/^\s+/, '');
-      f.setFieldValue('messageText', value);
+      const { value } = event.target;
+      const updatedValue = value.replace(/^\s+/, '');
+      f.setFieldValue('messageText', updatedValue);
     } else {
       f.setFieldValue('');
     }
@@ -126,6 +127,7 @@ export default function () {
     f.handleSubmit(e);
   };
 
+  // eslint-disable-next-line consistent-return
   const onKeyDown = (event) => {
     if (event.shiftKey && event.key === 'Enter') {
       event.preventDefault();
@@ -156,7 +158,7 @@ export default function () {
           {isEmojiPickerOpen && (
             <Picker
               id="emojiPicker"
-              onEmojiClick={(emojiObject, e) => {
+              onEmojiClick={(emojiObject) => {
                 f.setFieldValue('messageText', f.values.messageText + emojiObject.emoji);
               }}
             />
@@ -187,4 +189,6 @@ export default function () {
       </Form>
     </div>
   );
-}
+};
+
+export default MessageForm;