From 8b5c22dfaa5988bf201e1c2fada6103be557d1d0 Mon Sep 17 00:00:00 2001 From: Mykola Zaikovskyi Date: Mon, 24 Jul 2023 13:35:15 +0300 Subject: [PATCH 1/2] rewrote on typescript shoppinglist page --- ...led.js => IngredientsShoppingItem.styled.ts} | 0 ...pingItem.jsx => IngredientsShoppingItem.tsx} | 16 ++++++++++++---- .../{index.js => index.ts} | 0 ...led.js => IngredientsShoppingList.styled.ts} | 0 ...pingList.jsx => IngredientsShoppingList.tsx} | 11 +++++++++-- .../{index.js => index.ts} | 0 src/hooks/useShoppingList.js | 14 -------------- src/hooks/useShoppingList.ts | 14 ++++++++++++++ ...age.styled.js => ShoppingListPage.styled.ts} | 0 ...hoppingListPage.jsx => ShoppingListPage.tsx} | 17 +++++++++++++---- .../ShoppingListPage/{index.js => index.ts} | 0 11 files changed, 48 insertions(+), 24 deletions(-) rename src/components/IngredientsShoppingItem/{IngredientsShoppingItem.styled.js => IngredientsShoppingItem.styled.ts} (100%) rename src/components/IngredientsShoppingItem/{IngredientsShoppingItem.jsx => IngredientsShoppingItem.tsx} (68%) rename src/components/IngredientsShoppingItem/{index.js => index.ts} (100%) rename src/components/IngredientsShoppingList/{IngredientsShoppingList.styled.js => IngredientsShoppingList.styled.ts} (100%) rename src/components/IngredientsShoppingList/{IngredientsShoppingList.jsx => IngredientsShoppingList.tsx} (77%) rename src/components/IngredientsShoppingList/{index.js => index.ts} (100%) delete mode 100644 src/hooks/useShoppingList.js create mode 100644 src/hooks/useShoppingList.ts rename src/pages/ShoppingListPage/{ShoppingListPage.styled.js => ShoppingListPage.styled.ts} (100%) rename src/pages/ShoppingListPage/{ShoppingListPage.jsx => ShoppingListPage.tsx} (79%) rename src/pages/ShoppingListPage/{index.js => index.ts} (100%) diff --git a/src/components/IngredientsShoppingItem/IngredientsShoppingItem.styled.js b/src/components/IngredientsShoppingItem/IngredientsShoppingItem.styled.ts similarity index 100% rename from src/components/IngredientsShoppingItem/IngredientsShoppingItem.styled.js rename to src/components/IngredientsShoppingItem/IngredientsShoppingItem.styled.ts diff --git a/src/components/IngredientsShoppingItem/IngredientsShoppingItem.jsx b/src/components/IngredientsShoppingItem/IngredientsShoppingItem.tsx similarity index 68% rename from src/components/IngredientsShoppingItem/IngredientsShoppingItem.jsx rename to src/components/IngredientsShoppingItem/IngredientsShoppingItem.tsx index 1ef4dc8..7cd29f2 100644 --- a/src/components/IngredientsShoppingItem/IngredientsShoppingItem.jsx +++ b/src/components/IngredientsShoppingItem/IngredientsShoppingItem.tsx @@ -1,4 +1,5 @@ -import { useDispatch } from 'react-redux'; +import {FC} from 'react' +import { useAppDispatch } from 'hooks/reduxHooks'; import { IngredientItem, @@ -13,8 +14,15 @@ import { import { deleteProduct } from 'redux/ShoppingList/shoppingListOperations'; import NotPhoto from '../../images/bgPages/recipePage/not-photo.png'; -const IngredientsShoppingItem = ({ image, id, nameIngredient, weight }) => { - const dispatch = useDispatch(); +interface IProps{ + image: string; + id: string; + nameIngredient: string; + weight: string; +} + +const IngredientsShoppingItem:FC = ({ image, id, nameIngredient, weight }) => { + const dispatch = useAppDispatch(); return ( @@ -29,7 +37,7 @@ const IngredientsShoppingItem = ({ image, id, nameIngredient, weight }) => { {nameIngredient} {weight} - dispatch(deleteProduct(id))}> + dispatch(deleteProduct({id}))}> diff --git a/src/components/IngredientsShoppingItem/index.js b/src/components/IngredientsShoppingItem/index.ts similarity index 100% rename from src/components/IngredientsShoppingItem/index.js rename to src/components/IngredientsShoppingItem/index.ts diff --git a/src/components/IngredientsShoppingList/IngredientsShoppingList.styled.js b/src/components/IngredientsShoppingList/IngredientsShoppingList.styled.ts similarity index 100% rename from src/components/IngredientsShoppingList/IngredientsShoppingList.styled.js rename to src/components/IngredientsShoppingList/IngredientsShoppingList.styled.ts diff --git a/src/components/IngredientsShoppingList/IngredientsShoppingList.jsx b/src/components/IngredientsShoppingList/IngredientsShoppingList.tsx similarity index 77% rename from src/components/IngredientsShoppingList/IngredientsShoppingList.jsx rename to src/components/IngredientsShoppingList/IngredientsShoppingList.tsx index 5a6c423..08be334 100644 --- a/src/components/IngredientsShoppingList/IngredientsShoppingList.jsx +++ b/src/components/IngredientsShoppingList/IngredientsShoppingList.tsx @@ -1,7 +1,15 @@ +import { FC } from 'react'; + import IngredientsShoppingItem from 'components/IngredientsShoppingItem'; import { IngredientsListStyled } from './IngredientsShoppingList.styled'; -const IngredientsShoppingList = ({ ingredients }) => { +import { IProduct } from 'types'; + +interface IProps { + ingredients: IProduct[]; +} + +const IngredientsShoppingList: FC = ({ ingredients }) => { return ( <> @@ -11,7 +19,6 @@ const IngredientsShoppingList = ({ ingredients }) => { image={ingredient.image} nameIngredient={ingredient.strIngredient} weight={ingredient.weight ? ingredient.weight : 'any'} - recipeId={ingredient.recipeId} id={ingredient._id} /> ))} diff --git a/src/components/IngredientsShoppingList/index.js b/src/components/IngredientsShoppingList/index.ts similarity index 100% rename from src/components/IngredientsShoppingList/index.js rename to src/components/IngredientsShoppingList/index.ts diff --git a/src/hooks/useShoppingList.js b/src/hooks/useShoppingList.js deleted file mode 100644 index 654bd72..0000000 --- a/src/hooks/useShoppingList.js +++ /dev/null @@ -1,14 +0,0 @@ -import { useSelector } from 'react-redux'; -import { - selectProducts, - selectIsLoading, - selectError, -} from 'redux/ShoppingList/shoppingListSelectors.js'; - -export const useShoppingList = () => { - return { - selectProducts: useSelector(selectProducts), - selectIsLoading: useSelector(selectIsLoading), - error: useSelector(selectError), - }; -}; diff --git a/src/hooks/useShoppingList.ts b/src/hooks/useShoppingList.ts new file mode 100644 index 0000000..61ad59e --- /dev/null +++ b/src/hooks/useShoppingList.ts @@ -0,0 +1,14 @@ +import { useAppSelector } from 'hooks/reduxHooks'; +import { + selectProducts, + selectIsLoading, + selectError, +} from 'redux/ShoppingList/shoppingListSelectors'; + +export const useShoppingList = () => { + return { + products: useAppSelector(selectProducts), + isLoading: useAppSelector(selectIsLoading), + error: useAppSelector(selectError), + }; +}; diff --git a/src/pages/ShoppingListPage/ShoppingListPage.styled.js b/src/pages/ShoppingListPage/ShoppingListPage.styled.ts similarity index 100% rename from src/pages/ShoppingListPage/ShoppingListPage.styled.js rename to src/pages/ShoppingListPage/ShoppingListPage.styled.ts diff --git a/src/pages/ShoppingListPage/ShoppingListPage.jsx b/src/pages/ShoppingListPage/ShoppingListPage.tsx similarity index 79% rename from src/pages/ShoppingListPage/ShoppingListPage.jsx rename to src/pages/ShoppingListPage/ShoppingListPage.tsx index 5c041f0..40f6bd4 100644 --- a/src/pages/ShoppingListPage/ShoppingListPage.jsx +++ b/src/pages/ShoppingListPage/ShoppingListPage.tsx @@ -11,14 +11,23 @@ import { HeaderTable, StyledLoaderWrapper } from './ShoppingListPage.styled'; import Loader from 'components/Loader'; import NotFoundWrapp from 'components/ReusableComponents/NotFoundWrapp'; +import {useShoppingList} from 'hooks/useShoppingList' +import { IProduct } from 'types'; + const isLoading = false; const ShoppingListPage = () => { const { t } = useTranslation(); - const shoppingList = useSelector(selectProducts); - const revers = arr => arr.map((_, index) => arr[arr.length - 1 - index]); - const reversedShoppingList = revers(shoppingList); + + + const shoppingList = useShoppingList().products; + console.log(shoppingList); + + + const reverse = (arr: IProduct[]): IProduct[] => arr.map((_, index) => arr[arr.length - 1 - index]); + + const reversedShoppingList = reverse(shoppingList); return ( @@ -30,7 +39,7 @@ const ShoppingListPage = () => { {t('shoppingListPage.remove')}

- {isLoading ? ( + {isLoading ? ( diff --git a/src/pages/ShoppingListPage/index.js b/src/pages/ShoppingListPage/index.ts similarity index 100% rename from src/pages/ShoppingListPage/index.js rename to src/pages/ShoppingListPage/index.ts From d9040a6e989cde1401450b72d0f02cff6d69bc49 Mon Sep 17 00:00:00 2001 From: Mykola Zaikovskyi Date: Mon, 24 Jul 2023 13:38:03 +0300 Subject: [PATCH 2/2] fix favorite API --- src/services/favorite-API.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/services/favorite-API.ts b/src/services/favorite-API.ts index d2c5b48..1af04d8 100644 --- a/src/services/favorite-API.ts +++ b/src/services/favorite-API.ts @@ -14,12 +14,6 @@ export const fetchOneRacipes = async (id: string) => { return data; }; -// export const fetchOwnRacipes = async () => { -// const url = `/ownRecipe/`; -// const { data } = await axios.get(url); -// return data; -// }; - export const fetchFavoriteRacipes = async (page?: number, limit?: number) => { const url = `/favorite`; const { data }: AxiosResponse = await axios.get(