Spaces:
Sleeping
Sleeping
File size: 3,308 Bytes
ac717a9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | import React, { useState } from 'react';
import Setup from './components/Setup';
import Interview from './components/Interview';
import Report from './components/Report';
import { startInterview, submitAnswer, getReport } from './utils/api';
export default function App() {
const [phase, setPhase] = useState('setup'); // setup | interview | report
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [sessionId, setSessionId] = useState(null);
const [currentQuestion, setCurrentQuestion] = useState(null);
const [progress, setProgress] = useState({ answered: 0, total: 0 });
const [lastEval, setLastEval] = useState(null);
const [reportData, setReportData] = useState(null);
const handleStart = async ({ role, difficulty, interviewType, questionCount }) => {
setLoading(true);
setError('');
try {
const data = await startInterview(role, difficulty, interviewType, questionCount);
setSessionId(data.sessionId);
setCurrentQuestion(data.currentQuestion);
setProgress({ answered: 0, total: data.totalQuestions });
setLastEval(null);
setPhase('interview');
} catch (err) {
setError(err.message);
}
setLoading(false);
};
const handleAnswer = async (answer) => {
setLoading(true);
setError('');
try {
const data = await submitAnswer(sessionId, answer);
setLastEval(data.evaluation);
setProgress(data.progress);
if (data.isComplete) {
// Small delay to show last evaluation before report
setTimeout(async () => {
try {
const report = await getReport(sessionId);
setReportData(report);
setPhase('report');
} catch (err) {
setError(err.message);
}
setLoading(false);
}, 3000);
} else {
setCurrentQuestion(data.nextQuestion);
setLoading(false);
}
} catch (err) {
setError(err.message);
setLoading(false);
}
};
const handleReset = () => {
setPhase('setup');
setSessionId(null);
setCurrentQuestion(null);
setLastEval(null);
setReportData(null);
setError('');
};
return (
<div className="app">
<header className="header">
<h1>AI Interview Coach</h1>
<p>Practice interviews. Get real feedback. Land the job.</p>
</header>
{error && (
<div style={{ background: 'rgba(225,112,85,0.1)', padding: '1rem', borderRadius: '10px', marginBottom: '1rem', textAlign: 'center', color: 'var(--danger)' }}>
{error}
</div>
)}
{phase === 'setup' && <Setup onStart={handleStart} loading={loading} />}
{phase === 'interview' && currentQuestion && (
<Interview
question={currentQuestion}
progress={progress}
onSubmit={handleAnswer}
evaluation={lastEval}
loading={loading}
/>
)}
{phase === 'interview' && loading && !currentQuestion && (
<div className="loading">
<div className="spinner" />
<p>Generating your final report...</p>
</div>
)}
{phase === 'report' && reportData && (
<Report data={reportData} onReset={handleReset} />
)}
</div>
);
}
|