cambios de ByCategory traidos

.env

@@ -8,4 +8,4 @@ SECRET = "CUALQUIER COSA"
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="mysql://root:@localhost:3306/coexbuster"
+DATABASE_URL="mysql://root:Jeancarlos17@localhost:3306/coexbuster"

public/scripts/shoppingCart.js

@@ -1,6 +1,7 @@
-
 const cartContainer = document.querySelector('.cart-container');
 const checkoutButton = document.querySelector('.checkout-button-container');
+const closeButton = document.querySelector('#closeButton');
+const openButton = document.querySelector('#openButton');
 
 const openCart = () => {
 	cartContainer.style.right = `0`;
@@ -22,10 +23,12 @@ const imageUrl = `https://image.tmdb.org/t/p/w500/`;
 const moviesInCart = [];
 
 //cargar los datos del localStorage a moviesInCart para luego renderizar las movies del shoppingCart
-window.onload = () => {
-	const moviesLocalStorage = localStorage.getItem('shoppingCart') || [];
-	const moviesArr = JSON.parse(moviesLocalStorage);
-	moviesArr.forEach((movie) => {
+window.onload = async () => {
+	const moviesCookies= await fetch('http://localhost:3000/api/v1/shop/get/203')
+	const pruebita = await moviesCookies.json()
+	// const moviesArr = JSON.parse(moviesCookies);
+	console.log(pruebita)
+	moviesCookies.forEach((movie) => {
 		moviesInCart.push(movie);
 	});
 	renderMovieInCart(moviesInCart);
@@ -50,23 +53,50 @@ const throwError = (message) => {
 	}, 2000);
 }
 
+const list = document.querySelectorAll('.mcc-table__btn--add');
+list.forEach((element, index) => {
+	element.addEventListener('click', () => {
+		const id = element.getAttribute('id');
+		fetch(`http://localhost:3000/api/v1/movies/${id}`)
+		.then((response) => response.json())
+		.then((data) => addToCart(data));
+	})
+})
+
+
+
+
 //Obtengo las pelis de la lista numero 1
 
 //funcion para añadir una peli al shopping cart
-const addToCart = async (movieObj) => {
+const addToCart = async (movie) => {
 	try {
-		const movie = movieObj
-		const indexMovies = moviesInCart.map((movie) => movie.id)
+		const indexMovies = moviesInCart.map((movie) => movie.movie.id)
 		//comprobamos que la pelicula seleccionada no este repetida en moviesCart
-		if (!indexMovies.includes(movie.id)) {
+		if (!indexMovies.includes(movie.movie.id)) {
 			moviesInCart.push(movie)
 			renderMovieInCart(moviesInCart)
 			showCheckoutButton(moviesInCart.length)
-			openCart()
-			localStorage.setItem(
-				'shoppingCart',
-				JSON.stringify(moviesInCart)
-			)
+
+			try {
+				const response = await fetch("http://localhost:3000/api/v1/shop/add", {
+					method: 'POST',
+					headers: {
+					'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({
+					movie,
+				})
+				});
+				if (response.ok) {
+					const result = await response.json();
+					console.log(result);
+				}
+				} catch (err) {
+				console.error(err);
+			}
+
+			// openCart()
 		} else {
 			throwError('Peli repetida')
 			return
@@ -84,20 +114,22 @@ const cartList = document.querySelector('.cart-list')
 const renderMovieInCart = async (moviesArray) => {
 	try {
 		let template = ``;
+		console.log(moviesArray)
 		moviesArray.map((movie) => {
-			let url = imageUrl + movie.poster_path;
+			console.log(movie.movie.vote_average)
+			let url = imageUrl + movie.movie.poster_path;
 			const cart = `
 				<div class="cart-item">
 					<div class="cart-item-img">
 						<img 
-						src="${url}" alt="movie-img">
+						src="${movie.movie.poster_path}" alt="movie-img">
 					<div class="cart-info-container">
-						<h2>${movie.title}</h2>
-						<span>${movie.movies_categories.categories}</span>
-						<star-rating rating="${movie.vote_average}"></star-rating>
+						<h2>${movie.movie.title}</h2>
+						<span>${movie.movie.movies_categories[0].categories.name}</span>
+						<star-rating rating="${movie.movie.vote_average}"></star-rating>
 					</div>
 				</div>
-				<div class="delete-button" onclick="deleteMovieInCart(${movie.id})">X</div>
+				<div class="delete-button" onclick="deleteMovieInCart(${movie.movie.id})">X</div>
 			</div>
 			`;
 			template += cart;

src/controllers/ViewController.ts

@@ -17,16 +17,23 @@ class ViewController implements IController<Request, Response>{
     }
     async getAllByCategory(req: Request, res: Response): Promise<void> {
         let category: any = req.query.category
+        console.log(category)
         category = parseInt(category)
-        const categories = await MoviesRepository.getAllByCategory(category);
-        res.render('layouts/shop', { categories: categories });
+        const movies : any = await MoviesRepository.getAllByCategoryById(category);
+        // const result = movies.map(element => element.movies );
+        const categories = await MoviesRepository.getAllCategories();
+        res.render('layouts/shop', { result: movies, categories:categories });
     }
 
+
+
     async getAllBySearch(req: Request, res: Response): Promise<void> {
         const search = req.query.search
+        // console.log(search);
         const movies = await MoviesRepository.getAllBySearch(search);
-
-        res.json(movies);
+        const categories = await MoviesRepository.getAllCategories();
+        //  res.json(movies);
+        res.render('layouts/shop', { result:movies, categories:categories});
     }
 
     async get(req: Request, res: Response): Promise<void> {

src/controllers/movie.controller.ts

@@ -12,7 +12,7 @@ class MoviesController implements IController<Request, Response>{
     async getAllByCategory(req: Request, res: Response): Promise<void> {
         let category : any = req.query.category
         category = parseInt(category)
-        const movies = await MoviesRepository.getAllByCategory(category);
+        const movies = await MoviesRepository.getAllByCategoryById(category);
         res.json({
             movies: movies
         });

src/controllers/shopping.controller.ts

@@ -1,4 +1,5 @@
 import { Request, Response } from "express";
+import { transaction_detail } from '@prisma/client';
 
 
 class ShoppingController
@@ -24,14 +25,14 @@ class ShoppingController
             const target = data.filter((e:any) => e.id_user == req.body.id_user); // Buscando el user
             if (target.length == 0) {  // Si no existe el user, agrega la req a la cookie
                 data.push(req.body)
-                res.cookie('shop', data) 
+                res.cookie('shop', data)
             }
             else {
                 console.log(target)
                 const userMovies = target[0].movies;
                 userMovies.push(...req.body.movies);
                 res.cookie('shop', data)}
-            } 
+            }
         res.json({code:201, message:'Created order'});
     }
 

src/repository/movies.repository.ts

@@ -117,7 +117,7 @@ class MoviesRepository implements IMovieRepository<movies> {
         return movie;
     }
 
-    async getAllByCategory(id: number): Promise<void> {
+    async getAllByCategoryById(id: number): Promise<void> {
         const movies: any = await prisma.movies_categories.findMany({
             where: {
                 category_id: id

src/routes/test.routes.ts

@@ -111,16 +111,32 @@ router.get('/history/order', (req, res) => {  //colocarle al order:id
 router.get('/', (req, res) => {
     // res.render('index', { message: 'hello world' })
     res.render('layouts/temporal', {
-        id: 176,
-        path: '/ok4ot3YbfDYZcINXf91JUfq3maB.jpg',
-        title: 'Saw',
-        overview: '',
-        genres: [
-            'Horror',
-            'Thriller',
-            'Crime'
-        ],
-        vote_average: 7.4
+        result : [
+            {
+                id: 65,
+                path: '/ok4ot3YbfDYZcINXf91JUfq3maB.jpg',
+                title: 'Saw',
+                overview: '',
+                genres: [
+                    'Horror',
+                    'Thriller',
+                    'Crime'
+                ],
+                vote_average: 7.4
+            },
+            {
+                id: 64,
+                path: '/ok4ot3YbfDYZcINXf91JUfq3maB.jpg',
+                title: 'Saw 2',
+                overview: '',
+                genres: [
+                    'Horror',
+                    'Thriller',
+                    'Crime'
+                ],
+                vote_average: 4
+            }
+        ]
     })
 })
 
@@ -155,6 +171,10 @@ router.get('/order', (req, res) => {
     })
 });
 
+router.get('/movie/detail', (req, res) => {
+    res.render('layouts/movie-detail')
+})
+
 
 
 export default router

src/routes/views.routes.ts

@@ -14,9 +14,10 @@ router
     .get('/movies', viewController.getAll )
     .get('/movies/paginate/:pag', viewController.getPaginate )
     .get('/movie/:id')
-    // .get('/history', tokenAuthentication)
-    .get('/history', transactionController.getAll)
-    .get('/history/order/:id', transaction_detailController.getOne)
+    .get('/movies/category', viewController.getAllByCategory)
+    .get('/movies/search', viewController.getAllBySearch)
+    .get('/history')
+    .get('/history/order/:id')
     .get('/login', (req, res) => {
         res.render('layouts/login')
     })

src/views/components/movieCardComponent.ejs

@@ -3,7 +3,7 @@
 <div class="mcc-grid__card">
     <figure class="mcc-card__cover">
         <button class="mcc-go-to-detail" id="<%= id %>">
-            <img 
+            <img
                 src="<%= path %>"
                 alt="<%= typeof title != 'undefined' ? title : 'untitled' %>"
                 class="mcc-card__poster">
@@ -23,7 +23,7 @@
                 <%= typeof genres != 'undefined' ? genres : 'genres not found' %>
             </p>
             <%- include('./starsComponent.ejs', {vote_average: vote_average}) %>
-        </div>
-        <div class="mcc-table__btn--add" onclick="addMovie('<% id %>')" id="<%= id %>">Add To Cart</div>
+        </div> 
+        <div class="mcc-table__btn--add"  id="<%= id %>">Add To Cart</div>
     </div>
 </div>

src/views/components/navBar.ejs

@@ -4,12 +4,20 @@
             <img src="/public/assets/icons/logo_coexbuster.svg" width="80px" alt="">
         </a>
     </div>
-    <% if (typeof categories != 'undefined') { %>
-        <div class="categories">
-            <nav class="nav">
-                <ul class="list-categories">
+    <div class="categories">
+        <nav class="nav">
+            <ul class="list-categories">
+
+                <% categories.forEach(function(cat) { %>
+                    <a href="/movies/category?category=<%- cat.id %>"><li><%- cat.name %></li></a>
+                <% }); %>
+
+                <label for="otherMenu" class="list-item down-list" id="otherItems">
+                    Others
+                    <img src="../../../public/assets/icons/arrow_down.svg" alt="arrow_down" class="list-icon">
+                <select class="other-categories" name="" id=""  onchange="location = this.value">
                     <% categories.forEach(function(cat) { %>
-                        <a href=""><li><%- cat.name %></li></a>
+                        <option value="/movies/category?category=<%- cat.id %>"><%- cat.name %></option>
                     <% }); %>
                     <label for="otherMenu" class="list-item down-list" id="otherItems">
                         Others
@@ -38,9 +46,10 @@
             </div> 
         </div> -->
         <drop-menu id="drop-menu" class="displayNone"></drop-menu>
-        <a href="#" as="button" id="openButton">
+        <a as="button" id="openButton">
             <img src="../../../public/assets/icons/icon_shopping_cart_notification.svg" alt="" width="30px" heigth="27">
         </a>
     </div>
 
-</header>
+</header>
+

src/views/components/search.ejs

@@ -1,3 +1,3 @@
-<form class="filtros" id="filtros">
+<form class="filtros" method="get" id="filtros" action="/movies/search?search=">
     <input type="text" class="search" id="search" name="search" placeholder="Buscar">    
 </form>

src/views/components/shoppingCartComponent.ejs

@@ -1,9 +1,10 @@
+<link rel="stylesheet" href="/public/styles/shoppingCart.css">
 <section>
     <div class="cart-slider">
         <div class="cart-container">
             <div class="title-container">
             <h2 class="title-cart">Shopping Cart</h2>
-            <svg xmlns="http://www.w3.org/2000/svg" onclick="closeCart()" class="closeBtn" width="30px" viewBox="0 0 448 512"><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" id="closeButton"  class="closeBtn" width="30px" viewBox="0 0 448 512"><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
         </div>
         <div class="cart-list"></div>
             <div class="checkout-button-container" id="checkButton">

src/views/layouts/movie-detail.ejs

@@ -1,6 +1,10 @@
 <%- include('../partials/head', {title : 'Movie Detail', style:
 'movieDetail.css'}) %> <%- include('../partials/body') %>
-<nav>navbar</nav>
+<link rel="stylesheet" href="/public/styles/shoppingCart.css">
+<link href="/public/styles/navbar.css" rel="stylesheet">
+<header class="s-header">
+    <nav-bar><%- include('../components/navbar.ejs') %></nav-bar>
+</header>
 <main>
     <%- include('../partials/movie-detail') %>
 </main>

src/views/layouts/shop.ejs

@@ -13,6 +13,9 @@
     <nav-bar><%- include('../components/navbar.ejs') %></nav-bar>
 
     <main class="s-content">
+        <div class="shoppingCart">
+            <%- include('../components/shoppingCartComponent.ejs') %>
+        </div>
         <div class="s-filter">
             <filter-bar><%- include('../components/search.ejs') %></filter-bar>
         </div>
@@ -22,6 +25,8 @@
 
     <footer class="s-footer">
         <pagination-bar><%- include('../components/paginationComponent.ejs') %></pagination-bar>
+        <!-- <script src="/public/scripts/shoppingCart.js"></script> -->
+
     </footer>
 </div>