ryan
4ac0754ea7
Extract logic from god components into custom hooks (useAuthCheck, useConversations, useChat, usePresignedUrl, useAdminUsers, useOIDCAuth). Eliminate unnecessary useEffects per React guidelines — scroll is now imperative, isAdmin comes from useAuthCheck instead of a separate fetch. ConversationList becomes a pure presentational component. Wrap bubble components in React.memo. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import "./App.css";
|
|
import { AuthProvider } from "./contexts/AuthContext";
|
|
import { ChatScreen } from "./components/ChatScreen";
|
|
import { LoginScreen } from "./components/LoginScreen";
|
|
import { useAuthCheck } from "./hooks/useAuthCheck";
|
|
import catIcon from "./assets/cat.png";
|
|
|
|
const AppContainer = () => {
|
|
const { isAuthenticated, isChecking, isAdmin, setAuthenticated } = useAuthCheck();
|
|
|
|
if (isChecking) {
|
|
return (
|
|
<div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
|
|
<img
|
|
src={catIcon}
|
|
alt="Simba"
|
|
className="w-16 h-16 animate-bounce"
|
|
/>
|
|
<p className="text-warm-gray font-medium text-lg tracking-wide">
|
|
waking up simba...
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isAuthenticated ? (
|
|
<ChatScreen setAuthenticated={setAuthenticated} isAdmin={isAdmin} />
|
|
) : (
|
|
<LoginScreen setAuthenticated={setAuthenticated} />
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const App = () => {
|
|
return (
|
|
<AuthProvider>
|
|
<AppContainer />
|
|
</AuthProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|