ref: complete ts migration

eslint.config.js

@@ -141,7 +141,7 @@ export default defineConfig([
       parser: tseslint.parser,
       parserOptions: {
         ecmaFeatures: { jsx: true },
-        project: './tsconfig.json',
+        // project: './tsconfig.json',
         projectService: true,
         tsconfigRootDir: import.meta.dirname,
         warnOnUnsupportedTypeScriptVersion: false,

package.json

@@ -45,6 +45,7 @@
     "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^25.0.9",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
@@ -53,6 +54,7 @@
     "@vitest/ui": "^3.2.4",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
+    "esbuild": "^0.28.0",
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",

src/components/app-header/app-header.module.d.css.ts

@@ -0,0 +1,10 @@
+declare const classNames: {
+  readonly header: 'header';
+  readonly menu: 'menu';
+  readonly menu_part_left: 'menu_part_left';
+  readonly link: 'link';
+  readonly link_active: 'link_active';
+  readonly link_position_last: 'link_position_last';
+  readonly logo: 'logo';
+};
+export default classNames;

src/components/app-header/app-header.jsx → src/components/app-header/app-header.tsx

@@ -8,25 +8,30 @@ import { NavLink, Link } from 'react-router-dom';
 
 import styles from './app-header.module.css';
 
-export const AppHeader = () => {
-  const setActiveLink = ({ isActive }) =>
+export const AppHeader = (): React.ReactElement => {
+  const setActiveLink = ({ isActive }: { isActive: boolean }): string =>
     `${styles.link} ${isActive ? styles.link_active : ''}`;
 
   return (
     <header className={styles.header}>
       <nav className={`${styles.menu} p-4`}>
         <div className={styles.menu_part_left}>
-          <NavLink to="/" end className={`${styles.link} ${styles.link_active}`}>
-            {({ isActive }) => (
+          <NavLink to="/" end className={setActiveLink}>
+            {({ isActive }: { isActive: boolean }): React.ReactElement => (
               <>
                 <BurgerIcon type={isActive ? 'primary' : 'secondary'} />
                 <p className="text text_type_main-default ml-2">Конструктор</p>
               </>
             )}
           </NavLink>
 
-          <NavLink to="/feed" className={(props) => `${setActiveLink(props)} ml-10`}>
-            {({ isActive }) => (
+          <NavLink
+            to="/feed"
+            className={(props: { isActive: boolean }): string =>
+              `${setActiveLink(props)} ml-10`
+            }
+          >
+            {({ isActive }: { isActive: boolean }): React.ReactElement => (
               <>
                 <ListIcon type={isActive ? 'primary' : 'secondary'} />
                 <p className="text text_type_main-default ml-2">Лента заказов</p>
@@ -35,17 +40,19 @@ export const AppHeader = () => {
           </NavLink>
         </div>
 
-        <Link to="/">
-          <div className={styles.logo}>
+        <div className={styles.logo}>
+          <Link to="/">
             <Logo />
-          </div>
-        </Link>
+          </Link>
+        </div>
 
         <NavLink
           to="/profile"
-          className={(props) => `${setActiveLink(props)} ${styles.link_position_last}`}
+          className={(props: { isActive: boolean }): string =>
+            `${setActiveLink(props)} ${styles.link_position_last}`
+          }
         >
-          {({ isActive }) => (
+          {({ isActive }: { isActive: boolean }): React.ReactElement => (
             <>
               <ProfileIcon type={isActive ? 'primary' : 'secondary'} />
               <p className="text text_type_main-default ml-2">Личный кабинет</p>

src/components/app/app.module.d.css.ts

@@ -0,0 +1,6 @@
+declare const classNames: {
+  readonly app: 'app';
+  readonly title: 'title';
+  readonly main: 'main';
+};
+export default classNames;

src/components/app/app.jsx → src/components/app/app.tsx

@@ -1,6 +1,11 @@
 import { Preloader } from '@krgaa/react-developer-burger-ui-components';
-import { useSelector } from 'react-redux';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import {
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  type Location,
+} from 'react-router-dom';
 
 import { Feed } from '@/pages/feed/feed';
 import { ForgotPassword } from '@/pages/forgot-password/forgot-password';
@@ -11,42 +16,52 @@ import { ProfileOrders } from '@/pages/profile/profile-orders';
 import { Register } from '@/pages/register/register';
 import { ResetPassword } from '@/pages/reset-password/reset-password';
 import { useGetUserQuery } from '@/services/api/authApi';
+import { useAppSelector } from '@/services/store';
 import { selectIsAuthChecked } from '@/services/user/userSlice';
 import { OnlyAuth, OnlyUnAuth } from '@components/protected-route/protected-route';
-// import { Home, Login, Register, ForgotPassword, ResetPassword, Profile, Feed, NotFound } from '@pages';
 import { Home } from '@pages/home/home';
 
 import { AppHeader } from '../app-header/app-header';
 import { IngredientDetail } from '../ingredient-details/ingredient-details';
 import { Modal } from '../modal/modal';
 import { OrderDetails } from '../order-details/order-details';
 
-export const App = () => {
+import styles from './app.module.css';
+
+type TLocationState = {
+  background?: Location;
+};
+
+export const App = (): React.ReactElement => {
   const location = useLocation();
   const navigate = useNavigate();
-  const background = location.state && location.state.background;
+  const state = location.state as TLocationState;
+  const background = state?.background;
 
   useGetUserQuery();
-  const isAuthChecked = useSelector(selectIsAuthChecked);
+  const isAuthChecked = useAppSelector(selectIsAuthChecked);
 
   if (!isAuthChecked) {
     return <Preloader />;
   }
 
-  const handleModalClose = () => {
+  const handleModalClose = (): void => {
     navigate(-1);
   };
 
   return (
-    <div className=" style.app">
+    <div className={styles.app}>
       <AppHeader />
       <Routes location={background || location}>
         <Route path="/" element={<Home />} />
         <Route
           path="/ingredients/:id"
           element={
             <div style={{ marginTop: '100px' }}>
-              <h1 className="text text_type_main-large text_color_primary">
+              <h1
+                className="text text_type_main-large text_color_primary"
+                style={{ textAlign: 'center' }}
+              >
                 Детали ингредиента
               </h1>
               <IngredientDetail />
@@ -62,37 +77,30 @@ export const App = () => {
         />
         <Route
           path="/reset-password"
-          Ы
           element={<OnlyUnAuth component={<ResetPassword />} />}
         />
-        <Route path="*" element={<NotFound />} />
         <Route path="/feed" element={<Feed />} />
-
-        {/* protected */}
         <Route path="/profile" element={<OnlyAuth component={<Profile />} />}>
           <Route path="orders" element={<ProfileOrders />} />
         </Route>
+        <Route path="*" element={<NotFound />} />
       </Routes>
 
-      {/* модальныек окна */}
       {background && (
         <Routes>
           <Route
             path="/ingredients/:id"
             element={
               <Modal title="Детали ингредиента" onClose={handleModalClose}>
-                {' '}
-                <IngredientDetail />{' '}
+                <IngredientDetail />
               </Modal>
             }
           />
-
           <Route
             path="/order/:id"
             element={
               <Modal title="Детали заказа" onClose={handleModalClose}>
-                {' '}
-                <OrderDetails />{' '}
+                <OrderDetails />
               </Modal>
             }
           />

src/components/burger-constructor/burger-constructor.module.d.css.ts

@@ -0,0 +1,8 @@
+declare const classNames: {
+  readonly burger_constructor: 'burger_constructor';
+  readonly bun: 'bun';
+  readonly notBuns: 'notBuns';
+  readonly total: 'total';
+  readonly item: 'item';
+};
+export default classNames;

src/components/burger-constructor/burger-constructor.jsx → src/components/burger-constructor/burger-constructor.tsx

@@ -5,61 +5,61 @@ import {
 } from '@krgaa/react-developer-burger-ui-components';
 import { nanoid } from '@reduxjs/toolkit';
 import { useDrop } from 'react-dnd';
-import { useSelector, useDispatch } from 'react-redux';
 
 import {
-  selectConstructorItems,
   selectTotalPrice,
   selectBun,
   selectFilling,
   addBun,
   addFilling,
 } from '@/services/constructor/constructorSlice';
+import { useAppDispatch, useAppSelector } from '@/services/store';
 
 import { ConstructorItem } from '../constructor-item/constructor-item';
 
+import type { TIngredient } from '@/utils/baseTypes';
+
 import styles from './burger-constructor.module.css';
 
-export const BurgerConstructor = ({ onOrderButtonClick, isOrderLoading }) => {
-  // const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const constructorItems = useSelector(selectConstructorItems);
-  const totalPrice = useSelector(selectTotalPrice);
-  const bun = useSelector(selectBun);
-  const filling = useSelector(selectFilling);
+type TBurgerConstructorProps = {
+  onOrderButtonClick: () => void;
+  isOrderLoading: boolean;
+};
+
+export const BurgerConstructor = ({
+  onOrderButtonClick,
+  isOrderLoading,
+}: TBurgerConstructorProps): React.ReactElement | null => {
+  const dispatch = useAppDispatch();
+  const totalPrice = useAppSelector(selectTotalPrice);
+  const bun = useAppSelector(selectBun);
+  const filling = useAppSelector(selectFilling);
 
-  const [{ isHover }, dropTargetRef] = useDrop({
+  const [{ isHover }, dropTargetRef] = useDrop<TIngredient, void, { isHover: boolean }>({
     accept: 'ingredient',
-    drop(item) {
+    drop(item: TIngredient): void {
       if (item.type === 'bun') {
         dispatch(addBun(item));
       } else {
         dispatch(addFilling({ ...item, uniqueId: nanoid() }));
       }
     },
-    collect: (monitor) => ({
+    collect: (monitor): { isHover: boolean } => ({
       isHover: monitor.isOver(),
     }),
   });
 
-  if (!constructorItems) {
-    return <div className="text text_type_main-medium">Добавьте ингредиенты</div>;
-  }
-
-  if (constructorItems === 0) {
-    // поменять потом
-    return (
-      <div className="text text_type_main-medium">Идет загрузка ингредиентов...</div>
-    );
-  }
+  if (!filling) return null;
 
   return (
     <section
-      ref={dropTargetRef}
+      ref={(node: HTMLDivElement | null): void => {
+        dropTargetRef(node);
+      }}
       style={{ outline: isHover ? '2px dashed #8e4cff' : 'transparent' }}
       className={`${styles.burger_constructor} pt-10`}
     >
-      <div className={`${styles.bun} `}>
+      <div className={styles.bun}>
         {bun ? (
           <ConstructorElement
             type="top"
@@ -85,9 +85,11 @@ export const BurgerConstructor = ({ onOrderButtonClick, isOrderLoading }) => {
 
       <div className={`${styles.notBuns} custom-scroll`}>
         {filling.length > 0 ? (
-          filling.map((item, index) => (
-            <ConstructorItem key={item.uniqueId} item={item} index={index} />
-          ))
+          filling.map(
+            (item, index: number): React.ReactElement => (
+              <ConstructorItem key={item.uniqueId} item={item} index={index} />
+            )
+          )
         ) : (
           <div
             className="text text_type_main-default"