Month10/step1

package.json

@@ -55,6 +55,8 @@
     ]
   },
   "devDependencies": {
+    "@types/react-redux": "^7.1.25",
+    "@types/redux-devtools-extension": "^2.13.2",
     "gh-pages": "^4.0.0"
   }
 }

src/components/App/App.js → src/components/App/App.tsx

@@ -1,8 +1,8 @@
 import AppStyles from './App.module.css';
 
-import React, { useEffect } from 'react';
+import { useEffect, FC } from 'react';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from '../../services/hooks';
 
 import Main from '../Main/Main';
 import AppHeader from '../AppHeader/AppHeader';
@@ -23,18 +23,18 @@ import IngredientDetails from '../IngredientDetails/IngredientDetails';
 import OrderDetails from '../OrderDetails/OrderDetails';
 import { getIngredients } from '../../services/actions/ingredients';
 import { getUser } from '../../services/actions/user';
+import { TFeedData } from '../../services/types/order';
 
-function App() {
+const App: FC = () => {
   const dispatch = useDispatch();
-
   const history = useNavigate();
-
   const location = useLocation();
   const modalBackground = location.state?.modalBackground;
 
   const { ingredientsByType } = useSelector(state => state.menu);
-  const { orders } = useSelector(state => state.ws.feed);
-
+
+  const { orders } = useSelector(({ws}) => (ws.feed as TFeedData));
+
   useEffect(() => {
     dispatch(getIngredients());
     dispatch(getUser());
@@ -45,7 +45,7 @@ function App() {
       <AppHeader />
       <main className={AppStyles.container}>
           <Routes location={ modalBackground || location}>
-              <Route path="/" exact element={<Main/>} />
+              <Route path="/" element={<Main/>} />
               <Route path="/ingredients/:ingredientId" element={ingredientsByType && <IngredientDetails/>} />
               <Route path="/feed" element={<Orders/>} />
               <Route path="/feed/:orderId" element={<OrderDetails/>} />

src/components/AppHeader/AppHeader.js → src/components/AppHeader/AppHeader.tsx

@@ -1,10 +1,9 @@
-// import React from 'react';
+import { FC } from 'react';
 import { BurgerIcon, ListIcon, Logo, ProfileIcon } from '@ya.praktikum/react-developer-burger-ui-components';
 import { NavLink } from 'react-router-dom';
 import AppHeaderStyles from './AppHeader.module.css';
 
-function AppHeader() {
-
+const AppHeader: FC = () => {
   const active = AppHeaderStyles.link + ' ' + AppHeaderStyles.active + ' pl-5 pt-4 pr-5 pb-4 text text_type_main-default';
   const link = AppHeaderStyles.link + ' pl-5 pt-4 pr-5 pb-4 text text_type_main-default text_color_inactive';
   const activeAccountLink = AppHeaderStyles.link + ' ' + AppHeaderStyles.active + ' ' + AppHeaderStyles.account + ' pl-5 pt-4 pr-5 pb-4 text text_type_main-default';
@@ -41,4 +40,4 @@ function AppHeader() {
   );
 }
 
-export default AppHeader;
+export default AppHeader;

src/components/BurgerConstructor/BurgerConstructor.js → src/components/BurgerConstructor/BurgerConstructor.tsx

@@ -1,9 +1,9 @@
+import { FC } from 'react';
 import BurgerConstructorStyles from './BurgerConstructor.module.css';
 
-import React, { useMemo, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from '../../services/hooks';
 import PropTypes from 'prop-types';
-import { useDrop } from 'react-dnd';
+import { useDrop, DropTargetMonitor } from 'react-dnd';
 
 import { ConstructorElement, Button } from '@ya.praktikum/react-developer-burger-ui-components';
 import TotalPrice from '../TotalPrice/TotalPrice';
@@ -12,14 +12,18 @@ import Ingredient from '../Ingredient/Ingredient';
 import { sendOrder } from '../../services/actions/ingredients';
 import { ADD_BUN, ADD_INGREDIENT } from '../../utils/constants';
 import { useNavigate } from 'react-router-dom';
+import { TIngredientList } from '../../services/types/ingredients';
 
+type TBurgerConstructor = {
+  openOrderDetailsModal: () => void;
+};
 
-function BurgerConstructor({ openOrderDetailsModal }) {
+const BurgerConstructor: FC<TBurgerConstructor> = ({ openOrderDetailsModal }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const {addedIngredients, ingredientsById} = useSelector(state => state.menu);
-  const {isAuthSuccess} = useSelector(state => state.user);
+  const { addedIngredients, ingredientsById } = useSelector(state => state.menu);
+  const { isAuthSuccess } = useSelector(state => state.user);
 
   const ingredientIds = () => {
     let res = addedIngredients.bun ? [addedIngredients.bun._id] : [];
@@ -44,13 +48,12 @@ function BurgerConstructor({ openOrderDetailsModal }) {
     }
   }
 
-  const [{isHover}, dropTarget] = useDrop({
+  const [{ isHover }, dropTarget] = useDrop({
     accept: 'ingredient',
-    item: {},
-    collect: monitor => ({
+    collect: (monitor: DropTargetMonitor<TIngredientList>) => ({
       isHover: monitor.isOver()
     }),
-    drop(item) {
+    drop(item: TIngredientList) {
       const type = ingredientsById[item.id].type === 'bun' ? ADD_BUN : ADD_INGREDIENT;
       dispatch({type: type, id: item.id})
     },

src/components/BurgerIngredients/BurgerIngredients.js → src/components/BurgerIngredients/BurgerIngredients.tsx

@@ -1,6 +1,7 @@
+import { FC, Ref, MouseEvent } from 'react';
 import BurgerIngredientsStyles from './BurgerIngredients.module.css';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from '../../services/hooks';
 
 import PropTypes from 'prop-types';
 import { useInView } from 'react-intersection-observer';
@@ -10,19 +11,24 @@ import IngredientCategory from '../IngredientCategory/IngredientCategory';
 
 import { SET_ACTIVE_TAB } from '../../utils/constants';
 
+type TCategoriesTitles = {
+  bun: string;
+  main: string;
+  sauce: string;
+}
 
-function BurgerIngredients({ openIngredientModal }) {
+const BurgerIngredients: FC<{ openIngredientModal: (e: MouseEvent) => void }> = ({ openIngredientModal }) => {
   const dispatch = useDispatch();
 
   const { ingredientsByType, activeTab } = useSelector(state => state.menu);
 
-  const categoriesTitles = {
-    'bun': 'Булки',
-    'main': 'Начинки',
-    'sauce': 'Соусы'
+  const categoriesTitles: TCategoriesTitles = {
+    bun: 'Булки',
+    main: 'Начинки',
+    sauce: 'Соусы'
   }
 
-  const [bunsRef, inViewBuns] = useInView({
+  const [bunRef, inViewBun] = useInView({
     threshold: 0.3
   });
 
@@ -33,13 +39,13 @@ function BurgerIngredients({ openIngredientModal }) {
     threshold: 0.3
   });
 
-  const categoriesOrder = [
-    {name: 'bun', ref: bunsRef, inView: inViewBuns}, 
+  const categoriesOrder: Array<{name: keyof TCategoriesTitles; ref: Ref<HTMLDivElement>; inView: boolean}> = [
+    {name: 'bun', ref: bunRef, inView: inViewBun}, 
     {name: 'main', ref: mainsRef, inView: inViewFilling}, 
     {name: 'sauce', ref: saucesRef, inView: inViewSauces}
   ];
 
-  const setActiveTab = (name) => {
+  const setActiveTab = (name: string) => {
     dispatch({type: SET_ACTIVE_TAB, name})
   }
 

src/components/ErrorBoundary/ErrorBoundary.js → src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,16 +1,24 @@
-import React from "react";
+import React, { ErrorInfo, ReactNode } from "react";
 
-class ErrorBoundary extends React.Component {
-  constructor(props) {
+type TErrorProps = {
+  children?: ReactNode;
+}
+
+type TErrorState = {
+  hasError: boolean;
+};
+
+class ErrorBoundary extends React.Component<TErrorProps, TErrorState> {
+  constructor(props: TErrorProps) {
     super(props);
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError() {
     return { hasError: true };
   }
 
-  componentDidCatch(error, info) {
+  componentDidCatch(error: Error, info: ErrorInfo) {
     console.log("Произошла ошибка.", error, info);
   }
 
@@ -30,4 +38,4 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-export default ErrorBoundary;
+export default ErrorBoundary;

src/components/Ingredient/Ingredient.js → src/components/Ingredient/Ingredient.tsx

@@ -1,26 +1,26 @@
 import IngredientStyles from './Ingredient.module.css';
 
-import React, { useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import { useDrag, useDrop } from 'react-dnd';
+import { useRef, FC, MouseEvent } from 'react';
+import { useDispatch, useSelector } from '../../services/hooks';
+import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 
 import { DragIcon, ConstructorElement } from '@ya.praktikum/react-developer-burger-ui-components';
 import { CHANGE_INGREDIENT_ORDER, DELETE_INGREDIENT } from '../../utils/constants';
+import { TIngredientList } from '../../services/types/ingredients';
 
-
-function Ingredient({id, index}) {
+const Ingredient: FC<TIngredientList> = ({id, index}) => {
   const dispatch = useDispatch();
-  const ref = useRef(null);
+  const ref = useRef<HTMLLIElement>(null);
 
-  const {ingredientsById} = useSelector(state => state.menu);  
+  const { ingredientsById } = useSelector(state => state.menu);  
 
-  const moveItem = (prevId, newId) => {
-    dispatch({type: CHANGE_INGREDIENT_ORDER, prevId, newId});
+  const moveItem = (prevIndex: number, newIndex: number) => {
+    dispatch({type: CHANGE_INGREDIENT_ORDER, prevIndex, newIndex});
   }
 
-  const handleDeleteIngredient = (e) => {
-    const targetElement = e.target.parentNode.parentNode;
+  const handleDeleteIngredient = (e: MouseEvent<HTMLLIElement>) => {
+    const targetElement = (e.target as HTMLLIElement).parentNode?.parentNode as HTMLElement;
+
     if (targetElement.classList.contains('constructor-element__action')) {
       dispatch({type: DELETE_INGREDIENT, index: e.currentTarget.id});
     }
@@ -29,7 +29,7 @@ function Ingredient({id, index}) {
   const [, dropRef] = useDrop({
     accept: 'sortIngregient',
 
-   hover(item, monitor) {
+    hover(item: TIngredientList, monitor: DropTargetMonitor<TIngredientList>) {
       if (!ref.current) {
         return
       }
@@ -42,6 +42,7 @@ function Ingredient({id, index}) {
       const hoverBoundingRect = ref.current?.getBoundingClientRect()
       const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
       const clientOffset = monitor.getClientOffset();
+      if (!clientOffset) return;
       const hoverClientY = clientOffset.y - hoverBoundingRect.top;
 
       if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
@@ -71,7 +72,7 @@ function Ingredient({id, index}) {
 
   dragRef(dropRef(ref));
   return (
-    <li id={index} draggable ref={ref} className={IngredientStyles.item + ' mb-4 mr-2'} style={{opacity}} onClick={handleDeleteIngredient}>
+    <li id={index.toString()} draggable ref={ref} className={IngredientStyles.item + ' mb-4 mr-2'} style={{opacity}} onClick={handleDeleteIngredient}>
       <DragIcon type="primary" />
       <ConstructorElement
         isLocked={false}
@@ -84,9 +85,4 @@ function Ingredient({id, index}) {
 
 }
 
-Ingredient.propTypes = {
-  id: PropTypes.string,
-  index: PropTypes.number
-}
-
 export default Ingredient;