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);
+}