fix recommendations component, move component in folder page, and fix…

src/components/movies/cardMovieItem.tsx

@@ -51,7 +51,6 @@ const CardMovieItem = ({ product }: CardMovieItemProps) => {
 
   const handleDelete = () => {
     if (product?.id) {
-      dispatch(command.products.delete(product?.id));
       dispatch(command.history.delete(product?.id));
       navigate('/movies');
     }

src/components/movies/recommendations.tsx

@@ -54,8 +54,9 @@ const Recommendations = (Recommendations: RecommendationsProps) => {
 
   return (
     <>
-    {recommendations
-      ? (
+    {recommendations?.length === 0
+      ? <Typography> no data </Typography>
+      : (
         <Box
           className="keen-slider"
           ref={ref}
@@ -114,8 +115,8 @@ const Recommendations = (Recommendations: RecommendationsProps) => {
         </div>
       ))}
         </Box>
-      )
-      : <Typography> no data </Typography>}
+      )}
+
     </>
   );
 };

src/models/products/commands.ts

@@ -16,8 +16,6 @@ import { ProductsActionType } from './types.js';
 
 import type {
   nowPlaying,
-  Product,
-  ProductDeleted,
   ProductDetailModel,
   ProductsAction,
   ProductsModel,
@@ -26,34 +24,6 @@ import type {
 } from './types.js';
 
 const productsCommand = {
-  delete: (id: number) => {
-    return (dispatch) => {
-      if (id) {
-        const value: ProductDeleted = {
-          id
-        };
-
-        dispatch({
-          type: ProductsActionType.Delete,
-          value
-        });
-      }
-    };
-  },
-  create: (product: Product) => {
-    return (dispatch) => {
-      if (product) {
-        const value: ProductsModel = {
-          products: [product]
-        };
-
-        dispatch({
-          type: ProductsActionType.Create,
-          value
-        });
-      }
-    };
-  },
   load: (options?: Readonly<FetchURLOptions>) => {
     return async (dispatch) => {
       try {
@@ -163,20 +133,6 @@ const productsCommand = {
         console.error(err);
       }
     };
-  },
-  update: (product: Product) => {
-    return (dispatch) => {
-      if (product) {
-        const value: ProductsModel = {
-          products: [product]
-        };
-
-        dispatch({
-          type: ProductsActionType.Update,
-          value
-        });
-      }
-    };
   }
 } satisfies Command<RootModel, ProductsAction>;
 

src/models/products/reducers.ts

@@ -5,7 +5,6 @@ import { ProductsActionType } from './types.js';
 
 import type {
   nowPlaying,
-  Product,
   ProductDetailModel,
   ProductsAction,
   ProductsModel,
@@ -17,40 +16,9 @@ const productsReducer = (
   state: ProductsModel = {},
   action: Readonly<ProductsAction>
 ): ProductsModel => {
-  let newProducts: Product[] = [];
   switch (action.type) {
     case ProductsActionType.Load:
       return !state.products ? { ...action.value } : { ...state };
-    case ProductsActionType.Delete:
-      const productIdToDelete = action.value; // Assuming action.value contains the ID of the product to delete
-
-      return {
-        ...state,
-        products: state.products
-          ? state.products.filter(
-            (product) => product.id !== productIdToDelete.id
-          )
-          : []
-      };
-    case ProductsActionType.Create:
-      newProducts = action.value?.products ?? [];
-
-      return {
-        ...state,
-        products: state.products
-          ? [...state.products, ...newProducts]
-          : newProducts
-      };
-    case ProductsActionType.Update:
-      const updatedProducts = action.value?.products ?? [];
-      const updatedProductId = updatedProducts[0]?.id;
-
-      return {
-        ...state,
-        products: (state.products ?? []).map((product: Product) => (product.id === updatedProductId
-          ? { ...product, ...updatedProducts[0] }
-          : product))
-      };
 
     default:
       return state;

src/models/products/types.ts

@@ -53,22 +53,13 @@ interface ProductDetailModel {
 
 enum ProductsActionType {
   Load = 'products-load',
-  Delete = 'product-delete',
   Detail = 'products-detail',
-  Create = 'products-create',
-  Update = 'products-update',
   NowPlayingLoad = 'products-now_playing',
   UpcomingLoad = 'products-upcoming',
   TopratedLoad = 'product-toprated'
 }
 
 type ProductsAction = {
-  type: ProductsActionType.Create
-  value?: ProductsModel
-} | {
-  type: ProductsActionType.Delete
-  value: ProductDeleted
-} | {
   type: ProductsActionType.Detail
   value?: ProductDetailModel
 } | {
@@ -83,8 +74,6 @@ type ProductsAction = {
 } | {
   type: ProductsActionType.UpcomingLoad
   value?: upComing
-} | { type: ProductsActionType.Update
-  value?: ProductsModel
 } ;
 
 export { ProductsActionType };

src/pages/add/index.tsx

@@ -135,7 +135,7 @@ const AddMovie: PageComponent = () => {
       title: newTitle
     };
 
-    dispatch(command.products.create(product));
+    // dispatch(command.products.create(product));
     dispatch(command.history.create(product));
   };
 

src/pages/home/index.tsx

@@ -6,11 +6,11 @@ import type { PageComponent } from '@nxweb/react';
 
 import { useSettings } from '@hooks/use-settings';
 
-import AddMovie from './addMovie';
-import NowPlaying from './nowPlaying';
-import TopSec from './top';
-import TopThree from './topThree';
-import Upcoming from './upcoming';
+import AddMovie from '../../components/movies/addMovie';
+import NowPlaying from '../../components/movies/nowPlaying';
+import TopSec from '../../components/movies/top';
+import TopThree from '../../components/movies/topThree';
+import Upcoming from '../../components/movies/upcoming';
 
 const Home: PageComponent = () => {
   const {

src/pages/movies/cardMovie.tsx

@@ -6,21 +6,26 @@ import { useEffect } from 'react';
 import { Grid } from '@mui/material';
 
 import CardMovieItem from '@components/movies/cardMovieItem';
+import type { Product } from '@models/products/types';
 import { useCommand, useStore } from '@models/store.js';
 
 const CardMovie = () => {
-  const [state, dispatch] = useStore((store) => store.products);
+  const [state, dispatch] = useStore((store) => store);
   const command = useCommand((cmd) => cmd);
 
   useEffect(() => {
     dispatch(command.products.load()).catch((err: unknown) => {
       console.error(err);
     });
+
+    dispatch(command.history.load());
   }, []);
 
+  const product: Product[] = [...state.products?.products ?? [], ...state.history?.history ?? []];
+
   return (
     <Grid container={true} spacing={6}>
-        {state?.products?.map((row) => (
+        {product.map((row) => (
           <Grid item={true} md={3} sx={{ pb: 4 }} xs={12}>
             <CardMovieItem product={row} />
           </Grid>

src/pages/movies/{id}.tsx

@@ -33,7 +33,7 @@ const Product: PageComponent = () => {
   const command = useCommand((cmd) => cmd);
 
   const product = useMemo(() => {
-    let product = state?.products?.products?.find(
+    let product = state?.history?.history?.find(
       (o) => o.id.toString() === id
     );
     if (!product) {
@@ -54,7 +54,7 @@ const Product: PageComponent = () => {
 
   const handleDelete = () => {
     if (product?.id) {
-      dispatch(command.products.delete(product?.id));
+      // dispatch(command.products.delete(product?.id));
       dispatch(command.history.delete(product?.id));
       navigate('/movies');
     }

src/pages/update/{id}.tsx

@@ -43,11 +43,11 @@ const UpdateMovie: PageComponent = () => {
   const command = useCommand((cmd) => cmd);
 
   useEffect(() => {
-    dispatch(command.products.load());
+    dispatch(command.history.load());
   }, []);
 
   const currentMovie = useMemo(
-    () => state?.products?.products?.find((current) => current.id?.toString() === id),
+    () => state?.history?.history?.find((current) => current.id?.toString() === id),
     [state, id]
   );
 
@@ -174,7 +174,6 @@ const UpdateMovie: PageComponent = () => {
         title: newTitle
       };
 
-      dispatch(command.products.update(product));
       dispatch(command.history.update(product));
     }
   };