dev1/src/components/ResumeRewrite.js
2025-05-08 17:23:19 +00:00

141 lines
4.3 KiB
JavaScript

import React, { useState } from 'react';
import axios from 'axios';
// If you still want file-saver + docx, import them here
function ResumeRewrite() {
const [resumeFile, setResumeFile] = useState(null);
const [jobTitle, setJobTitle] = useState('');
const [jobDescription, setJobDescription] = useState('');
const [optimizedResume, setOptimizedResume] = useState('');
const [error, setError] = useState('');
const handleFileChange = (e) => {
setResumeFile(e.target.files[0]);
};
const handleSubmit = async (e) => {
e.preventDefault();
if (!resumeFile || !jobTitle.trim() || !jobDescription.trim()) {
setError('Please fill in all fields.');
return;
}
try {
const token = localStorage.getItem('token');
const formData = new FormData();
formData.append('resumeFile', resumeFile);
formData.append('jobTitle', jobTitle);
formData.append('jobDescription', jobDescription);
const res = await axios.post('/api/premium/resume/optimize', formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${token}`,
},
});
setOptimizedResume(res.data.optimizedResume || '');
setError('');
} catch (err) {
console.error('Resume optimization error:', err);
setError(err.response?.data?.error || 'Failed to optimize resume.');
}
};
// Optional: Download as docx
// const handleDownloadDocx = () => { ... }
return (
<div className="max-w-4xl mx-auto mt-8 p-6 bg-white rounded shadow">
<h2 className="text-2xl font-bold mb-4">Resume Optimizer</h2>
<form onSubmit={handleSubmit} className="space-y-6">
{/* File Upload */}
<div>
<label className="block font-medium text-gray-700 mb-1">
Upload Resume (PDF or DOCX):
</label>
<input
type="file"
accept=".pdf,.docx"
onChange={handleFileChange}
className="file:mr-4 file:py-2 file:px-4
file:border-0 file:text-sm file:font-semibold
file:bg-blue-50 file:text-blue-700
hover:file:bg-blue-100
cursor-pointer
text-gray-600"
/>
</div>
{/* Job Title */}
<div>
<label className="block font-medium text-gray-700 mb-1">
Job Title:
</label>
<input
type="text"
value={jobTitle}
onChange={(e) => setJobTitle(e.target.value)}
className="w-full border rounded px-3 py-2 focus:outline-none
focus:ring focus:ring-blue-200"
placeholder="e.g., Software Engineer"
/>
</div>
{/* Job Description */}
<div>
<label className="block font-medium text-gray-700 mb-1">
Job Description:
</label>
<textarea
value={jobDescription}
onChange={(e) => setJobDescription(e.target.value)}
rows={4}
className="w-full border rounded px-3 py-2 focus:outline-none
focus:ring focus:ring-blue-200"
placeholder="Paste the job listing or requirements here..."
/>
</div>
{error && (
<p className="text-red-600 font-semibold">
{error}
</p>
)}
<button
type="submit"
className="inline-block bg-blue-600 text-white font-semibold
px-5 py-2 rounded hover:bg-blue-700
transition-colors"
>
Optimize Resume
</button>
</form>
{/* Optimized Resume Display */}
{optimizedResume && (
<div className="mt-8">
<h3 className="text-xl font-bold mb-2">Optimized Resume</h3>
<pre className="whitespace-pre-wrap bg-gray-50 p-4 rounded border">
{optimizedResume}
</pre>
{/*
Optional Download Button
<button
onClick={handleDownloadDocx}
className="mt-2 inline-block bg-green-600 text-white font-semibold
px-4 py-2 rounded hover:bg-green-700 transition-colors"
>
Download as DOCX
</button>
*/}
</div>
)}
</div>
);
}
export default ResumeRewrite;