75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import "@/styles/globals.css";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import type { AppProps } from "next/app";
|
|
|
|
import "primereact/resources/themes/lara-light-indigo/theme.css";
|
|
import "primereact/resources/primereact.min.css";
|
|
import "primeicons/primeicons.css";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
import { Router, useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import useExamStore from "@/stores/exam";
|
|
import usePreferencesStore from "@/stores/preferencesStore";
|
|
import Layout from "../components/High/Layout";
|
|
import useEntities from "../hooks/useEntities";
|
|
export default function App({ Component, pageProps }: AppProps) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const { reset } = useExamStore();
|
|
|
|
const setIsSidebarMinimized = usePreferencesStore(
|
|
(state) => state.setSidebarMinimized
|
|
);
|
|
|
|
const router = useRouter();
|
|
|
|
const { entities } = useEntities(!pageProps?.user?.id);
|
|
|
|
useEffect(() => {
|
|
const start = () => {
|
|
setLoading(true);
|
|
};
|
|
const end = () => {
|
|
setLoading(false);
|
|
};
|
|
Router.events.on("routeChangeStart", start);
|
|
Router.events.on("routeChangeComplete", end);
|
|
Router.events.on("routeChangeError", end);
|
|
return () => {
|
|
Router.events.off("routeChangeStart", start);
|
|
Router.events.off("routeChangeComplete", end);
|
|
Router.events.off("routeChangeError", end);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (router.pathname !== "/exam" && router.pathname !== "/exercises")
|
|
reset();
|
|
}, [router.pathname, reset]);
|
|
|
|
useEffect(() => {
|
|
if (localStorage.getItem("isSidebarMinimized")) {
|
|
if (localStorage.getItem("isSidebarMinimized") === "true") {
|
|
setIsSidebarMinimized(true);
|
|
} else {
|
|
setIsSidebarMinimized(false);
|
|
}
|
|
}
|
|
}, [setIsSidebarMinimized]);
|
|
|
|
return pageProps?.user ? (
|
|
<Layout user={pageProps.user} entities={entities} refreshPage={loading}>
|
|
{loading ? (
|
|
// TODO: Change this later to a better loading screen (example: skeletons for each page)
|
|
<div className="min-h-screen flex justify-center items-start">
|
|
<span className="loading loading-infinity w-32" />
|
|
</div>
|
|
) : (
|
|
<Component entities={entities} {...pageProps} />
|
|
)}
|
|
</Layout>
|
|
) : (
|
|
<Component {...pageProps} />
|
|
);
|
|
}
|