el.xwx.moe/pages/_app.tsx

111 lines
3.3 KiB
TypeScript
Raw Normal View History

2024-01-14 09:09:09 -06:00
import React, { useEffect } from "react";
2023-01-29 12:12:36 -06:00
import "@/styles/globals.css";
2023-12-29 11:21:22 -06:00
import "bootstrap-icons/font/bootstrap-icons.css";
2023-02-06 11:59:23 -06:00
import { SessionProvider } from "next-auth/react";
2023-01-29 12:12:36 -06:00
import type { AppProps } from "next/app";
2023-03-28 02:31:50 -05:00
import Head from "next/head";
2023-04-30 15:54:40 -05:00
import AuthRedirect from "@/layouts/AuthRedirect";
import toast from "react-hot-toast";
import { Toaster, ToastBar } from "react-hot-toast";
2023-07-08 05:35:43 -05:00
import { Session } from "next-auth";
2024-01-14 09:09:09 -06:00
import { isPWA } from "@/lib/client/utils";
2024-05-27 16:42:29 -05:00
// import useInitialData from "@/hooks/useInitialData";
import { appWithTranslation } from "next-i18next";
2024-07-30 13:57:09 -05:00
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 30,
},
},
});
2023-01-22 15:39:35 -06:00
2024-05-27 16:42:29 -05:00
function App({
2023-07-08 05:35:43 -05:00
Component,
pageProps,
}: AppProps<{
session: Session;
}>) {
2024-01-14 09:09:09 -06:00
useEffect(() => {
if (isPWA()) {
const meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1, maximum-scale=1";
document.getElementsByTagName("head")[0].appendChild(meta);
}
}, []);
2023-01-22 15:39:35 -06:00
return (
2024-07-30 13:57:09 -05:00
<QueryClientProvider client={queryClient}>
<SessionProvider
session={pageProps.session}
refetchOnWindowFocus={false}
basePath="/api/v1/auth"
>
<Head>
<title>Linkwarden</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
</Head>
<AuthRedirect>
{/* <GetData> */}
<Toaster
position="top-center"
reverseOrder={false}
toastOptions={{
className:
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
}}
>
{(t) => (
<ToastBar toast={t}>
{({ icon, message }) => (
<div
className="flex flex-row"
data-testid="toast-message-container"
data-type={t.type}
>
{icon}
<span data-testid="toast-message">{message}</span>
{t.type !== "loading" && (
2024-08-20 15:59:01 -05:00
<div
2024-07-30 13:57:09 -05:00
data-testid="close-toast-button"
onClick={() => toast.dismiss(t.id)}
2024-08-20 15:59:01 -05:00
></div>
2024-07-30 13:57:09 -05:00
)}
</div>
)}
</ToastBar>
)}
</Toaster>
<Component {...pageProps} />
{/* </GetData> */}
</AuthRedirect>
</SessionProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
2023-01-22 15:39:35 -06:00
);
}
2024-05-27 16:42:29 -05:00
export default appWithTranslation(App);