Refactoring, tweaks and improvements

Author: androfficial

.env

@@ -37,6 +37,8 @@
     "prettier/prettier": ["warn", { "singleQuote": true }],
     "no-shadow": "off",
     "camelcase": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/naming-convention": "off",
     "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
     "import/order": "off",
     "no-control-regex": 0,
@@ -81,6 +83,13 @@
         "namedComponents": "arrow-function",
         "unnamedComponents": "arrow-function"
       }
+    ],
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": ["state"]
+      }
     ]
   }
 }

.eslintrc

@@ -1,45 +1,32 @@
-import axios, { AxiosError } from 'axios';
+import axios, { AxiosResponse } from 'axios';
 
-import { IGetToken } from '../types/token';
-import { IGetNewUser, IGetUsers, IGetUsersPositions } from '../types/users';
-import { handleError } from './config';
+import {
+  IGetNewUser,
+  IGetToken,
+  IGetUsers,
+  IGetUsersPositions,
+} from '../types/users';
 
 const instance = axios.create({
   baseURL: 'https://frontend-test-assignment-api.abz.agency/api/v1',
 });
 
-const usersAPI = {
-  async getUsers(page: number, count: number) {
-    const { data } = await instance.get<IGetUsers>(
-      `/users?page=${page}&count=${count}`
-    );
-
-    return data;
+export const mainAPI = {
+  getUsers(page: number, count: number): Promise<AxiosResponse<IGetUsers>> {
+    return instance.get<IGetUsers>(`/users?page=${page}&count=${count}`);
   },
-  async getUserPositions() {
-    const { data } = await instance.get<IGetUsersPositions>('/positions');
-
-    return data;
+  getUserPositions(): Promise<AxiosResponse<IGetUsersPositions>> {
+    return instance.get<IGetUsersPositions>('/positions');
   },
-  async getToken() {
-    const { data } = await instance.get<IGetToken>('/token');
-
-    return data;
+  getToken(): Promise<AxiosResponse<IGetToken>> {
+    return instance.get<IGetToken>('/token');
   },
-  async getNewUser(userData: FormData, token: string) {
-    try {
-      const { data } = await instance.post<IGetNewUser>('/users', userData, {
-        headers: { Token: token, 'content-type': 'multipart/form-data' },
-      });
-
-      return {
-        success: data.success,
-        data,
-      };
-    } catch (error: unknown | AxiosError) {
-      return handleError(error);
-    }
+  getNewUser(
+    userData: FormData,
+    token: string
+  ): Promise<AxiosResponse<IGetNewUser>> {
+    return instance.post<IGetNewUser>('/users', userData, {
+      headers: { Token: token, 'content-type': 'multipart/form-data' },
+    });
   },
 };
-
-export default usersAPI;

src/api/api.ts

@@ -1,5 +1,3 @@
-const CatFootprints = () => (
+export const CatFootprints = () => (
   <div className='page__cat-footprints cat-footprints' />
 );
-
-export default CatFootprints;

src/api/config.ts

@@ -1,4 +1,4 @@
-const Footer = () => {
+export const Footer = () => {
   return (
     <footer className='footer'>
       <div className='footer__container container'>
@@ -7,5 +7,3 @@ const Footer = () => {
     </footer>
   );
 };
-
-export default Footer;

src/components/CatFootprints/index.tsx

@@ -8,7 +8,7 @@ import { Link } from 'react-scroll';
 
 import Logo from '../../assets/images/logo.svg';
 
-const Header = () => {
+export const Header = () => {
   const [isOpenMenu, setIsOpenMenu] = useState(false);
   const darkBackground = useRef<HTMLSpanElement>(null);
   const isMobile = useMediaQuery({
@@ -180,5 +180,3 @@ const Header = () => {
     </header>
   );
 };
-
-export default Header;

src/components/Footer/index.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { TextField, TextFieldProps } from '@mui/material';
 
-const MainTextField = (props: TextFieldProps) => {
+export const MainTextField = (props: TextFieldProps) => {
   const CustomTextField = styled((props: TextFieldProps) => (
     <TextField {...props} />
   ))({
@@ -51,5 +51,3 @@ const MainTextField = (props: TextFieldProps) => {
 
   return <CustomTextField {...props} />;
 };
-
-export default MainTextField;

src/components/Header/index.tsx

@@ -6,7 +6,7 @@ interface IMainTooltip {
   title: string;
 }
 
-const MainTooltip = ({ children }: IMainTooltip) => {
+export const MainTooltip = ({ children }: IMainTooltip) => {
   const [isOverflowed, setIsOverflow] = useState(false);
   const textElementRef = useRef<HTMLDivElement>(null);
 
@@ -62,5 +62,3 @@ const MainTooltip = ({ children }: IMainTooltip) => {
     </CustomTooltip>
   );
 };
-
-export default MainTooltip;

src/components/MainTextField/index.tsx

@@ -2,15 +2,14 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import cn from 'classnames';
 import { MouseEvent, useCallback, useRef } from 'react';
-import { useDispatch } from 'react-redux';
 
-import useTypesSelector from '../../hooks/useTypesSelector';
-import { setShowModal } from '../../store/actions/users';
+import { useAppDispatch, useAppSelector } from '../../hooks/useStore';
+import { setShowModal } from '../../store/slices/usersSlice';
 
-const Modal = () => {
-  const dispatch = useDispatch();
+export const Modal = () => {
+  const dispatch = useAppDispatch();
   const modalBackground = useRef<HTMLDivElement>(null);
-  const showModal = useTypesSelector(({ users }) => users.showModal);
+  const showModal = useAppSelector(({ users }) => users.showModal);
 
   const handleModalVisibility = useCallback(
     () => dispatch(setShowModal(false)),
@@ -50,5 +49,3 @@ const Modal = () => {
     </div>
   );
 };
-
-export default Modal;