ensures session on first render

Vizzuality · Apr 29, 2024 · 131e5bb · 131e5bb
1 parent 4915af7
commit 131e5bb
Show file tree

Hide file tree

Showing 20 changed files with 259 additions and 64 deletions.
diff --git a/client/src/hooks/profile/index.ts b/client/src/hooks/profile/index.ts
@@ -1,38 +1,28 @@
-import { useMemo } from 'react';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
 
 import { apiRawServiceWithoutAuth, apiService } from 'services/api';
 import { authService } from 'services/authentication';
 
 import type { User, PasswordPayload, ErrorResponse, ProfilePayload } from 'types';
-import type { UseQueryResult, UseQueryOptions } from '@tanstack/react-query';
 import type { AxiosPromise } from 'axios';
 
-type ResponseData = UseQueryResult<User>;
+export function useProfile() {
+  const { data: session } = useSession();
 
-const DEFAULT_QUERY_OPTIONS: UseQueryOptions<User> = {
-  retry: false,
-  keepPreviousData: true,
-  refetchOnWindowFocus: false,
-};
-
-export function useProfile(): ResponseData {
-  const fetchProfile = useQuery(
-    ['profile'],
-    () =>
-      apiService
-        .request({
-          method: 'GET',
-          url: '/users/me',
-        })
-        .then((response) => {
-          if (response.status === 200) return response.data.data;
-          return response;
-        }),
-    DEFAULT_QUERY_OPTIONS,
+  return useQuery(['profile', session.accessToken], () =>
+    apiService
+      .request<{
+        data: User & {
+          id: string;
+          type: 'users';
+        };
+      }>({
+        method: 'GET',
+        url: '/users/me',
+      })
+      .then(({ data }) => data?.data),
   );
-
-  return useMemo<ResponseData>((): ResponseData => fetchProfile, [fetchProfile]);
 }
 
 export function useUpdateProfile() {

diff --git a/client/src/lib/react-query/index.ts b/client/src/lib/react-query/index.ts
@@ -0,0 +1,13 @@
+import { QueryClient } from '@tanstack/react-query';
+
+// todo: when we are able to use RSC, use cache's React
+const getQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+
+export default getQueryClient;
diff --git a/client/src/pages/_document.tsx b/client/src/pages/_document.tsx
@@ -1,13 +1,6 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 
-import type { DocumentContext, DocumentInitialProps } from 'next/document';
-
 class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
-  }
-
   render(): JSX.Element {
     return (
       <Html className="h-full bg-gray-100">

diff --git a/client/src/pages/analysis/chart.tsx b/client/src/pages/analysis/chart.tsx
@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import classNames from 'classnames';
+import { dehydrate } from '@tanstack/react-query';
 
+import { auth } from '@/pages/api/auth/[...nextauth]';
 import { useAppSelector, useAppDispatch } from 'store/hooks';
 import { setVisualizationMode } from 'store/features/analysis';
 import { analysisFilters } from 'store/features/analysis/filters';
@@ -13,6 +15,7 @@ import AnalysisDynamicMetadata from 'containers/analysis-visualization/analysis-
 import Loading from 'components/loading';
 import TitleTemplate from 'utils/titleTemplate';
 import { tasksSSR } from 'services/ssr';
+import getQueryClient from '@/lib/react-query';
 
 import type { ReactElement } from 'react';
 import type { NextPageWithLayout } from 'pages/_app';
@@ -87,7 +90,12 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
         },
       };
     }
-    return { props: { query } };
+    const session = await auth(req, res);
+    const queryClient = getQueryClient();
+
+    queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+    return { props: { query, session, dehydratedState: dehydrate(queryClient) } };
   } catch (error) {
     if (error.response.status === 401) {
       return {

diff --git a/client/src/pages/analysis/map.tsx b/client/src/pages/analysis/map.tsx
@@ -1,5 +1,7 @@
 import { MapProvider } from 'react-map-gl/maplibre';
+import { dehydrate } from '@tanstack/react-query';
 
+import { auth } from '@/pages/api/auth/[...nextauth]';
 import useEffectOnce from 'hooks/once';
 import { setVisualizationMode } from 'store/features/analysis';
 import { useAppDispatch } from 'store/hooks';
@@ -8,6 +10,7 @@ import AnalysisLayout from 'layouts/analysis';
 import AnalysisMap from 'containers/analysis-visualization/analysis-map';
 import TitleTemplate from 'utils/titleTemplate';
 import { tasksSSR } from 'services/ssr';
+import getQueryClient from '@/lib/react-query';
 
 import type { NextPageWithLayout } from 'pages/_app';
 import type { ReactElement } from 'react';
@@ -49,7 +52,13 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
         },
       };
     }
