Merge pull request #23 from Bohdan100/feature/shoppinglist-page

rewrote on typescript shoppinglist page
Bohdan100 · Jul 24, 2023 · 3d223bf · 3d223bf
2 parents 6562c49 + d9040a6
commit 3d223bf
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 30 deletions.
diff --git a/...ingItem/IngredientsShoppingItem.styled.js → ...ingItem/IngredientsShoppingItem.styled.ts b/...ingItem/IngredientsShoppingItem.styled.js → ...ingItem/IngredientsShoppingItem.styled.ts
diff --git a/...sShoppingItem/IngredientsShoppingItem.jsx → ...sShoppingItem/IngredientsShoppingItem.tsx b/...sShoppingItem/IngredientsShoppingItem.jsx → ...sShoppingItem/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<IProps> = ({ image, id, nameIngredient, weight }) => {
+  const dispatch = useAppDispatch();
 
   return (
     <IngredientItem>
@@ -29,7 +37,7 @@ const IngredientsShoppingItem = ({ image, id, nameIngredient, weight }) => {
         <NameIngredient>{nameIngredient}</NameIngredient>
       </TextContainer>
       <WeighIngredient>{weight}</WeighIngredient>
-      <DeleteButton type="buton" onClick={() => dispatch(deleteProduct(id))}>
+      <DeleteButton type="button" onClick={() => dispatch(deleteProduct({id}))}>
         <DelIconStyled />
       </DeleteButton>
     </IngredientItem>

diff --git a/...mponents/IngredientsShoppingItem/index.js → ...mponents/IngredientsShoppingItem/index.ts b/...mponents/IngredientsShoppingItem/index.js → ...mponents/IngredientsShoppingItem/index.ts
diff --git a/...ingList/IngredientsShoppingList.styled.js → ...ingList/IngredientsShoppingList.styled.ts b/...ingList/IngredientsShoppingList.styled.js → ...ingList/IngredientsShoppingList.styled.ts
diff --git a/...sShoppingList/IngredientsShoppingList.jsx → ...sShoppingList/IngredientsShoppingList.tsx b/...sShoppingList/IngredientsShoppingList.jsx → ...sShoppingList/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<IProps> = ({ ingredients }) => {
   return (
     <>
       <IngredientsListStyled>
@@ -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/...mponents/IngredientsShoppingList/index.js → ...mponents/IngredientsShoppingList/index.ts b/...mponents/IngredientsShoppingList/index.js → ...mponents/IngredientsShoppingList/index.ts
diff --git a/src/hooks/useShoppingList.js b/src/hooks/useShoppingList.js
diff --git a/src/hooks/useShoppingList.ts 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/...oppingListPage/ShoppingListPage.styled.js → ...oppingListPage/ShoppingListPage.styled.ts b/...oppingListPage/ShoppingListPage.styled.js → ...oppingListPage/ShoppingListPage.styled.ts
diff --git a/...ges/ShoppingListPage/ShoppingListPage.jsx → ...ges/ShoppingListPage/ShoppingListPage.tsx b/...ges/ShoppingListPage/ShoppingListPage.jsx → ...ges/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 (
     <MainContainer>
@@ -30,7 +39,7 @@ const ShoppingListPage = () => {
           <span>{t('shoppingListPage.remove')}</span>
         </p>
       </HeaderTable>
-      {isLoading ? (
+      {isLoading ? ( 
         <StyledLoaderWrapper>
           <Loader />
         </StyledLoaderWrapper>

diff --git a/src/pages/ShoppingListPage/index.js → src/pages/ShoppingListPage/index.ts b/src/pages/ShoppingListPage/index.js → src/pages/ShoppingListPage/index.ts
diff --git 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<IFavoriteRecipesGetResponse> = await axios.get(