Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reviews and review history

Browse Source
This commit is contained in:
jackiettran
2025-08-25 16:12:30 -04:00
parent 5d85f77a19
commit 601e11b7e8
7 changed files with 864 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
frontend/src/components/ReviewModal.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { rentalAPI } from '../services/api';
import { Rental } from '../types';
import React, { useState } from "react";
import { rentalAPI } from "../services/api";
import { Rental } from "../types";
import SuccessModal from "./SuccessModal";
interface ReviewItemModalProps {
show: boolean;
@@ -9,12 +10,19 @@ interface ReviewItemModalProps {
onSuccess: () => void;
}
const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental, onSuccess }) => {
const ReviewItemModal: React.FC<ReviewItemModalProps> = ({
show,
onClose,
rental,
onSuccess,
}) => {
const [rating, setRating] = useState(5);
const [review, setReview] = useState('');
const [privateMessage, setPrivateMessage] = useState('');
const [review, setReview] = useState("");
const [privateMessage, setPrivateMessage] = useState("");
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [showSuccessModal, setShowSuccessModal] = useState(false);
const [successMessage, setSuccessMessage] = useState("");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
@@ -25,24 +33,23 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
const response = await rentalAPI.reviewItem(rental.id, {
rating,
review,
privateMessage
privateMessage,
});
// Reset form
setRating(5);
setReview('');
setPrivateMessage('');
onSuccess();
onClose();
// Show success message based on review visibility
setReview("");
setPrivateMessage("");
// Show success modal with appropriate message
if (response.data.reviewVisible) {
alert('Review published successfully!');
setSuccessMessage("Review published successfully!");
} else {
alert('Review submitted! It will be published when both parties have reviewed or after 10 minutes.');
setSuccessMessage("Review submitted! It will be published when both parties have reviewed or after 10 minutes.");
}
setShowSuccessModal(true);
} catch (err: any) {
setError(err.response?.data?.error || 'Failed to submit review');
setError(err.response?.data?.error || "Failed to submit review");
} finally {
setSubmitting(false);
}
@@ -52,23 +59,63 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
setRating(value);
};
const handleSuccessModalClose = () => {
setShowSuccessModal(false);
onSuccess();
onClose();
};
if (!show) return null;
return (
<div className="modal d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div
className="modal d-block"
tabIndex={-1}
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Review Item</h5>
<button type="button" className="btn-close" onClick={onClose}></button>
<button
type="button"
className="btn-close"
onClick={onClose}
></button>
</div>
<form onSubmit={handleSubmit}>
<div className="modal-body">
{rental.item && (
{rental.owner && rental.item && (
<div className="mb-4 text-center">
<h6>{rental.item.name}</h6>
<div className="d-flex justify-content-center mb-3">
{rental.owner.profileImage ? (
<img
src={rental.owner.profileImage}
alt={`${rental.owner.firstName} ${rental.owner.lastName}`}
className="rounded-circle"
style={{
width: "60px",
height: "60px",
objectFit: "cover",
}}
/>
) : (
<div
className="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold"
style={{ width: "60px", height: "60px" }}
>
{rental.owner.firstName[0]}
{rental.owner.lastName[0]}
</div>
)}
</div>
<h6 className="mb-1">
{rental.owner.firstName} {rental.owner.lastName}
</h6>
<p className="mb-1 text-muted small">{rental.item.name}</p>
<small className="text-muted">
Rented from {new Date(rental.startDate).toLocaleDateString()} to {new Date(rental.endDate).toLocaleDateString()}
{new Date(rental.startDate).toLocaleDateString()} to{" "}
{new Date(rental.endDate).toLocaleDateString()}
</small>
</div>
)}
@@ -78,55 +125,33 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
{error}
</div>
)}
<div className="mb-3">
<label className="form-label">Rating</label>
<div className="d-flex justify-content-center gap-1" style={{ fontSize: '2rem' }}>
<div
className="d-flex justify-content-center gap-1"
style={{ fontSize: "2rem" }}
>
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
type="button"
className="btn btn-link p-0 text-decoration-none"
onClick={() => handleStarClick(star)}
style={{ color: star <= rating ? '#ffc107' : '#dee2e6' }}
style={{ color: star <= rating ? "#ffc107" : "#dee2e6" }}
>
<i className={`bi ${star <= rating ? 'bi-star-fill' : 'bi-star'}`}></i>
<i
className={`bi ${
star <= rating ? "bi-star-fill" : "bi-star"
}`}
></i>
</button>
))}
</div>
<div className="text-center mt-2">
<small className="text-muted">
{rating === 1 && 'Poor'}
{rating === 2 && 'Fair'}
{rating === 3 && 'Good'}
{rating === 4 && 'Very Good'}
{rating === 5 && 'Excellent'}
</small>
</div>
</div>
<div className="mb-3">
<label htmlFor="review" className="form-label">
Public Review <span className="text-danger">*</span>
</label>
<textarea
className="form-control"
id="review"
rows={4}
value={review}
onChange={(e) => setReview(e.target.value)}
placeholder="Share your experience with this rental..."
required
disabled={submitting}
></textarea>
<small className="text-muted">
This will be visible to everyone. Tell others about the item condition, owner communication, and overall experience.
</small>
</div>
<div className="mb-3">
<label htmlFor="privateMessage" className="form-label">
Private Message to Owner <span className="text-muted">(Optional)</span>
Private Message to Owner{" "}
</label>
<textarea
className="form-control"
@@ -134,43 +159,66 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
rows={3}
value={privateMessage}
onChange={(e) => setPrivateMessage(e.target.value)}
placeholder="Send a private message to the owner (only they will see this)..."
placeholder=""
disabled={submitting}
></textarea>
</div>
<div className="mb-3">
<label htmlFor="review" className="form-label">
Public Review
</label>
<textarea
className="form-control"
id="review"
rows={4}
value={review}
onChange={(e) => setReview(e.target.value)}
placeholder=""
disabled={submitting}
></textarea>
<small className="text-muted">
This message will only be visible to the owner. Use this for specific feedback or suggestions.
</small>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
<button
type="button"
className="btn btn-secondary"
onClick={onClose}
disabled={submitting}
>
Cancel
</button>
<button
type="submit"
<button
type="submit"
className="btn btn-primary"
disabled={submitting || !review.trim()}
>
{submitting ? (
<>
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span
className="spinner-border spinner-border-sm me-2"
role="status"
aria-hidden="true"
></span>
Submitting...
</>
) : (
'Submit Review'
"Submit Review"
)}
</button>
</div>
</form>
</div>
</div>
<SuccessModal
show={showSuccessModal}
onClose={handleSuccessModalClose}
title="Thank you for your review!"
message={successMessage}
/>
</div>
);
};
export default ReviewItemModal;
export default ReviewItemModal;