messages and reviews

2025-07-17 00:16:01 -04:00
parent aa3adc58ca
commit 1dbe821e70
21 changed files with 1981 additions and 102 deletions
--- a/frontend/src/components/ReviewModal.tsx
+++ b/frontend/src/components/ReviewModal.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { rentalAPI } from '../services/api';
+import { Rental } from '../types';
+
+interface ReviewModalProps {
+  show: boolean;
+  onClose: () => void;
+  rental: Rental;
+  onSuccess: () => void;
+}
+
+const ReviewModal: React.FC<ReviewModalProps> = ({ show, onClose, rental, onSuccess }) => {
+  const [rating, setRating] = useState(5);
+  const [review, setReview] = 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 {
+      await rentalAPI.addReview(rental.id, {
+        rating,
+        review
+      });
+
+      // Reset form
+      setRating(5);
+      setReview('');
+      onSuccess();
+      onClose();
+    } 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 Your Rental</h5>
+            <button type="button" className="btn-close" onClick={onClose}></button>
+          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              {rental.item && (
+                <div className="mb-4 text-center">
+                  <h6>{rental.item.name}</h6>
+                  <small className="text-muted">
+                    Rented from {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">Your Review</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">
+                  Tell others about the item condition, owner communication, and overall experience
+                </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 ReviewModal;