115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { useEffect, useMemo, useCallback } from "react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { RouterProvider } from "@tanstack/react-router";
|
|
import { ToastContainer } from "react-toastify";
|
|
|
|
import {
|
|
useUserProfileStore,
|
|
useUserStore,
|
|
} from "./context/zustand-store/userStore";
|
|
import { makeRouter } from "./routes/routes";
|
|
import { useDarkMode } from "./hooks/useDarkMode";
|
|
import { getUserPermissions } from "./utils/getUserAvalableItems";
|
|
import { ItemWithSubItems } from "./types/userPermissions";
|
|
|
|
import versionNumber from "./version.txt";
|
|
import "./index.css";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import { checkIsMobile } from "./utils/checkIsMobile";
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
export default function App() {
|
|
const auth = useUserStore((s) => s.auth);
|
|
const { profile } = useUserProfileStore();
|
|
const [isDark] = useDarkMode();
|
|
|
|
const menuItems: ItemWithSubItems[] = useMemo(
|
|
() => getUserPermissions(profile?.permissions ?? []),
|
|
[profile?.permissions]
|
|
);
|
|
|
|
const router = useMemo(
|
|
() => makeRouter(auth ?? null, menuItems),
|
|
[auth, menuItems]
|
|
);
|
|
|
|
const hardRefresh = useCallback(() => {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("refresh", Date.now().toString());
|
|
window.location.href = url.toString();
|
|
}, []);
|
|
|
|
const runWhenIdle = useCallback((fn: () => void) => {
|
|
const ric = (window as any).requestIdleCallback;
|
|
if (typeof ric === "function") {
|
|
ric(fn);
|
|
} else {
|
|
setTimeout(fn, 300);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let aborted = false;
|
|
const controller = new AbortController();
|
|
const checkVersion = () => {
|
|
if (document.visibilityState !== "visible") return;
|
|
fetch(`${versionNumber}?_=${Date.now()}`, {
|
|
signal: controller.signal,
|
|
cache: "no-store",
|
|
})
|
|
.then((res) => res.text())
|
|
.then(async (txt) => {
|
|
if (aborted) return;
|
|
const latest = txt.trim();
|
|
const stored = localStorage.getItem("AppVersion");
|
|
if (latest && latest !== stored) {
|
|
localStorage.setItem("AppVersion", latest);
|
|
const clearAndReload = async () => {
|
|
if ("caches" in window) {
|
|
const names = await caches.keys();
|
|
for (const n of names) {
|
|
await caches.delete(n).catch(() => undefined);
|
|
}
|
|
}
|
|
setTimeout(hardRefresh, 200);
|
|
};
|
|
runWhenIdle(clearAndReload);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
runWhenIdle(checkVersion);
|
|
return () => {
|
|
aborted = true;
|
|
controller.abort();
|
|
};
|
|
}, [hardRefresh, runWhenIdle]);
|
|
|
|
useEffect(() => {
|
|
const url = new URL(window.location.href);
|
|
if (url.searchParams.has("refresh")) {
|
|
url.searchParams.delete("refresh");
|
|
window.history.replaceState(
|
|
{},
|
|
document.title,
|
|
url.pathname + url.search
|
|
);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
isDark ? "dark:bg-dark-900 dark-scrollbar" : "bg-white light-scrollbar"
|
|
}
|
|
>
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} />
|
|
</QueryClientProvider>
|
|
<ToastContainer position="bottom-right" />
|
|
{checkIsMobile() && <div className="h-20"></div>}
|
|
</div>
|
|
);
|
|
}
|