feat: auth race condition & optimize ApolloFactory & too many pageview (#602)

front/src/modules/analytics/hooks/useTrackPageView.ts

@@ -1,17 +1,26 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
+import usePrevious from '@/utils/hooks/usePrevious';
+
 import { useEventTracker } from './useEventTracker';
 
 export function useTrackPageView() {
   const location = useLocation();
+  const previousLocation = usePrevious(location);
   const eventTracker = useEventTracker();
 
   useEffect(() => {
-    eventTracker('pageview', {
-      location: {
-        pathname: location.pathname,
-      },
-    });
-  }, [location, eventTracker]);
+    // Avoid lot of pageview events enven if the location is the same
+    if (
+      !previousLocation?.pathname ||
+      previousLocation?.pathname !== location.pathname
+    ) {
+      eventTracker('pageview', {
+        location: {
+          pathname: location.pathname,
+        },
+      });
+    }
+  }, [location, eventTracker, previousLocation?.pathname]);
 }

front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
 import { useRecoilState } from 'recoil';
 
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
+import { useUpdateEffect } from '@/utils/hooks/useUpdateEffect';
 import { CommentThreadTarget } from '~/generated/graphql';
 
 import { ApolloFactory } from '../services/apollo.factory';
@@ -54,7 +55,7 @@ export function useApolloFactory() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setTokenPair, isDebugMode]);
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     if (apolloRef.current) {
       apolloRef.current.updateTokenPair(tokenPair);
     }

front/src/modules/auth/states/isMockModeState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const isMockModeState = atom({
-  key: 'isMockModeState',
-  default: false,
-});

front/src/modules/ui/layout/AuthLayout.tsx

@@ -1,14 +1,9 @@
-import { useRecoilValue } from 'recoil';
-
-import { isMockModeState } from '@/auth/states/isMockModeState';
-import { Companies } from '~/pages/companies/Companies';
 import { CompaniesMockMode } from '~/pages/companies/CompaniesMockMode';
 
 export function AuthLayout({ children }: React.PropsWithChildren) {
-  const isMockMode = useRecoilValue(isMockModeState);
   return (
     <>
-      {isMockMode ? <CompaniesMockMode /> : <Companies />}
+      <CompaniesMockMode />
       {children}
     </>
   );

front/src/modules/utils/hooks/useFirstMountState.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+export function useFirstMountState(): boolean {
+  const isFirst = useRef(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+
+    return true;
+  }
+
+  return isFirst.current;
+}

front/src/modules/utils/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious<T>(state: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = state;
+  });
+
+  return ref.current;
+}

front/src/modules/utils/hooks/useUpdateEffect.ts

@@ -0,0 +1,14 @@
+import { DependencyList, EffectCallback, useEffect } from 'react';
+
+import { useFirstMountState } from './useFirstMountState';
+
+export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
+  const isFirst = useFirstMountState();
+
+  useEffect(() => {
+    if (!isFirst) {
+      return effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}

front/src/pages/auth/CreateProfile.tsx

@@ -9,7 +9,6 @@ import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -39,7 +38,6 @@ const StyledButtonContainer = styled.div`
 
 export function CreateProfile() {
   const navigate = useNavigate();
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const onboardingStatus = useOnboardingStatus();
 
   const [currentUser] = useRecoilState(currentUserState);
@@ -93,11 +91,10 @@ export function CreateProfile() {
   );
 
   useEffect(() => {
-    setMockMode(true);
     if (onboardingStatus !== OnboardingStatus.OngoingProfileCreation) {
       navigate('/');
     }
-  }, [onboardingStatus, navigate, setMockMode]);
+  }, [onboardingStatus, navigate]);
 
   return (
     <>

front/src/pages/auth/CreateWorkspace.tsx

@@ -2,12 +2,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -36,7 +34,6 @@ const StyledButtonContainer = styled.div`
 `;
 
 export function CreateWorkspace() {
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const navigate = useNavigate();
   const onboardingStatus = useOnboardingStatus();
 
@@ -82,11 +79,10 @@ export function CreateWorkspace() {
   );
 
   useEffect(() => {
-    setMockMode(true);
     if (onboardingStatus !== OnboardingStatus.OngoingWorkspaceCreation) {
       navigate('/auth/create/profile');
     }
-  }, [onboardingStatus, navigate, setMockMode]);
+  }, [onboardingStatus, navigate]);
 
   return (
     <>

front/src/pages/auth/Index.tsx

@@ -10,7 +10,6 @@ import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
 import { Logo } from '@/auth/components/ui/Logo';
 import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
@@ -34,7 +33,6 @@ const StyledFooterNote = styled(FooterNote)`
 export function Index() {
   const navigate = useNavigate();
   const theme = useTheme();
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const [authProviders] = useRecoilState(authProvidersState);
   const [demoMode] = useRecoilState(isDemoModeState);
 
@@ -67,9 +65,8 @@ export function Index() {
   );
 
   useEffect(() => {
-    setMockMode(true);
     setAuthFlowUserEmail(demoMode ? 'tim@apple.dev' : '');
-  }, [navigate, setMockMode, setAuthFlowUserEmail, demoMode]);
+  }, [navigate, setAuthFlowUserEmail, demoMode]);
 
   return (
     <>

front/src/pages/auth/PasswordLogin.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
@@ -9,7 +9,6 @@ import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -51,12 +50,11 @@ const StyledErrorContainer = styled.div`
 
 export function PasswordLogin() {
   const navigate = useNavigate();
-  const [isDemoMode] = useRecoilState(isDemoModeState);
 
+  const [isDemoMode] = useRecoilState(isDemoModeState);
   const [authFlowUserEmail, setAuthFlowUserEmail] = useRecoilState(
     authFlowUserEmailState,
   );
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const [internalPassword, setInternalPassword] = useState(
     isDemoMode ? 'Applecar2025' : '',
   );
@@ -69,15 +67,10 @@ export function PasswordLogin() {
     },
   });
 
-  useEffect(() => {
-    setMockMode(true);
-  }, [setMockMode]);
-
   const workspaceInviteHash = useParams().workspaceInviteHash;
 
   const handleSubmit = useCallback(async () => {
     try {
-      setMockMode(false);
       if (data?.checkUserExists.exists) {
         await login(authFlowUserEmail, internalPassword);
       } else {
@@ -101,7 +94,6 @@ export function PasswordLogin() {
     signUpToWorkspace,
     authFlowUserEmail,
     internalPassword,
-    setMockMode,
     navigate,
     data?.checkUserExists.exists,
 

front/src/providers/user/UserProvider.tsx

@@ -1,14 +1,20 @@
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
+import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { useGetCurrentUserQuery } from '~/generated/graphql';
 
 export function UserProvider({ children }: React.PropsWithChildren) {
   const [, setCurrentUser] = useRecoilState(currentUserState);
-  const { data, loading } = useGetCurrentUserQuery();
   const [isLoading, setIsLoading] = useState(true);
 
+  const isLogged = useIsLogged();
+
+  const { data, loading } = useGetCurrentUserQuery({
+    skip: !isLogged,
+  });
+
   useEffect(() => {
     if (!loading) {
       setIsLoading(false);