Files
stats/apps/dashboard/src/app/providers.tsx
Carl-Gerhard Lindesvärd ffed9bfaa5 move back 😏
2024-03-19 23:23:14 +01:00

72 lines
2.0 KiB
TypeScript

'use client';
import React, { useRef, useState } from 'react';
import { api } from '@/app/_trpc/client';
import { TooltipProvider } from '@/components/ui/tooltip';
import { ModalProvider } from '@/modals';
import type { AppStore } from '@/redux';
import makeStore from '@/redux';
import { ClerkProvider, useAuth } from '@clerk/nextjs';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpLink } from '@trpc/client';
import { Provider as ReduxProvider } from 'react-redux';
import { Toaster } from 'sonner';
import superjson from 'superjson';
function AllProviders({ children }: { children: React.ReactNode }) {
const { getToken } = useAuth();
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
networkMode: 'always',
refetchOnMount: true,
refetchOnWindowFocus: false,
},
},
})
);
const [trpcClient] = useState(() =>
api.createClient({
transformer: superjson,
links: [
httpLink({
url: `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/trpc`,
async headers() {
return { Authorization: `Bearer ${await getToken()}` };
},
}),
],
})
);
const storeRef = useRef<AppStore>();
if (!storeRef.current) {
// Create the store instance the first time this renders
storeRef.current = makeStore();
}
return (
<ReduxProvider store={storeRef.current}>
<api.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<TooltipProvider delayDuration={200}>
{children}
<Toaster />
<ModalProvider />
</TooltipProvider>
</QueryClientProvider>
</api.Provider>
</ReduxProvider>
);
}
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<AllProviders>{children}</AllProviders>
</ClerkProvider>
);
}