[skip ci] refactoring

lib/growthbook/consts.ts

@@ -0,0 +1,2 @@
+export const STORAGE_KEY = 'growthbook:experiments';
+export const STORAGE_LIMIT = 20;

lib/growthbook/init.ts

@@ -3,6 +3,8 @@ import { GrowthBook } from '@growthbook/growthbook-react';
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel';
 
+import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
+
 export interface GrowthBookFeatures {
   test_value: string;
 }
@@ -37,9 +39,6 @@ export const growthBook = (() => {
   });
 })();
 
-const STORAGE_KEY = 'growthbook:experiments';
-const STORAGE_LIMIT = 20;
-
 function getStorageValue(): Array<unknown> | undefined {
   const item = window.localStorage.getItem(STORAGE_KEY);
   if (!item) {

lib/growthbook/useLoadFeatures.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { SECOND } from 'lib/consts';
+
+import { growthBook } from './init';
+
+export default function useLoadFeatures() {
+  React.useEffect(() => {
+    growthBook?.setAttributes({
+      ...growthBook.getAttributes(),
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      language: window.navigator.language,
+    });
+
+    growthBook?.loadFeatures({ timeout: SECOND });
+  }, []);
+}

lib/mixpanel/getUuid.ts

@@ -1,4 +1,6 @@
 import * as cookies from 'lib/cookies';
+import * as growthBook from 'lib/growthbook/consts';
+import isBrowser from 'lib/isBrowser';
 
 export default function getUuid() {
   const cookie = cookies.get(cookies.NAMES.UUID);
@@ -10,5 +12,9 @@ export default function getUuid() {
   const uuid = crypto.randomUUID();
   cookies.set(cookies.NAMES.UUID, uuid);
 
+  if (isBrowser()) {
+    window.localStorage.removeItem(growthBook.STORAGE_KEY);
+  }
+
   return uuid;
 }

lib/mixpanel/useInit.tsx

@@ -7,7 +7,6 @@ import { deviceType } from 'react-device-detect';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
-import { growthBook } from 'lib/growthbook/init';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import getUuid from './getUuid';
@@ -27,13 +26,6 @@ export default function useMixpanelInit() {
 
     const mixpanelConfig: Partial<Config> = {
       debug: Boolean(debugFlagQuery.current || debugFlagCookie),
-      loaded: function() {
-        growthBook?.setAttributes({
-          ...growthBook.getAttributes(),
-          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-          language: window.navigator.language,
-        });
-      },
     };
     const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
 

pages/_app.tsx

@@ -10,11 +10,11 @@ import type { NextPageWithLayout } from 'nextjs/types';
 
 import config from 'configs/app';
 import useQueryClientConfig from 'lib/api/useQueryClientConfig';
-import { SECOND } from 'lib/consts';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ChakraProvider } from 'lib/contexts/chakra';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import { growthBook } from 'lib/growthbook/init';
+import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
 import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
@@ -42,9 +42,7 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
-  React.useEffect(() => {
-    growthBook?.loadFeatures({ timeout: SECOND });
-  }, []);
+  useLoadFeatures();
 
   const queryClient = useQueryClientConfig();