| |
| |
| |
| |
| |
|
|
|
|
| import React, { useState } from 'react';
|
| import { useLocation } from 'react-router-dom';
|
| import { Bug, X, Send, Loader2, CheckCircle } from 'lucide-react';
|
| import { getToken, getStoredUser } from '../../services/api';
|
| import './BugReportButton.css';
|
|
|
| const API_BASE = import.meta.env.VITE_API_URL || '';
|
|
|
| function BugReportButton() {
|
| const location = useLocation();
|
| const [isOpen, setIsOpen] = useState(false);
|
| const [submitting, setSubmitting] = useState(false);
|
| const [submitted, setSubmitted] = useState(false);
|
| const [error, setError] = useState(null);
|
|
|
| const [formData, setFormData] = useState({
|
| title: '',
|
| description: '',
|
| category: 'general',
|
| severity: 'medium'
|
| });
|
|
|
|
|
| const shouldShowButton = () => {
|
| const path = location.pathname;
|
| const user = getStoredUser();
|
|
|
|
|
| if (path.startsWith('/admin')) return false;
|
|
|
|
|
| if (path.startsWith('/interview/') && path.includes('/live')) return false;
|
| if (path.startsWith('/live-interview')) return false;
|
|
|
|
|
| if (!user && (path === '/' || path === '/login' || path === '/signup')) return false;
|
|
|
|
|
| return true;
|
| };
|
|
|
|
|
| if (!shouldShowButton()) {
|
| return null;
|
| }
|
|
|
| const handleSubmit = async (e) => {
|
| e.preventDefault();
|
| setSubmitting(true);
|
| setError(null);
|
|
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/public/bug-report`, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({
|
| ...formData,
|
| page_url: window.location.href,
|
| browser_info: navigator.userAgent
|
| })
|
| });
|
|
|
| if (!response.ok) {
|
| throw new Error('Failed to submit bug report');
|
| }
|
|
|
| setSubmitted(true);
|
| setFormData({
|
| title: '',
|
| description: '',
|
| category: 'general',
|
| severity: 'medium'
|
| });
|
|
|
|
|
| setTimeout(() => {
|
| setSubmitted(false);
|
| setIsOpen(false);
|
| }, 3000);
|
| } catch (err) {
|
| setError(err.message);
|
| } finally {
|
| setSubmitting(false);
|
| }
|
| };
|
|
|
| const handleChange = (e) => {
|
| setFormData(prev => ({
|
| ...prev,
|
| [e.target.name]: e.target.value
|
| }));
|
| };
|
|
|
| return (
|
| <>
|
| {/* Floating Button */}
|
| <button
|
| className="bug-report-float-btn"
|
| onClick={() => setIsOpen(true)}
|
| title="Report a Bug"
|
| >
|
| <Bug size={24} />
|
| </button>
|
|
|
| {/* Modal */}
|
| {isOpen && (
|
| <div className="bug-report-overlay" onClick={() => setIsOpen(false)}>
|
| <div className="bug-report-modal" onClick={e => e.stopPropagation()}>
|
| <div className="bug-report-header">
|
| <h3><Bug size={20} /> Report a Bug</h3>
|
| <button className="close-btn" onClick={() => setIsOpen(false)}>
|
| <X size={20} />
|
| </button>
|
| </div>
|
|
|
| {submitted ? (
|
| <div className="bug-report-success">
|
| <CheckCircle size={48} />
|
| <h4>Thank you!</h4>
|
| <p>Your bug report has been submitted successfully.</p>
|
| </div>
|
| ) : (
|
| <form onSubmit={handleSubmit} className="bug-report-form">
|
| <div className="form-group">
|
| <label htmlFor="title">Title *</label>
|
| <input
|
| type="text"
|
| id="title"
|
| name="title"
|
| value={formData.title}
|
| onChange={handleChange}
|
| placeholder="Brief description of the issue"
|
| required
|
| />
|
| </div>
|
|
|
| <div className="form-row">
|
| <div className="form-group">
|
| <label htmlFor="category">Category</label>
|
| <select
|
| id="category"
|
| name="category"
|
| value={formData.category}
|
| onChange={handleChange}
|
| >
|
| <option value="general">General</option>
|
| <option value="ui">User Interface</option>
|
| <option value="interview">Interview</option>
|
| <option value="resume">Resume</option>
|
| <option value="auth">Authentication</option>
|
| <option value="performance">Performance</option>
|
| <option value="other">Other</option>
|
| </select>
|
| </div>
|
|
|
| <div className="form-group">
|
| <label htmlFor="severity">Severity</label>
|
| <select
|
| id="severity"
|
| name="severity"
|
| value={formData.severity}
|
| onChange={handleChange}
|
| >
|
| <option value="low">Low</option>
|
| <option value="medium">Medium</option>
|
| <option value="high">High</option>
|
| <option value="critical">Critical</option>
|
| </select>
|
| </div>
|
| </div>
|
|
|
| <div className="form-group">
|
| <label htmlFor="description">Description *</label>
|
| <textarea
|
| id="description"
|
| name="description"
|
| value={formData.description}
|
| onChange={handleChange}
|
| placeholder="Please describe the issue in detail. Include steps to reproduce if possible."
|
| rows={5}
|
| required
|
| />
|
| </div>
|
|
|
| {error && (
|
| <div className="bug-report-error">
|
| {error}
|
| </div>
|
| )}
|
|
|
| <div className="form-actions">
|
| <button
|
| type="button"
|
| className="cancel-btn"
|
| onClick={() => setIsOpen(false)}
|
| >
|
| Cancel
|
| </button>
|
| <button
|
| type="submit"
|
| className="submit-btn"
|
| disabled={submitting}
|
| >
|
| {submitting ? (
|
| <>
|
| <Loader2 size={16} className="spinning" />
|
| Submitting...
|
| </>
|
| ) : (
|
| <>
|
| <Send size={16} />
|
| Submit Report
|
| </>
|
| )}
|
| </button>
|
| </div>
|
| </form>
|
| )}
|
| </div>
|
| </div>
|
| )}
|
| </>
|
| );
|
| }
|
|
|
| export default BugReportButton;
|
|
|
