Skip to content

Commit

Permalink
fixtures
Browse files Browse the repository at this point in the history 
Signed-off-by: Arya Pratap Singh <[email protected]>
  • Loading branch information
@ARYPROGRAMMER
ARYPROGRAMMER committed Jan 30, 2025
1 parent 7db9ef5 commit 00bfb3d
Showing 1 changed file with 60 additions and 43 deletions.
103 changes: 60 additions & 43 deletions frontend/src/pages/Feedback.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,79 +5,86 @@ import { useNavigate } from 'react-router-dom';

const Feedback = () => {
useDocTitle('Feedback - TelMedSphere');

const [formData, setFormData] = useState({
type: '',
rating: 0,
comments: '',
email: localStorage.getItem('email')
email: localStorage.getItem('email') || ''
});

const [submitStatus, setSubmitStatus] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const navigate = useNavigate();
const [error, setError] = useState('');
const navigate = useNavigate();

const isLoggedIn = localStorage.getItem('username') &&
localStorage.getItem('username') !== 'undefined';
const isLoggedIn = localStorage.getItem('username') && localStorage.getItem('username') !== 'undefined';

const handleClose = () => {
setIsModalOpen(false);
navigate('/');
};

const handleSubmit = async (e) => {
e.preventDefault();

if (!isLoggedIn) {
setError('Please login to submit feedback');
return;
}

const feedbackData = {
feedbackid: Date.now().toString(),
type: formData.type,
rating: formData.rating,
comments: formData.comments,
email: formData.email,
timestamp: new Date().toISOString(),
username: localStorage.getItem('username')
};

try {
const response = await httpClient.post('/feedback', {
...formData,
timestamp: new Date(),
username: localStorage.getItem('username')
const response = await fetch('https://telmedsphere-server.vercel.app/feedback', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(feedbackData)
});

if (response.status === 200) {
setSubmitStatus('success');
setFormData({ type: '', rating: 0, comments: '', email: localStorage.getItem('email') });
setIsModalOpen(true);
if (!response.ok) {
throw new Error('Failed to submit feedback');
}
} catch (err) {

setSubmitStatus('success');
setFormData({ type: '', rating: 0, comments: '', email: localStorage.getItem('email') });
setIsModalOpen(true);
} catch (error) {
console.error('Error submitting feedback:', error);
setSubmitStatus('error');
setError('Failed to submit feedback. Please try again.');
}
};


const ratingChanged = (newRating) => {
setFormData({ ...formData, rating: newRating });
};

if (!isLoggedIn) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="bg-white p-8 rounded-xl shadow-lg max-w-md mx-4 text-center">
<h2 className="text-2xl font-bold mb-4 text-red-600">Access Denied</h2>
<p className="mb-6 text-gray-600">Please login to submit feedback.</p>
<button
className="bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300"
onClick={() => navigate('/')}
>
Go to Home
</button>
</div>
</div>
);
navigate('/');
return null; // Prevent rendering anything
}



return (
<section className="py-8 md:py-12 bg-gray-50">
<div className="container mx-auto px-4 max-w-6xl">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div className="order-2 md:order-1">
<h1 className="text-3xl md:text-4xl font-bold mb-4 ">Share Your Feedback</h1>
<h2 className="text-lg md:text-xl mb-6 text-gray-600">Your feedback matters to us, Help us improve our services!</h2>
<h1 className="text-3xl md:text-4xl font-bold mb-4">Share Your Feedback</h1>
<h2 className="text-lg md:text-xl mb-6 text-gray-600">
Your feedback matters to us! Help us improve our services.
</h2>
<img
src="https://i.pinimg.com/474x/95/6f/29/956f29bdd6ece3f6e2f7f476f65ef994.jpg"
alt="Feedback"
Expand All @@ -94,7 +101,7 @@ const Feedback = () => {
value={formData.type}
onChange={(e) => setFormData({ ...formData, type: e.target.value })}
required
className="w-full border border-gray-300 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full border border-gray-300 text-black-1 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select...</option>
<option value="Services">Services</option>
Expand All @@ -116,38 +123,48 @@ const Feedback = () => {
</div>

<div className="mb-6">
<label htmlFor="comments" className="block text-gray-700 font-semibold mb-2">Comments</label>
<label htmlFor="comments" className="block text-black-1 font-semibold mb-2">Comments</label>
<textarea
id="comments"
value={formData.comments}
onChange={(e) => setFormData({ ...formData, comments: e.target.value })}
rows="4"
required
className="w-full border border-gray-300 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full border border-gray-300 text-black-1 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Share your thoughts..."
/>
</div>

<button
type="submit"
className="w-full text-white-1 bg-[rgb(123,116,215)] text-white font-bold py-3 px-6 rounded-lg hover:bg-[rgb(94, 88, 184)] transition-colors duration-300">
Submit Feedback
type="submit"
className="w-full text-white-1 bg-[rgb(123,116,215)] text-white font-bold py-3 px-6 rounded-lg hover:bg-[rgb(94,88,184)] transition-colors duration-300"
>
Submit Feedback
</button>

{submitStatus === 'error' && (
<div className="mt-4 text-red-600">Failed to submit feedback. Please try again.</div>
<div className="mt-4 text-red-600">{error}</div>
)}
</form>
</div>
</div>

{isModalOpen && (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
<div className="bg-white-1 p-8 rounded-xl shadow-lg max-w-md mx-4">
<h2 className="text-2xl font-bold mb-4 text-blue-600">Thank You!</h2>
<p className="mb-6 text-gray-600">Your feedback has been successfully submitted.</p>
<div className="bg-blue-7 p-8 rounded-[3px] shadow-lg max-w-md mx-4 relative">
<div
className="bg-[rgba(176,187,216,0.5)] text-white-1 absolute top-0 right-0 w-[30px] h-[30px] text-[1.8rem] leading-[30px] text-center cursor-pointer overflow-hidden opacity-80 transition-opacity duration-200 hover:opacity-100"
title="Close"
onClick={handleClose}
>
&times;
</div>
<h2 className="text-2xl font-bold mb-4 text-blue-1">Thank You!</h2>
<p className="mb-6 text-white-1 text-opacity-50">
Your feedback has been successfully submitted.
</p>
<button
className="w-full bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300"
className="w-full bg-gray-400 hover:bg-blue-6 text-blue-1 py-[0.8rem] px-6 rounded-[3px] transition-colors duration-200 ease-out"
onClick={handleClose}
>
Close
Expand Down

0 comments on commit 00bfb3d

Please sign in to comment.