twittok/ui/src/App.tsx
2024-10-22 21:45:57 +07:00

58 lines
1.5 KiB
TypeScript
Executable File

import Test from "./test";
import Cookies from "./cookies/Cookies";
import spinner from "./assets/icons/spinner.svg";
import "./App.css";
import "./thai.css";
import Loader from "./timeline/Entry";
import Modal from "./modals/Modal";
import { useGlobalState } from "./logic/state";
import { useEffect, useState } from "react";
import { useHistory, Router, Route } from "./logic/router";
import { useQueryClient } from "@tanstack/react-query";
import { twatterCookieQ } from "./logic/queries";
import { PROCESS_ID } from "./logic/constants";
function App() {
const [loading, setLoading] = useState(true);
const { init, modal } = useGlobalState();
const qc = useQueryClient();
async function pref() {
await qc.prefetchQuery(twatterCookieQ);
}
useEffect(() => {
init().then((_) => {
setLoading(false);
});
pref();
}, []);
// const { init } = useGlobalState();
if (loading) return <img className="spinner gc" src={spinner} />;
return (
<>
<Router basePath={`/${PROCESS_ID}`}>
<Route path="/" component={Nav} />
<Route path="/cookies" component={Cookies} />
<Route path="/main" component={Loader} />
</Router>
{modal && <Modal>{modal}</Modal>}
</>
);
}
function Nav() {
const { navigate } = useHistory();
return (
<>
<h1>TwitTok</h1>
<a onClick={() => navigate("/cookies")} className="button">
Set Cookies
</a>
<a onClick={() => navigate("/main")} className="button">
Go Browse
</a>
<Test />
</>
);
}
export default App;