import { useState } from 'react'
import type { AppRouter } from '../../server'
import { createTRPCReact } from '@trpc/react-query'
import { httpBatchLink } from '@trpc/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"
import { BASE_URL } from '.'

export const trpc = createTRPCReact<AppRouter>()
export type RouterInputs = inferRouterInputs<AppRouter>
export type RouterOutputs = inferRouterOutputs<AppRouter>

export const TrpcProvider = ({ children }: any) => {
    const [queryClient] = useState(() => new QueryClient())
    const [trpcClient] = useState(() => {
        return trpc.createClient({
            links: [
                httpBatchLink({
                    url: BASE_URL + "/trpc",
                }),
            ],
        })
    })

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>
                {children}
            </QueryClientProvider>
        </trpc.Provider>
    )
}

import { useState } from 'react'
import type { AppRouter } from '../../server'
import { createTRPCReact } from '@trpc/react-query'
import { httpBatchLink } from '@trpc/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"
import { BASE_URL } from '.'

export const trpc = createTRPCReact<AppRouter>()
export type RouterInputs = inferRouterInputs<AppRouter>
export type RouterOutputs = inferRouterOutputs<AppRouter>

export const TrpcProvider = ({ children }: any) => {
    const [queryClient] = useState(() => new QueryClient())
    const [trpcClient] = useState(() => {
        return trpc.createClient({
            links: [
                httpBatchLink({
                    url: BASE_URL + "/trpc",
                }),
            ],
        })
    })

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>
                {children}
            </QueryClientProvider>
        </trpc.Provider>
    )
}

import ReactDOM from 'react-dom/client'
import './index.css'
import { App } from './App'
import { TrpcProvider } from './TrpcProvider'


export const BASE_URL = window.location.hostname.includes("localhost") ? "http://localhost:3001" : "https://deployed.com"


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <TrpcProvider>
        <App />
    </TrpcProvider>
)

import ReactDOM from 'react-dom/client'
import './index.css'
import { App } from './App'
import { TrpcProvider } from './TrpcProvider'


export const BASE_URL = window.location.hostname.includes("localhost") ? "http://localhost:3001" : "https://deployed.com"


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <TrpcProvider>
        <App />
    </TrpcProvider>
)