Spaces:
Sleeping
Sleeping
File size: 3,307 Bytes
8608e55 1897dd4 8608e55 |
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 111 112 113 114 115 116 |
import { useState, useRef } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ImageUploader from "./components/ImageUploader";
import ImageCanvas from "./components/ImageCanvas";
import LoginForm from "./components/Loginform";
import Page from "./components/Page";
import useLogout from "./hooks/useLogout";
import useautoLogout from "./hooks/useautoLogout";
import "./styles/App.css";
function MainPage() {
const [imageUrl, setImageUrl] = useState(null);
const [rawCircles, setRawCircles] = useState([]);
const [rawTexts, setRawTexts] = useState([]);
const [circles, setCircles] = useState([]);
const [texts, setTexts] = useState([]);
const [selectedShape, setSelectedShape] = useState(null);
const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(null);
const [imageInfo, setImageInfo] = useState(null);
const [user, setUser] = useState(null);
const [sessionId, setSessionId] = useState(null);
const imgRef = useRef(null);
// Shared logout hook
const handleLogout = useLogout(sessionId, setUser, setSessionId, setImageUrl);
// Auto logout (inactivity + tab close)
useautoLogout(sessionId, handleLogout, 100*10 * 1000);
return (
<div className="container">
<h1 className="heading">Generative AI for Stem Education</h1>
{!user ? (
<LoginForm setUser={setUser} setSessionId={setSessionId} />
) : (
<>
<ImageUploader
setImageUrl={setImageUrl}
resetStates={() => {
setLoaded(false);
setError(null);
setRawCircles([]);
setRawTexts([]);
setCircles([]);
setTexts([]);
setSelectedShape(null);
}}
/>
{error && <div className="error">{error}</div>}
{imageUrl && (
<ImageCanvas
imageUrl={imageUrl}
imgRef={imgRef}
setLoaded={setLoaded}
setError={setError}
setImageInfo={setImageInfo}
setCircles={setCircles}
setTexts={setTexts}
setRawCircles={setRawCircles}
setRawTexts={setRawTexts}
loaded={loaded}
imageInfo={imageInfo}
circles={circles}
texts={texts}
setSelectedShape={setSelectedShape}
selectedShape={selectedShape}
sessionId={sessionId}
/>
)}
{selectedShape && (
<>
<div
style={{
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: 999,
}}
onClick={() => setSelectedShape(null)}
/>
</>
)}
</>
)}
{user && (
<button onClick={handleLogout} className="logout-button">
Logout
</button>
)}
</div>
);
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/page" element={<Page />} />
</Routes>
</BrowserRouter>
);
}
export default App;
|