File size: 4,194 Bytes
7a249ac | 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 |
import React, { useState, useEffect } from 'react';
import ChatInterface from './components/ChatInterface';
import { LanguageProvider } from './contexts/LanguageContext';
import LanguageSelector from './components/LanguageSelector';
import FeedbackPage from './components/FeedbackPage';
import UserFeedbackAnalysisPage from './components/UserFeedbackAnalysisPage';
import { Review } from './types';
function App() {
const [page, setPage] = useState<'chat' | 'feedback' | 'userexperience'>('chat');
// Initialize reviews from localStorage
const [reviews, setReviews] = useState<Review[]>(() => {
try {
const storedReviews = window.localStorage.getItem('emotimate-reviews');
return storedReviews ? JSON.parse(storedReviews) : [];
} catch (error) {
console.error("Error reading reviews from localStorage", error);
return [];
}
});
// Save reviews to localStorage whenever they change
useEffect(() => {
try {
window.localStorage.setItem('emotimate-reviews', JSON.stringify(reviews));
} catch (error) {
console.error("Error saving reviews to localStorage", error);
}
}, [reviews]);
const handleAddReview = (review: Omit<Review, 'id' | 'date'>) => {
const newReview: Review = {
...review,
id: `User-${Math.random().toString(36).substr(2, 4).toUpperCase()}`,
date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
};
setReviews(prev => [...prev, newReview]);
};
const handleDeleteReview = (reviewId: string) => {
setReviews(prev => prev.filter(review => review.id !== reviewId));
};
const buttonClasses = "text-sm sm:text-base text-slate-600 hover:text-blue-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-slate-200";
return (
<LanguageProvider>
<div className="flex flex-col h-screen bg-slate-100 font-sans">
<header className="w-full bg-white shadow-md px-4 py-3 sm:p-4 z-10">
<div className="max-w-4xl mx-auto flex justify-between items-center">
<h1 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-blue-500 to-violet-500 text-transparent bg-clip-text">EmotiMate</h1>
<div className="flex items-center gap-2 sm:gap-4">
{page === 'chat' && (
<>
<LanguageSelector />
<button onClick={() => setPage('feedback')} className={buttonClasses} aria-label="Go to feedback page">
Feedback
</button>
<button onClick={() => setPage('userexperience')} className={buttonClasses} aria-label="Go to user experience page">
User Experience
</button>
</>
)}
{page === 'feedback' && (
<>
<button onClick={() => setPage('userexperience')} className={buttonClasses} aria-label="Go to user experience page">
User Experience
</button>
<button onClick={() => setPage('chat')} className={buttonClasses} aria-label="Go back to home page">
Home
</button>
</>
)}
{page === 'userexperience' && (
<>
<button onClick={() => setPage('feedback')} className={buttonClasses} aria-label="Go to feedback page">
Feedback
</button>
<button onClick={() => setPage('chat')} className={buttonClasses} aria-label="Go back to home page">
Home
</button>
</>
)}
</div>
</div>
</header>
<main className="flex-grow overflow-auto custom-scrollbar">
{page === 'chat' && <ChatInterface />}
{page === 'feedback' && <FeedbackPage onGoHome={() => setPage('chat')} onAddReview={handleAddReview} />}
{page === 'userexperience' && <UserFeedbackAnalysisPage reviews={reviews} onDeleteReview={handleDeleteReview} />}
</main>
</div>
</LanguageProvider>
);
}
export default App;
|