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(