diff --git a/app.territoiresentransitions.react/src/app/App.tsx b/app.territoiresentransitions.react/src/app/App.tsx index ad0a9fdc4f..c44ae018fc 100644 --- a/app.territoiresentransitions.react/src/app/App.tsx +++ b/app.territoiresentransitions.react/src/app/App.tsx @@ -1,21 +1,27 @@ +import { createTheme, ThemeProvider } from '@mui/material/styles'; import { - BrowserRouter as Router, + QueryClient as TanstackQueryClient, + QueryClientProvider as TanstackQueryClientProvider, +} from '@tanstack/react-query'; +import { createTrackingClient, TrackingProvider } from '@tet/ui'; +import { CollectiviteRoutes } from 'app/pages/collectivite/CollectiviteRoutes'; +import Home from 'app/pages/Home'; +import { Redirector } from 'app/Redirector'; +import { ScrollToTopOnPageChange } from 'app/ScrollToTopOnPageChange'; +import { Toasters } from 'app/Toasters'; +import { ENV } from 'environmentVariables'; +import { QueryClient, QueryClientProvider } from 'react-query'; +import { ReactQueryDevtools } from 'react-query/devtools'; +import { + Redirect, Route, + BrowserRouter as Router, Switch, - Redirect, } from 'react-router-dom'; -import {QueryClient, QueryClientProvider} from 'react-query'; -import {ReactQueryDevtools} from 'react-query/devtools'; -import {TrackingProvider, createTrackingClient} from '@tet/ui'; -import {ENV} from 'environmentVariables'; -import {E2E} from './E2E'; -import {CollectiviteRoutes} from 'app/pages/collectivite/CollectiviteRoutes'; -import Home from 'app/pages/Home'; -import {Redirector} from 'app/Redirector'; -import {Toasters} from 'app/Toasters'; -import {ScrollToTopOnPageChange} from 'app/ScrollToTopOnPageChange'; -import {createTheme, ThemeProvider} from '@mui/material/styles'; +import { E2E } from './E2E'; +import Layout from 'app/Layout'; +import { CollectivitesEngageesPage } from 'app/pages/CollectivitesEngagees/CollectivitesEngageesPage'; import { ancienRecherchesPath, finaliserMonInscriptionUrl, @@ -23,13 +29,12 @@ import { recherchesCollectivitesUrl, recherchesLandingPath, } from 'app/paths'; -import {CollectivitesEngageesPage} from 'app/pages/CollectivitesEngagees/CollectivitesEngageesPage'; -import {ProfilPage} from './pages/Profil/ProfilPage'; -import Layout from 'app/Layout'; -import {AuthProvider} from 'core-logic/api/auth/AuthProvider'; -import {ScoreListenerProvider} from 'core-logic/hooks/useScoreListener'; -import {VisitTracker} from 'app/VisitTracker'; +import { VisitTracker } from 'app/VisitTracker'; +import { AuthProvider } from 'core-logic/api/auth/AuthProvider'; +import { ScoreListenerProvider } from 'core-logic/hooks/useScoreListener'; +import { trpc, trpcClient } from 'utils/trpc'; import AccepterCGUModal from './pages/Auth/AccepterCGUModal'; +import { ProfilPage } from './pages/Profil/ProfilPage'; const theme = createTheme({ palette: { @@ -39,52 +44,60 @@ const theme = createTheme({ }, }); -const queryClient = new QueryClient(); const trackingClient = createTrackingClient(ENV.posthog); +const queryClient = new QueryClient(); +const tanstackQueryClient = new TanstackQueryClient(); export const App = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/app.territoiresentransitions.react/src/core-logic/api/auth/AuthProvider.tsx b/app.territoiresentransitions.react/src/core-logic/api/auth/AuthProvider.tsx index 108ddf1398..7bf92d34c7 100644 --- a/app.territoiresentransitions.react/src/core-logic/api/auth/AuthProvider.tsx +++ b/app.territoiresentransitions.react/src/core-logic/api/auth/AuthProvider.tsx @@ -227,23 +227,27 @@ const clearCrispUserData = () => { } }; -const useCurrentSession = () => { - const { data, error } = useQuery(['session'], async () => { - const { data, error } = await supabaseClient.auth.getSession(); +export async function getSession() { + const { data, error } = await supabaseClient.auth.getSession(); + if (data?.session) { + return data.session; + } + if (error) throw error; + + // restaure une éventuelle session précédente + const ret = await restoreSessionFromAuthTokens(supabaseClient); + if (ret) { + const { data, error } = ret; if (data?.session) { return data.session; } if (error) throw error; + } +} - // restaure une éventuelle session précédente - const ret = await restoreSessionFromAuthTokens(supabaseClient); - if (ret) { - const { data, error } = ret; - if (data?.session) { - return data.session; - } - if (error) throw error; - } +const useCurrentSession = () => { + const { data, error } = useQuery(['session'], async () => { + return getSession(); }); if (error || !data) { @@ -252,3 +256,13 @@ const useCurrentSession = () => { return data; }; + +export async function getAuthHeaders() { + const session = await getSession(); + return session?.access_token + ? { + authorization: `Bearer ${session.access_token}`, + apikey: `${ENV.supabase_anon_key}`, + } + : null; +} diff --git a/app.territoiresentransitions.react/src/utils/trpc.ts b/app.territoiresentransitions.react/src/utils/trpc.ts new file mode 100644 index 0000000000..a82796183f --- /dev/null +++ b/app.territoiresentransitions.react/src/utils/trpc.ts @@ -0,0 +1,23 @@ +// By using `import type` you ensure that the reference will be stripped at compile-time, meaning you don't inadvertently import server-side code into your client. +// For more information, see the Typescript docs: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export +import { createTRPCReact, httpBatchLink } from '@trpc/react-query'; +import type { AppRouter } from './../../../backend/src/trpc.router'; +import { getAuthHeaders } from 'core-logic/api/auth/AuthProvider'; + +const BASE_URL = `${process.env.NX_PUBLIC_BACKEND_URL}/trpc`; + +export const trpc = createTRPCReact(); + +export const trpcClient = trpc.createClient({ + links: [ + httpBatchLink({ + url: BASE_URL, + async headers() { + const authHeaders = await getAuthHeaders(); + return { + ...(authHeaders ?? {}), + }; + }, + }), + ], +}); diff --git a/package.json b/package.json index ac93dba26b..adfed9404e 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,10 @@ "@supabase/realtime-js": "^2.9.3", "@supabase/ssr": "^0.4.0", "@supabase/supabase-js": "^2.45.1", - "@trpc/server": "^10.45.2", + "@tanstack/react-query": "^5.59.15", + "@trpc/client": "11.0.0-rc.577", + "@trpc/react-query": "11.0.0-rc.577", + "@trpc/server": "11.0.0-rc.577", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", "@zxcvbn-ts/language-fr": "^3.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bbb2b23143..c624abcbd9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -116,9 +116,18 @@ importers: '@supabase/supabase-js': specifier: ^2.45.1 version: 2.45.4 + '@tanstack/react-query': + specifier: ^5.59.15 + version: 5.59.15(react@18.3.1) + '@trpc/client': + specifier: 11.0.0-rc.577 + version: 11.0.0-rc.577(@trpc/server@11.0.0-rc.577) + '@trpc/react-query': + specifier: 11.0.0-rc.577 + version: 11.0.0-rc.577(@tanstack/react-query@5.59.15(react@18.3.1))(@trpc/client@11.0.0-rc.577(@trpc/server@11.0.0-rc.577))(@trpc/server@11.0.0-rc.577)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@trpc/server': - specifier: ^10.45.2 - version: 10.45.2 + specifier: 11.0.0-rc.577 + version: 11.0.0-rc.577 '@zxcvbn-ts/core': specifier: ^3.0.4 version: 3.0.4 @@ -4028,6 +4037,14 @@ packages: resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==} engines: {node: '>=10'} + '@tanstack/query-core@5.59.13': + resolution: {integrity: sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==} + + '@tanstack/react-query@5.59.15': + resolution: {integrity: sha512-QbVlAkTI78wB4Mqgf2RDmgC0AOiJqer2c5k9STOOSXGv1S6ZkY37r/6UpE8DbQ2Du0ohsdoXgFNEyv+4eDoPEw==} + peerDependencies: + react: ^18 || ^19 + '@testing-library/dom@10.4.0': resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==} engines: {node: '>=18'} @@ -4053,8 +4070,22 @@ packages: resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==} engines: {node: '>= 10'} - '@trpc/server@10.45.2': - resolution: {integrity: sha512-wOrSThNNE4HUnuhJG6PfDRp4L2009KDVxsd+2VYH8ro6o/7/jwYZ8Uu5j+VaW+mOmc8EHerHzGcdbGNQSAUPgg==} + '@trpc/client@11.0.0-rc.577': + resolution: {integrity: sha512-ZjW7wDKtixKeQGwXB/VBw4xFyORHb6nItzY8zAYa0RJ6I4m8DQ5GKf+eZTlw84foGv+yVrQJIUMqwMSjmd+mmg==} + peerDependencies: + '@trpc/server': 11.0.0-rc.577+6b5a608eb + + '@trpc/react-query@11.0.0-rc.577': + resolution: {integrity: sha512-xzWjjvYrrydzPaClOmo2WQpVPmmsNwbO6G6u3pTEoEjxCdHOJKzIg/o1vV7JzgpoJoptg1ovMCTI91T1BvyouQ==} + peerDependencies: + '@tanstack/react-query': ^5.54.1 + '@trpc/client': 11.0.0-rc.577+6b5a608eb + '@trpc/server': 11.0.0-rc.577+6b5a608eb + react: '>=18.2.0' + react-dom: '>=18.2.0' + + '@trpc/server@11.0.0-rc.577': + resolution: {integrity: sha512-Hk3m8ONry6mcXXEr7bzF2USCWq96GwMkYXiyOinXl6iMQT/FWpx+B0kdRCg3TOCQYIIBZbDwE6/tm1H6WyXHRA==} '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} @@ -17680,6 +17711,13 @@ snapshots: dependencies: defer-to-connect: 2.0.1 + '@tanstack/query-core@5.59.13': {} + + '@tanstack/react-query@5.59.15(react@18.3.1)': + dependencies: + '@tanstack/query-core': 5.59.13 + react: 18.3.1 + '@testing-library/dom@10.4.0': dependencies: '@babel/code-frame': 7.24.7 @@ -17712,7 +17750,19 @@ snapshots: '@tootallnate/once@2.0.0': optional: true - '@trpc/server@10.45.2': {} + '@trpc/client@11.0.0-rc.577(@trpc/server@11.0.0-rc.577)': + dependencies: + '@trpc/server': 11.0.0-rc.577 + + '@trpc/react-query@11.0.0-rc.577(@tanstack/react-query@5.59.15(react@18.3.1))(@trpc/client@11.0.0-rc.577(@trpc/server@11.0.0-rc.577))(@trpc/server@11.0.0-rc.577)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/react-query': 5.59.15(react@18.3.1) + '@trpc/client': 11.0.0-rc.577(@trpc/server@11.0.0-rc.577) + '@trpc/server': 11.0.0-rc.577 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@trpc/server@11.0.0-rc.577': {} '@trysound/sax@0.2.0': {}