Commit
·
683938d
1
Parent(s):
cfcc195
tuning the frontend
Browse files- frontend/src/App.jsx +131 -8
frontend/src/App.jsx
CHANGED
@@ -1,3 +1,125 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
import React, { useState, useEffect } from 'react';
|
2 |
import Header from './components/Header';
|
3 |
import JobForm from './components/JobForm';
|
@@ -70,10 +192,16 @@ function App() {
|
|
70 |
|
71 |
<main className="container mx-auto p-4 md:p-8">
|
72 |
<div className="max-w-4xl mx-auto">
|
73 |
-
<p className="text-lg text-gray-400 mb-
|
74 |
Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
|
75 |
</p>
|
76 |
|
|
|
|
|
|
|
|
|
|
|
|
|
77 |
<JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
|
78 |
|
79 |
{error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
|
@@ -94,7 +222,7 @@ function App() {
|
|
94 |
We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
|
95 |
This usually means the stock symbol is incorrect or not listed.
|
96 |
</p>
|
97 |
-
<p className="text-xs text-gray-500 mt-4">Please double-check the ticker
|
98 |
|
99 |
<details className="mt-6 text-left w-full max-w-lg mx-auto">
|
100 |
<summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
|
@@ -110,9 +238,4 @@ function App() {
|
|
110 |
);
|
111 |
}
|
112 |
|
113 |
-
export default App;
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
|
|
|
1 |
+
// import React, { useState, useEffect } from 'react';
|
2 |
+
// import Header from './components/Header';
|
3 |
+
// import JobForm from './components/JobForm';
|
4 |
+
// import JobStatusCard from './components/JobStatusCard';
|
5 |
+
// import ResultsDisplay from './components/ResultsDisplay';
|
6 |
+
// import LoadingSkeleton from './components/LoadingSkeleton';
|
7 |
+
// import HistoryPanel from './components/HistoryPanel';
|
8 |
+
// import { createJob, getJob } from './services/api';
|
9 |
+
// import { XCircle } from 'lucide-react';
|
10 |
+
|
11 |
+
// function App() {
|
12 |
+
// const [job, setJob] = useState(null);
|
13 |
+
// const [isLoading, setIsLoading] = useState(false);
|
14 |
+
// const [isPolling, setIsPolling] = useState(false);
|
15 |
+
// const [error, setError] = useState(null);
|
16 |
+
|
17 |
+
// const handleAnalysisRequest = async (ticker) => {
|
18 |
+
// setIsLoading(true);
|
19 |
+
// setIsPolling(true);
|
20 |
+
// setError(null);
|
21 |
+
// setJob(null);
|
22 |
+
// try {
|
23 |
+
// const response = await createJob(ticker);
|
24 |
+
// setJob(response.data);
|
25 |
+
// } catch (err) {
|
26 |
+
// setError('Failed to create job. Please check the API server and try again.');
|
27 |
+
// setIsLoading(false);
|
28 |
+
// setIsPolling(false);
|
29 |
+
// }
|
30 |
+
// };
|
31 |
+
|
32 |
+
// const handleSelectHistoryJob = (historyJob) => {
|
33 |
+
// setIsLoading(false);
|
34 |
+
// setIsPolling(false);
|
35 |
+
// setError(null);
|
36 |
+
// setJob(historyJob);
|
37 |
+
// }
|
38 |
+
|
39 |
+
// useEffect(() => {
|
40 |
+
// if (!job?.id || !isPolling) return;
|
41 |
+
|
42 |
+
// if (job.status !== 'PENDING') {
|
43 |
+
// setIsLoading(false);
|
44 |
+
// }
|
45 |
+
|
46 |
+
// const intervalId = setInterval(async () => {
|
47 |
+
// try {
|
48 |
+
// const response = await getJob(job.id);
|
49 |
+
// const updatedJob = response.data;
|
50 |
+
// setJob(updatedJob);
|
51 |
+
|
52 |
+
// if (updatedJob.status === 'SUCCESS' || updatedJob.status === 'FAILED') {
|
53 |
+
// clearInterval(intervalId);
|
54 |
+
// setIsPolling(false);
|
55 |
+
// }
|
56 |
+
// } catch (err) {
|
57 |
+
// setError('Failed to poll job status.');
|
58 |
+
// clearInterval(intervalId);
|
59 |
+
// setIsPolling(false);
|
60 |
+
// }
|
61 |
+
// }, 3000);
|
62 |
+
|
63 |
+
// return () => clearInterval(intervalId);
|
64 |
+
// }, [job, isPolling]);
|
65 |
+
|
66 |
+
// return (
|
67 |
+
// <div className="min-h-screen bg-gray-900 text-white font-sans">
|
68 |
+
// <Header />
|
69 |
+
// <HistoryPanel onSelectJob={handleSelectHistoryJob} />
|
70 |
+
|
71 |
+
// <main className="container mx-auto p-4 md:p-8">
|
72 |
+
// <div className="max-w-4xl mx-auto">
|
73 |
+
// <p className="text-lg text-gray-400 mb-8 text-center">
|
74 |
+
// Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
|
75 |
+
// </p>
|
76 |
+
|
77 |
+
// <JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
|
78 |
+
|
79 |
+
// {error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
|
80 |
+
|
81 |
+
// {isLoading && !job && <LoadingSkeleton />}
|
82 |
+
|
83 |
+
// {job && !isLoading && <JobStatusCard job={job} />}
|
84 |
+
|
85 |
+
// {job?.status === 'SUCCESS' && job.result && (
|
86 |
+
// <ResultsDisplay result={job.result} />
|
87 |
+
// )}
|
88 |
+
|
89 |
+
// {job?.status === 'FAILED' && job.result?.error && (
|
90 |
+
// <div className="mt-8 p-6 bg-gray-800/30 border border-red-500/30 rounded-lg text-center animate-fade-in">
|
91 |
+
// <XCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
|
92 |
+
// <h2 className="text-2xl font-bold text-red-300 mb-2">Analysis Failed</h2>
|
93 |
+
// <p className="text-gray-400 max-w-lg mx-auto">
|
94 |
+
// We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
|
95 |
+
// This usually means the stock symbol is incorrect or not listed.
|
96 |
+
// </p>
|
97 |
+
// <p className="text-xs text-gray-500 mt-4">Please double-check the ticker (e.g., RELIANCE.NS) and try again.</p>
|
98 |
+
|
99 |
+
// <details className="mt-6 text-left w-full max-w-lg mx-auto">
|
100 |
+
// <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
|
101 |
+
// <pre className="mt-2 bg-gray-900 p-4 rounded-md text-gray-400 text-xs whitespace-pre-wrap font-mono">
|
102 |
+
// {job.result.error}
|
103 |
+
// </pre>
|
104 |
+
// </details>
|
105 |
+
// </div>
|
106 |
+
// )}
|
107 |
+
// </div>
|
108 |
+
// </main>
|
109 |
+
// </div>
|
110 |
+
// );
|
111 |
+
// }
|
112 |
+
|
113 |
+
// export default App;
|
114 |
+
|
115 |
+
|
116 |
+
|
117 |
+
|
118 |
+
|
119 |
+
|
120 |
+
|
121 |
+
|
122 |
+
|
123 |
import React, { useState, useEffect } from 'react';
|
124 |
import Header from './components/Header';
|
125 |
import JobForm from './components/JobForm';
|
|
|
192 |
|
193 |
<main className="container mx-auto p-4 md:p-8">
|
194 |
<div className="max-w-4xl mx-auto">
|
195 |
+
<p className="text-lg text-gray-400 mb-4 text-center">
|
196 |
Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
|
197 |
</p>
|
198 |
|
199 |
+
{/* --- NEW, SIMPLE TEXT EXAMPLE LINE --- */}
|
200 |
+
<p className="text-sm text-gray-500 text-center mb-8">
|
201 |
+
e.g., RELIANCE.NS, TCS.NS, INFY.NS, HDFCBANK.NS
|
202 |
+
</p>
|
203 |
+
{/* --- END NEW LINE --- */}
|
204 |
+
|
205 |
<JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
|
206 |
|
207 |
{error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
|
|
|
222 |
We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
|
223 |
This usually means the stock symbol is incorrect or not listed.
|
224 |
</p>
|
225 |
+
<p className="text-xs text-gray-500 mt-4">Please double-check the ticker and try again.</p>
|
226 |
|
227 |
<details className="mt-6 text-left w-full max-w-lg mx-auto">
|
228 |
<summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
|
|
|
238 |
);
|
239 |
}
|
240 |
|
241 |
+
export default App;
|
|
|
|
|
|
|
|
|
|