-    return { props: { query } };
+
+    const session = await auth(req, res);
+    const queryClient = getQueryClient();
+
+    queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+    return { props: { query, session, dehydratedState: dehydrate(queryClient) } };
   } catch (error) {
     if (error.response.status === 401) {
       return {

diff --git a/client/src/pages/analysis/table.tsx b/client/src/pages/analysis/table.tsx
@@ -1,3 +1,6 @@
+import { dehydrate } from '@tanstack/react-query';
+
+import { auth } from '@/pages/api/auth/[...nextauth]';
 import { useAppDispatch } from 'store/hooks';
 import useEffectOnce from 'hooks/once';
 import { setVisualizationMode } from 'store/features/analysis';
@@ -6,6 +9,7 @@ import AnalysisLayout from 'layouts/analysis';
 import AnalysisTable from 'containers/analysis-visualization/analysis-table';
 import TitleTemplate from 'utils/titleTemplate';
 import { tasksSSR } from 'services/ssr';
+import getQueryClient from '@/lib/react-query';
 
 import type { NextPageWithLayout } from 'pages/_app';
 import type { ReactElement } from 'react';
@@ -44,7 +48,13 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
         },
       };
     }
-    return { props: { query } };
+
+    const session = await auth(req, res);
+    const queryClient = getQueryClient();
+
+    queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+    return { props: { query, session, dehydratedState: dehydrate(queryClient) } };
   } catch (error) {
     if (error.response.status === 401) {
       return {

diff --git a/client/src/pages/api/auth/[...nextauth].ts b/client/src/pages/api/auth/[...nextauth].ts
@@ -1,16 +1,13 @@
-import NextAuth from 'next-auth';
+import NextAuth, { getServerSession } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
+import { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from 'next';
 
 import { authService } from 'services/authentication';
 import getUserFullName from 'utils/user-full-name';
+import { User } from '@/types';
 
 import type { NextAuthOptions } from 'next-auth';
 
-type CustomCredentials = Credential & {
-  password: string;
-  username: string;
-};
-
 export const options: NextAuthOptions = {
   /**
    * Defining custom pages
@@ -38,10 +35,13 @@ export const options: NextAuthOptions = {
         password: { label: 'Password', type: 'password' },
       },
       async authorize(credentials) {
-        const { username, password } = credentials as CustomCredentials;
+        const { username, password } = credentials;
 
         // Request to sign in
-        const signInRequest = await authService.request({
+        const signInRequest = await authService.request<{
+          user: User;
+          accessToken: string;
+        }>({
           url: '/sign-in',
           method: 'POST',
           data: { username, password },
@@ -50,7 +50,6 @@ export const options: NextAuthOptions = {
 
         const { data, status } = signInRequest;
 
-        // Parsing session data
         if (data && status === 201) {
           return {
             ...data.user,
@@ -71,8 +70,9 @@ export const options: NextAuthOptions = {
       const newToken = { ...token };
 
       if (user) {
-        const { accessToken } = user;
-        newToken.accessToken = accessToken as string;
+        const { accessToken, ...rest } = user;
+        newToken.accessToken = accessToken;
+        newToken.user = rest;
 
         // If it's not expired, return the token,
         // if (Date.now() / 1000 + TIME_TO_REFRESH_TOKEN < (newToken?.exp as number)) {
@@ -98,10 +98,20 @@ export const options: NextAuthOptions = {
 
     // Extending session object
     session({ session, token }) {
-      session.accessToken = token.accessToken as string;
+      session.accessToken = token.accessToken;
+      session.user = token.user;
       return session;
     },
   },
 };
 
+export function auth(
+  ...args:
+    | [GetServerSidePropsContext['req'], GetServerSidePropsContext['res']]
+    | [NextApiRequest, NextApiResponse]
+    | []
+) {
+  return getServerSession(...args, options);
+}
+
 export default NextAuth(options);
diff --git a/client/src/pages/data/index.tsx b/client/src/pages/data/index.tsx
@@ -1,13 +1,17 @@
 import { useMemo } from 'react';
 import Head from 'next/head';
+import { GetServerSideProps } from 'next';
+import { dehydrate } from '@tanstack/react-query';
 
+import { auth } from '@/pages/api/auth/[...nextauth]';
 import { useSourcingLocations } from 'hooks/sourcing-locations';
 import { useLasTask } from 'hooks/tasks';
 import AdminLayout from 'layouts/admin';
 import AdminDataUploader from 'containers/admin/data-uploader';
 import AdminDataTable from 'containers/admin/data-table';
 import Loading from 'components/loading';
 import Search from 'components/search';
+import getQueryClient from '@/lib/react-query';
 
 const AdminDataPage: React.FC = () => {
   // Getting sourcing locations to check if there are any data
@@ -54,4 +58,17 @@ const AdminDataPage: React.FC = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await auth(ctx.req, ctx.res);
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+  return {
+    props: {
+      session,
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
+
 export default AdminDataPage;
diff --git a/client/src/pages/data/scenarios/[scenarioId]/edit.tsx b/client/src/pages/data/scenarios/[scenarioId]/edit.tsx
@@ -4,8 +4,9 @@ import toast from 'react-hot-toast';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useQueryClient } from '@tanstack/react-query';
+import { dehydrate, useQueryClient } from '@tanstack/react-query';
 import { PlusIcon, DotsVerticalIcon } from '@heroicons/react/solid';
+import { GetServerSideProps } from 'next';
 
 import InfoTooltip from 'components/info-tooltip';
 import { useScenario, useUpdateScenario } from 'hooks/scenarios';
@@ -26,6 +27,8 @@ import Toggle from 'components/toggle';
 import Dropdown from 'components/dropdown';
 import Badge from 'components/badge';
 import { handleResponseError } from 'services/api';
+import { auth } from '@/pages/api/auth/[...nextauth]';
+import getQueryClient from '@/lib/react-query';
 
 import type { ScenarioFormData } from 'containers/scenarios/types';
 
@@ -238,4 +241,18 @@ const UpdateScenarioPage: React.FC = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await auth(ctx.req, ctx.res);
+  const queryClient = getQueryClient();
+
+  queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+  return {
+    props: {
+      session,
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
+
 export default UpdateScenarioPage;
diff --git a/client/src/pages/data/scenarios/[scenarioId]/interventions/[interventionId]/edit.tsx b/client/src/pages/data/scenarios/[scenarioId]/interventions/[interventionId]/edit.tsx
@@ -2,6 +2,8 @@ import { useCallback } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import toast from 'react-hot-toast';
+import { GetServerSideProps } from 'next';
+import { dehydrate } from '@tanstack/react-query';
 
 import { useIntervention, useUpdateIntervention } from 'hooks/interventions';
 import { parseInterventionFormDataToDto } from 'containers/interventions/utils';
@@ -10,6 +12,8 @@ import InterventionForm from 'containers/interventions/form';
 import BackLink from 'components/back-link/component';
 import Loading from 'components/loading';
 import { handleResponseError } from 'services/api';
+import { auth } from '@/pages/api/auth/[...nextauth]';
+import getQueryClient from '@/lib/react-query';
 
 import type { InterventionFormData } from 'containers/interventions/types';
 
@@ -86,4 +90,17 @@ const EditInterventionPage: React.FC = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await auth(ctx.req, ctx.res);
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+  return {
+    props: {
+      session,
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
+
 export default EditInterventionPage;
diff --git a/client/src/pages/data/scenarios/[scenarioId]/interventions/new.tsx b/client/src/pages/data/scenarios/[scenarioId]/interventions/new.tsx
@@ -3,13 +3,17 @@ import Head from 'next/head';
 import router, { useRouter } from 'next/router';
 import toast from 'react-hot-toast';
 import omitBy from 'lodash-es/omitBy';
+import { GetServerSideProps } from 'next';
+import { dehydrate } from '@tanstack/react-query';
 
 import { useCreateNewIntervention } from 'hooks/interventions';
 import CleanLayout from 'layouts/clean';
 import InterventionForm from 'containers/interventions/form';
 import { parseInterventionFormDataToDto } from 'containers/interventions/utils';
 import BackLink from 'components/back-link';
 import { handleResponseError } from 'services/api';
+import { auth } from '@/pages/api/auth/[...nextauth]';
+import getQueryClient from '@/lib/react-query';
 
 import type { InterventionDto, InterventionFormData } from 'containers/interventions/types';
 
@@ -60,4 +64,17 @@ const CreateInterventionPage: React.FC = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await auth(ctx.req, ctx.res);
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(['profile', session.accessToken], session.user);
+
+  return {
+    props: {
+      session,
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
+
 export default CreateInterventionPage;