restructuring for rental requests. started double blind reviews
This commit is contained in:
jackiettran
176
frontend/src/components/ReviewRenterModal.tsx
Normal file
176
frontend/src/components/ReviewRenterModal.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React, { useState } from 'react';
|
||||
import { rentalAPI } from '../services/api';
|
||||
import { Rental } from '../types';
|
||||
|
||||
interface ReviewRenterModalProps {
|
||||
show: boolean;
|
||||
onClose: () => void;
|
||||
rental: Rental;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, rental, onSuccess }) => {
|
||||
const [rating, setRating] = useState(5);
|
||||
const [review, setReview] = useState('');
|
||||
const [privateMessage, setPrivateMessage] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const response = await rentalAPI.reviewRenter(rental.id, {
|
||||
rating,
|
||||
review,
|
||||
privateMessage
|
||||
});
|
||||
|
||||
// Reset form
|
||||
setRating(5);
|
||||
setReview('');
|
||||
setPrivateMessage('');
|
||||
onSuccess();
|
||||
onClose();
|
||||
|
||||
// Show success message based on review visibility
|
||||
if (response.data.reviewVisible) {
|
||||
alert('Review published successfully!');
|
||||
} else {
|
||||
alert('Review submitted! It will be published when both parties have reviewed or after 10 minutes.');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.error || 'Failed to submit review');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStarClick = (value: number) => {
|
||||
setRating(value);
|
||||
};
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<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 Renter</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="modal-body">
|
||||
{rental.renter && (
|
||||
<div className="mb-4 text-center">
|
||||
<h6>{rental.renter.firstName} {rental.renter.lastName}</h6>
|
||||
<small className="text-muted">
|
||||
Rental period: {new Date(rental.startDate).toLocaleDateString()} to {new Date(rental.endDate).toLocaleDateString()}
|
||||
</small>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Rating</label>
|
||||
<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' }}
|
||||
>
|
||||
<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 renter..."
|
||||
required
|
||||
disabled={submitting}
|
||||
></textarea>
|
||||
<small className="text-muted">
|
||||
This will be visible to everyone. Consider communication, condition of returned item, timeliness, and overall experience.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="privateMessage" className="form-label">
|
||||
Private Message to Renter <span className="text-muted">(Optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="privateMessage"
|
||||
rows={3}
|
||||
value={privateMessage}
|
||||
onChange={(e) => setPrivateMessage(e.target.value)}
|
||||
placeholder="Send a private message to the renter (only they will see this)..."
|
||||
disabled={submitting}
|
||||
></textarea>
|
||||
<small className="text-muted">
|
||||
This message will only be visible to the renter. Use this for specific feedback or suggestions.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<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>
|
||||
Submitting...
|
||||
</>
|
||||
) : (
|
||||
'Submit Review'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewRenterModal;
|
||||
Reference in New Issue
Block a user