From d55ea44854e31074fb2fdd5378476d0281a053ac Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 5 Dec 2023 12:43:56 +0100 Subject: [PATCH 01/23] feat: clean reviews --- src/components/Reviews.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index d8b6fc5..39aec25 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from "react"; import { Container, Row, Col, Button, Image } from "react-bootstrap"; import PostReview from "./PostReview"; -import chefIcon from "../assets/icons/chef.png"; import { StarFill, PatchCheck } from "react-bootstrap-icons"; import LikesReview from "./LikesReview"; import ImageModal from "./ImageModal"; From e74a19f60b08d8cb1bd8b95649a0191e45ac0cfa Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 5 Dec 2023 13:12:11 +0100 Subject: [PATCH 02/23] feat: Change variable env --- .env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env b/.env index 3ed23bb..2737d5b 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ -REACT_APP_API_URL = 'http://127.0.0.1:8000' +REACT_APP_API_URL = 'https://kasula-develop-5q5vehm3ja-ew.a.run.app' # LA VARIABLE ESTÀ PENSADA PERQUÈ NO PORTI BARRA AL FINAL From 8d8baa5da3cf1506d775c2c92ad9e53a15358d02 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 5 Dec 2023 13:25:36 +0100 Subject: [PATCH 03/23] feat: Create and implement new component ModifyReview --- src/components/ModifyReview.jsx | 91 +++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 src/components/ModifyReview.jsx diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx new file mode 100644 index 0000000..f67efd2 --- /dev/null +++ b/src/components/ModifyReview.jsx @@ -0,0 +1,91 @@ +// ModifyReview.js +import React, { useState } from 'react'; +import { Button, Modal, Form } from 'react-bootstrap'; + +const ModifyReview = ({ reviewId, recipeId, onHide, reloadReviews }) => { + const [newComment, setNewComment] = useState(''); + + const handleUpdateReview = async () => { + // Realizar la lógica para actualizar la revisión usando el endpoint PUT + try { + const response = await fetch( + `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`, + { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ comment: newComment }), + } + ); + + const data = await response.json(); + if (response.ok) { + console.log('Review actualizada:', data); + reloadReviews(); + } else { + console.error('Error al actualizar la revisión:', data); + } + } catch (error) { + console.error('Error en la solicitud de actualización de la revisión:', error); + } + + onHide(); + }; + + const handleDeleteReview = async () => { + // Realizar la lógica para eliminar la revisión usando el endpoint DELETE + try { + const response = await fetch( + `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`, + { + method: 'DELETE', + } + ); + + const data = await response.json(); + if (response.ok) { + console.log('Review eliminada:', data); + reloadReviews(); + } else { + console.error('Error al eliminar la revisión:', data); + } + } catch (error) { + console.error('Error en la solicitud de eliminación de la revisión:', error); + } + + onHide(); + }; + + return ( + + + Modificar o eliminar revisión + + +
+ + Nuevo Comentario + setNewComment(e.target.value)} + /> + +
+ + + + + + + ); +}; + +export default ModifyReview; From 41f78df69e3dee9553f8dbfc9c97e173697c1871 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 5 Dec 2023 14:00:13 +0100 Subject: [PATCH 04/23] feat: Implement edit and delete review --- src/components/ModifyReview.jsx | 70 ++++++++++++++++++++++----------- src/components/Reviews.jsx | 49 +++++++++++++++++++++-- 2 files changed, 92 insertions(+), 27 deletions(-) diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx index f67efd2..319bda2 100644 --- a/src/components/ModifyReview.jsx +++ b/src/components/ModifyReview.jsx @@ -1,19 +1,21 @@ // ModifyReview.js import React, { useState } from 'react'; import { Button, Modal, Form } from 'react-bootstrap'; +import { useAuth } from "./AuthContext"; -const ModifyReview = ({ reviewId, recipeId, onHide, reloadReviews }) => { +const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct }) => { const [newComment, setNewComment] = useState(''); + const { token } = useAuth(); const handleUpdateReview = async () => { - // Realizar la lógica para actualizar la revisión usando el endpoint PUT try { const response = await fetch( `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`, { method: 'PUT', headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, }, body: JSON.stringify({ comment: newComment }), } @@ -34,12 +36,15 @@ const ModifyReview = ({ reviewId, recipeId, onHide, reloadReviews }) => { }; const handleDeleteReview = async () => { - // Realizar la lógica para eliminar la revisión usando el endpoint DELETE try { const response = await fetch( `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`, { method: 'DELETE', + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, } ); @@ -57,32 +62,49 @@ const ModifyReview = ({ reviewId, recipeId, onHide, reloadReviews }) => { onHide(); }; + const handleConfirmDelete = () => { + // Aquí puedes agregar lógica adicional antes de confirmar la eliminación + handleDeleteReview(); + }; + return ( - + - Modificar o eliminar revisión + {funct === 'Edit' ? 'Modificar' : 'Eliminar'} revisión -
- - Nuevo Comentario - setNewComment(e.target.value)} - /> - -
+ {funct === 'Edit' ? ( +
+ + Nuevo Comentario + setNewComment(e.target.value)} + /> + +
+ ) : ( +

Are you sure you want to delete the review?

+ )} - - + {funct === 'Edit' ? ( + + ) : ( + <> + + + + )} ); diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index 39aec25..cadcfba 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -1,9 +1,10 @@ import React, { useState, useEffect } from "react"; import { Container, Row, Col, Button, Image } from "react-bootstrap"; import PostReview from "./PostReview"; -import { StarFill, PatchCheck } from "react-bootstrap-icons"; +import { StarFill, PatchCheck, PencilSquare, Trash } from 'react-bootstrap-icons'; import LikesReview from "./LikesReview"; import ImageModal from "./ImageModal"; +import ModifyReview from "./ModifyReview"; function Reviews(props) { @@ -11,7 +12,10 @@ function Reviews(props) { const [reviews, setReviews] = useState(null); const [showModal, setShowModal] = useState(false); const [showModalImage, setShowModalImage] = useState(false); + const [showModalReview, setShowModalReview] = useState(false); const [selectedImage, setSelectedImage] = useState(null); + const [selectedReview, setSelectedReview] = useState(null); + const [selectedFunct, setSelectedFunct] = useState(null); const isLogged = window.localStorage.getItem("logged"); const currentUserUsername = localStorage.getItem('currentUser'); @@ -35,7 +39,7 @@ function Reviews(props) { setShowModalImage(false); }; - const handleOpenModal = (image) => { + const handleOpenModal = () => { setShowModal(true); }; @@ -43,6 +47,21 @@ function Reviews(props) { setShowModal(false); }; + const handleOpenModalReview = (image, review, funct) => { + setSelectedImage(image); + setSelectedReview(review); + setShowModalReview(true); + setSelectedFunct(funct); + + }; + + const handleCloseModalReview = () => { + setSelectedImage(null); + setSelectedReview(null); + setShowModalReview(false); + setSelectedFunct(null); + }; + return ( {isLogged === 'true' ? @@ -114,7 +133,21 @@ function Reviews(props) { initialLikes={review.likes || 0} likedBy={review.liked_by} reloadReviews={reloadReviews} - /> + /> + {currentUserUsername === review.username && ( + <> + handleOpenModalReview(null, review, 'Edit')} + /> + handleOpenModalReview(null, review, 'Trash')} + /> + + )} @@ -134,6 +167,16 @@ function Reviews(props) { recipeImage={selectedImage} recipeName={selectedImage ? "Image" : null} // Puedes cambiar esto según tus necesidades /> + {selectedReview && ( + + )} ); } From 15db87f67f99896842d8f2ae0368833d89a85652 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 5 Dec 2023 14:01:23 +0100 Subject: [PATCH 05/23] Wip: Actually only edit comment --- src/components/ModifyReview.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx index 319bda2..bdfb466 100644 --- a/src/components/ModifyReview.jsx +++ b/src/components/ModifyReview.jsx @@ -63,7 +63,6 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct } }; const handleConfirmDelete = () => { - // Aquí puedes agregar lógica adicional antes de confirmar la eliminación handleDeleteReview(); }; From dd64ef1d38e7a5120a9479d586e4488472e8f45a Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 10:37:17 +0100 Subject: [PATCH 06/23] feat: Update rating algo --- src/components/ModifyReview.jsx | 57 ++++++++++++++++++++++++++------- src/components/Reviews.jsx | 9 +++--- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx index bdfb466..69bcccd 100644 --- a/src/components/ModifyReview.jsx +++ b/src/components/ModifyReview.jsx @@ -2,9 +2,15 @@ import React, { useState } from 'react'; import { Button, Modal, Form } from 'react-bootstrap'; import { useAuth } from "./AuthContext"; +import { + StarFill, + Star +} from "react-bootstrap-icons"; -const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct }) => { - const [newComment, setNewComment] = useState(''); +const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, reviewInfo }) => { + const [newComment, setNewComment] = useState(reviewInfo.comment); + const [newRating, setNewRating] = useState(reviewInfo.rating); + const [newImage, setNewImage] = useState(reviewInfo.file); // Para almacenar la nueva imagen const { token } = useAuth(); const handleUpdateReview = async () => { @@ -17,7 +23,7 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct } "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, - body: JSON.stringify({ comment: newComment }), + body: JSON.stringify({ comment: newComment, rating: newRating }), } ); @@ -42,7 +48,6 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct } { method: 'DELETE', headers: { - "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, } @@ -62,6 +67,25 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct } onHide(); }; + const renderStars = (amount) => { + let stars = []; + for (let i = 1; i <= 5; i++) { + stars.push( + setNewRating(i)} + > + {i <= amount ? : } + + ); + } + return stars; + }; + const handleConfirmDelete = () => { handleDeleteReview(); }; @@ -75,7 +99,7 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct } {funct === 'Edit' ? (
- Nuevo Comentario + New Comment setNewComment(e.target.value)} /> + + New Rating +
{renderStars(newRating)}
+ + + New Image + setNewImage(e.target.files[0])} + /> +
) : ( -

Are you sure you want to delete the review?

+

Are you sure delete review?

)} {funct === 'Edit' ? ( - + ) : ( <> )} diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index cadcfba..d8b79c4 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -47,8 +47,7 @@ function Reviews(props) { setShowModal(false); }; - const handleOpenModalReview = (image, review, funct) => { - setSelectedImage(image); + const handleOpenModalReview = (review, funct) => { setSelectedReview(review); setShowModalReview(true); setSelectedFunct(funct); @@ -56,7 +55,6 @@ function Reviews(props) { }; const handleCloseModalReview = () => { - setSelectedImage(null); setSelectedReview(null); setShowModalReview(false); setSelectedFunct(null); @@ -139,12 +137,12 @@ function Reviews(props) { handleOpenModalReview(null, review, 'Edit')} + onClick={() => handleOpenModalReview(review, 'Edit')} /> handleOpenModalReview(null, review, 'Trash')} + onClick={() => handleOpenModalReview(review, 'Trash')} /> )} @@ -175,6 +173,7 @@ function Reviews(props) { onHide={handleCloseModalReview} reloadReviews={reloadReviews} funct={selectedFunct} + reviewInfo={selectedReview} /> )} From a084972fd925d4f16f5cfebec00f34be174de972 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 12:24:35 +0100 Subject: [PATCH 07/23] WIP: update image in progess --- src/components/ModifyReview.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx index 69bcccd..db5ba48 100644 --- a/src/components/ModifyReview.jsx +++ b/src/components/ModifyReview.jsx @@ -14,6 +14,15 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, const { token } = useAuth(); const handleUpdateReview = async () => { + const bodyData = { + comment: newComment, + rating: newRating, + }; + if (newImage) { + bodyData.file = newImage; + } + console.log(">>>>NewImage: ", newImage) + try { const response = await fetch( `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`, @@ -23,7 +32,8 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, - body: JSON.stringify({ comment: newComment, rating: newRating }), + body: JSON.stringify({ comment: newComment, rating: newRating }), + file: newImage } ); From 80649225cbce06891367adb1002d65465a762153 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 12:49:50 +0100 Subject: [PATCH 08/23] feat: Button Review of RecipeDetail change text and design --- src/components/RecipeDetail.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index b19f4a1..734ccce 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -307,8 +307,8 @@ function RecipeDetail() { {recipe.energy ?? "No info of"} kcal - From baa3c1e9f045ef2e1f25f089d85babf87ec7cb7a Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 13:21:54 +0100 Subject: [PATCH 09/23] feat: Control errors with no reviews, etc --- src/components/Reviews.jsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index d8b79c4..522d578 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -64,6 +64,7 @@ function Reviews(props) { {isLogged === 'true' ? + {reviews && reviews.length > 0 ? (<> @@ -73,12 +74,14 @@ function Reviews(props) { onHide={handleCloseModal} reloadReviews={reloadReviews} /> + ) : null} : null}
    - {reviews ? ( + {console.log(">>>>>REVIEWS:",reviews)} + {reviews && reviews.length > 0 ? ( reviews.map((review, index) => (
  • @@ -154,7 +157,19 @@ function Reviews(props) {
    • )) ) : ( - Reviews not available +
    +

    There are currently no reviews.

    +

    Be the first one to post a review and share your thoughts!

    + + +
    )}
From 7b359e93aa198944dce7de3893a921078f226356 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 13:25:05 +0100 Subject: [PATCH 10/23] feat: Post review button change design --- src/components/Reviews.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index 522d578..49a6db3 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -65,7 +65,7 @@ function Reviews(props) { {isLogged === 'true' ? {reviews && reviews.length > 0 ? (<> -

There are currently no reviews.

Be the first one to post a review and share your thoughts!

- Date: Thu, 7 Dec 2023 13:40:51 +0100 Subject: [PATCH 11/23] feat: Control different things, when is recipe owner --- src/components/RecipeDetail.jsx | 2 +- src/components/Reviews.jsx | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index 734ccce..733754c 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -431,7 +431,7 @@ function RecipeDetail() { Reviews - + { @@ -64,7 +64,7 @@ function Reviews(props) { {isLogged === 'true' ? - {reviews && reviews.length > 0 ? (<> + {reviews && reviews.length > 0 && owner === currentUser ? (<> @@ -80,7 +80,6 @@ function Reviews(props) {
    - {console.log(">>>>>REVIEWS:",reviews)} {reviews && reviews.length > 0 ? ( reviews.map((review, index) => (
  • @@ -135,7 +134,7 @@ function Reviews(props) { likedBy={review.liked_by} reloadReviews={reloadReviews} /> - {currentUserUsername === review.username && ( + {currentUser === review.username && ( <>
    • )) - ) : ( -
    -

    There are currently no reviews.

    + ) : ( owner !== currentUser ? + (
    +

    There are currently no reviews

    Be the first one to post a review and share your thoughts!

    +
    ) :
    +

    There are currently no reviews

    + {/*

    Be the first one to post a review and share your thoughts!

    */} +

    You are the owner of the recipe you can't do reviews

    +
    )}
From fb99c4e3be5c45c0299bb31f3b8998b4f671a4e4 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 13:44:57 +0100 Subject: [PATCH 12/23] feat: Comment doesn't overlap username --- src/components/Reviews.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index 3c75496..a7546da 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -84,10 +84,10 @@ function Reviews(props) { reviews.map((review, index) => (
  • - + {review.username}:{" "} - {review.comment} + {review.comment} handleOpenModalReview(review, 'Edit')} /> handleOpenModalReview(review, 'Trash')} /> From b0ffbd088c5168909ddd78b43479df930b2e6be0 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:22:00 +0100 Subject: [PATCH 13/23] fix: Post review enabled no recipes no owner --- src/components/RecipeDetail.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index 733754c..f99b268 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -431,7 +431,7 @@ function RecipeDetail() { Reviews - + Date: Thu, 7 Dec 2023 14:28:14 +0100 Subject: [PATCH 14/23] fix: Fix bug enabled button --- src/components/Reviews.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index a7546da..7619ba9 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -64,7 +64,7 @@ function Reviews(props) { {isLogged === 'true' ? - {reviews && reviews.length > 0 && owner === currentUser ? (<> + {reviews && reviews.length > 0 && owner !== currentUser ? (<> From 2beea1fd51d352ef2b13ac13d3bdb7a5d4cf08e5 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 12 Dec 2023 13:42:47 +0100 Subject: [PATCH 15/23] feat: New style for reviews without images --- src/components/Reviews.jsx | 61 +++++++++++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index 7619ba9..40d3b1d 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -83,6 +83,7 @@ function Reviews(props) { {reviews && reviews.length > 0 ? ( reviews.map((review, index) => (
  • + {review.image ? {review.username}:{" "} @@ -152,7 +153,65 @@ function Reviews(props) { - + + : + + + {review.username}:{" "} + + {review.comment} + + + +
    +
    + {" "} + {Array(review.rating || 0) + .fill() + .map((_, index) => ( + + + + ))} +
    +
    + + +
    + + {currentUser === review.username && ( + <> + handleOpenModalReview(review, 'Edit')} + /> + handleOpenModalReview(review, 'Trash')} + /> + + )} +
    + +     + +     }
    • )) ) : ( owner !== currentUser ? From 9c4866d33a7616391d87a6ebbf0887cc1652530a Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 12 Dec 2023 14:13:01 +0100 Subject: [PATCH 16/23] feat: same design post review as page --- src/components/PostReview.jsx | 16 ++++++++-------- src/components/Reviews.jsx | 5 ++--- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/PostReview.jsx b/src/components/PostReview.jsx index bd7d92a..ef08265 100644 --- a/src/components/PostReview.jsx +++ b/src/components/PostReview.jsx @@ -103,12 +103,12 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { return (<> - - Post a review + + Post a review - +
    - + Review { /> - + Rating -
    {renderStars(difficulty)}
    +
    {renderStars(difficulty)}
     - + Select Image
    - + diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx index 40d3b1d..7bdd160 100644 --- a/src/components/Reviews.jsx +++ b/src/components/Reviews.jsx @@ -80,7 +80,7 @@ function Reviews(props) {
      - {reviews && reviews.length > 0 ? ( + {reviews && reviews.length > 0 ? ( reviews.map((review, index) => (
    • {review.image ? @@ -229,7 +229,6 @@ function Reviews(props) { /> ) :

      There are currently no reviews

      - {/*

      Be the first one to post a review and share your thoughts!

      */}

      You are the owner of the recipe you can't do reviews

      )} @@ -240,7 +239,7 @@ function Reviews(props) { show={showModalImage} onHide={handleCloseModalImage} recipeImage={selectedImage} - recipeName={selectedImage ? "Image" : null} // Puedes cambiar esto según tus necesidades + recipeName={selectedImage ? "Image" : null} /> {selectedReview && ( Date: Tue, 12 Dec 2023 14:40:24 +0100 Subject: [PATCH 17/23] feat: control no pass x characters --- src/components/PostReview.jsx | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/components/PostReview.jsx b/src/components/PostReview.jsx index ef08265..037a7f8 100644 --- a/src/components/PostReview.jsx +++ b/src/components/PostReview.jsx @@ -17,6 +17,8 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { const { token } = useAuth(); const [error, setError] = useState(null); const [showErrorModal, setShowErrorModal] = useState(false); + const [characterCount, setCharacterCount] = useState(0); + useEffect(() => { @@ -39,6 +41,12 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { setImage(selectedImage); }; + const handleReviewChange = (e) => { + const inputReview = e.target.value; + setReview(inputReview); + setCharacterCount(inputReview.length); + }; + const handlePostReview = async () => { const reviewData = { username: username, @@ -103,10 +111,10 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { return (<> - - Post a review + + Post a review - +
      Review @@ -115,8 +123,17 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { rows={3} placeholder="Write your review here" value={review} - onChange={(e) => setReview(e.target.value)} + onChange={handleReviewChange} + style={{ borderColor: characterCount > 80 ? 'red' : null }} /> + {characterCount > 80 && ( +
      You exceeded 80 characters.
      + )} +       + + + Rating +
      {renderStars(difficulty)}
       @@ -134,7 +151,12 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { - @@ -149,7 +171,7 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { - From 7a4f4d1c71474ba38771e618a30bf611d0fb9282 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Tue, 12 Dec 2023 14:43:50 +0100 Subject: [PATCH 18/23] feat: num of characters in real time --- src/components/PostReview.jsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/PostReview.jsx b/src/components/PostReview.jsx index 037a7f8..afba9a0 100644 --- a/src/components/PostReview.jsx +++ b/src/components/PostReview.jsx @@ -129,13 +129,8 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => { {characterCount > 80 && (
      You exceeded 80 characters.
      )} +
      Num characters: {characterCount}
       - - - Rating -
      {renderStars(difficulty)}
      -       - Rating
      {renderStars(difficulty)}
      From 238257956fd845e90a2d1e0a50c3bb3c80251d8f Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Wed, 13 Dec 2023 12:31:07 +0100 Subject: [PATCH 19/23] feat: New design to Modify Review and Delete Review --- src/components/ModifyReview.jsx | 45 ++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx index db5ba48..9ebbd7a 100644 --- a/src/components/ModifyReview.jsx +++ b/src/components/ModifyReview.jsx @@ -10,7 +10,8 @@ import { const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, reviewInfo }) => { const [newComment, setNewComment] = useState(reviewInfo.comment); const [newRating, setNewRating] = useState(reviewInfo.rating); - const [newImage, setNewImage] = useState(reviewInfo.file); // Para almacenar la nueva imagen + const [newImage, setNewImage] = useState(reviewInfo.file); + const [characterCount, setCharacterCount] = useState(0); const { token } = useAuth(); const handleUpdateReview = async () => { @@ -96,47 +97,51 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, return stars; }; + const handleReviewChange = (e) => { + const inputReview = e.target.value; + setNewComment(inputReview) + setCharacterCount(inputReview.length); + }; + const handleConfirmDelete = () => { handleDeleteReview(); }; return ( - - {funct === 'Edit' ? 'Modificar' : 'Eliminar'} revisión + + {funct === 'Edit' ? 'Modify' : 'Delete'} review - + {funct === 'Edit' ? ( - - New Comment + + New Review setNewComment(e.target.value)} + onChange={handleReviewChange} + style={{ borderColor: characterCount > 80 ? 'red' : null }} /> + {characterCount > 80 && ( +
      You exceeded 80 characters.
      + )} +
      Num characters: {characterCount}
       - + New Rating -
      {renderStars(newRating)}
      -       - - New Image - setNewImage(e.target.files[0])} - /> +
      {renderStars(newRating)}
       ) : ( -

      Are you sure delete review?

      +

      Are you sure delete review?

      )}       - + {funct === 'Edit' ? ( - ) : ( From aec44483c644e2e3dfad944fec948b0feb3c4fd0 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:37:14 +0100 Subject: [PATCH 20/23] feat: change style and design of different places --- src/components/ModifyReview.jsx | 8 ++++---- src/components/PostReview.jsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx index 9ebbd7a..8f70e33 100644 --- a/src/components/ModifyReview.jsx +++ b/src/components/ModifyReview.jsx @@ -109,10 +109,10 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, return ( - + {funct === 'Edit' ? 'Modify' : 'Delete'} review - + {funct === 'Edit' ? (
      @@ -132,14 +132,14 @@ const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, New Rating -
      {renderStars(newRating)}
      +
      {renderStars(newRating)}
      ) : (

      Are you sure delete review?

      )}       - + {funct === 'Edit' ? ( From ff9f90c3e4b0b80f016f5bf1115cbaf08e53e15c Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Wed, 13 Dec 2023 14:34:50 +0100 Subject: [PATCH 21/23] feat: Implement all about similar recipes DONE --- src/components/RecipeDetail.jsx | 41 +++++++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index f99b268..96d8974 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -2,8 +2,9 @@ import React, { useState, useEffect } from "react"; import { useAuth } from "./AuthContext"; import "../css/common.css"; import "../css/Transitions.css"; +import RecipeCard from "./RecipeCard"; import chefIcon from "../assets/icons/chef.png" -import { useParams, useNavigate } from "react-router-dom"; +import { useParams, useNavigate, Link } from "react-router-dom"; import defaultProfile from "../assets/defaultProfile.png"; import { CSSTransition } from "react-transition-group"; import gyozas from '../assets/gyozas.jpg'; @@ -40,8 +41,7 @@ function RecipeDetail() { const [userId, setUserId] = useState(''); const [userName, setUserName] = useState(''); const [userImage, setUserImage] = useState(''); - const [showModal, setShowModal] = useState(false); - const [user, setUser] = useState({}); + const [similarRecipes, setSimilarRecipes] = useState(''); const { id } = useParams(); const [recipe, setRecipe] = useState({ images: [] }); const [showReviews, setShowReviews] = useState(false); @@ -73,6 +73,7 @@ function RecipeDetail() { useEffect(() => { getRecipe(); + getSimilarRecipes(); if (isLogged()) { getIsLiked(username); } @@ -89,6 +90,17 @@ function RecipeDetail() { .catch((error) => console.error("Error al obtener receta:", error)); }; + const getSimilarRecipes = () => { + fetch(process.env.REACT_APP_API_URL + `/recipe/similar/${id}`) + .then((response) => response.json()) + .then((data) => { + setSimilarRecipes(data) + console.log(">> console.error("Error al obtener recetas similares:", error)); + }; + + const fetchUserData = async (userId) => { try { const response = await fetch(process.env.REACT_APP_API_URL + '/user/' + userId, { @@ -418,10 +430,31 @@ function RecipeDetail() { + + + + +

      Similar Recipes

      + + {similarRecipes.length > 0 ? similarRecipes?.map((recipe) => ( + + + + + + )): null} +       +       +       - {/* Offcanvas para mostrar los comentarios */} + + + setShowReviews(false)} From fcf08dc89a4ca83c70c7fed3f9e935527a0938e6 Mon Sep 17 00:00:00 2001 From: Ivan Mansilla Flores <72189801+ivanmansilla@users.noreply.github.com> Date: Thu, 14 Dec 2023 14:12:15 +0100 Subject: [PATCH 22/23] feat: Change design about similar recipes section --- src/components/RecipeDetail.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index 96d8974..9cf7b2f 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -431,13 +431,13 @@ function RecipeDetail() { - + -

      Similar Recipes

      +

      Similar Recipes

      {similarRecipes.length > 0 ? similarRecipes?.map((recipe) => ( - + Date: Thu, 14 Dec 2023 14:21:42 +0100 Subject: [PATCH 23/23] fix: Change size of Similars title --- src/components/RecipeDetail.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index 9cf7b2f..55b3151 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -434,7 +434,7 @@ function RecipeDetail() { -

      Similar Recipes

      +

      Similar Recipes

      {similarRecipes.length > 0 ? similarRecipes?.map((recipe) => (