Optimized Banner Component (#1170)

stylistic improvements

libs/base-ui/components/Layout/Nav/Banner.tsx

@@ -19,7 +19,10 @@ type BannerProps = {
 };
 
 export default function Banner({ href, text, bannerName }: BannerProps) {
-  const [isBannerVisible, setIsBannerVisible] = useLocalStorage(`${bannerName}Visible`, true);
+  const [isBannerVisible, setIsBannerVisible] = useLocalStorage(
+    `${bannerName}Visible`,
+    true,
+  );
   const pathname = usePathname();
   const isOnPage = pathname === href.split('?')[0];
 
@@ -33,7 +36,7 @@ export default function Banner({ href, text, bannerName }: BannerProps) {
       },
       AnalyticsEventImportance.high,
     );
-  }, [logEvent, ActionType, ComponentType, AnalyticsEventImportance]);
+  }, [logEvent, ActionType, ComponentType, AnalyticsEventImportance, bannerName]);
 
   const hideBanner = useCallback(() => {
     setIsBannerVisible(false);
@@ -47,7 +50,7 @@ export default function Banner({ href, text, bannerName }: BannerProps) {
     <div className="bg-yellow-20 z-10 flex w-full flex-row justify-center text-black">
       <div className="bg-yellow-20 z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center p-2 pl-8 pr-6">
         <Link href={href} onClick={linkClick}>
-          <span className="text-xs  underline md:text-base">{text}</span>
+          <span className="text-xs underline md:text-base">{text}</span>
         </Link>
         <div className="flex flex-row items-center gap-4">
           <button

libs/base-ui/contexts/Analytics.tsx

@@ -39,7 +39,7 @@ export default function AnalyticsProvider({ children, context }: AnalyticsProvid
       if (typeof window === 'undefined') return;
 
       if (isDevelopment) {
-        return console.log('\nlogEventWithContext: \n', {
+        console.log('\nlogEventWithContext: \n', {
           eventName,
           sanitizedEventName,
           action,
@@ -47,6 +47,7 @@ export default function AnalyticsProvider({ children, context }: AnalyticsProvid
           page_path: window.location.pathname,
           ...eventData,
         });
+        return;
       }
 
       logEvent(
@@ -63,9 +64,10 @@ export default function AnalyticsProvider({ children, context }: AnalyticsProvid
     [fullContext],
   );
 
-  const values = useMemo(() => {
-    return { logEventWithContext, context, fullContext };
-  }, [context, fullContext, logEventWithContext]);
+  const values = useMemo(() => ({ logEventWithContext, fullContext }), [
+    fullContext,
+    logEventWithContext,
+  ]);
 
   return <AnalyticsContext.Provider value={values}>{children}</AnalyticsContext.Provider>;
 }

libs/base-ui/contexts/Experiments.tsx

@@ -43,24 +43,22 @@ export default function ExperimentsProvider({ children }: ExperimentsProviderPro
         },
       },
       userProvider: {
-        getUser: () => {
-          return {
-            user_id: window.ClientAnalytics.identity.userId,
-            device_id: window.ClientAnalytics.identity.deviceId,
-            os: window.ClientAnalytics.identity.device_os,
-            language: window.ClientAnalytics.identity.languageCode,
-            country: window.ClientAnalytics.identity.countryCode,
-          };
-        },
+        getUser: () => ({
+          user_id: window.ClientAnalytics.identity.userId,
+          device_id: window.ClientAnalytics.identity.deviceId,
+          os: window.ClientAnalytics.identity.device_os,
+          language: window.ClientAnalytics.identity.languageCode,
+          country: window.ClientAnalytics.identity.countryCode,
+        }),
       },
     });
 
     setExperimentClient(client);
-  }, []);
+  }, [ampDeploymentKey]);
 
   const startExperiment = useCallback(async () => {
     if (experimentClient) await experimentClient.start();
-  }, []);
+  }, [experimentClient]);
 
   useEffect(() => {
     startExperiment()
@@ -70,7 +68,7 @@ export default function ExperimentsProvider({ children }: ExperimentsProviderPro
       .catch((error) => {
         console.log(`Error starting experiments for ${ampDeploymentKey}:`, error);
       });
-  }, [experimentClient]);
+  }, [experimentClient, startExperiment]);
 
   const getUserVariant = useCallback(
     (flagKey: string): string | undefined => {
@@ -84,7 +82,7 @@ export default function ExperimentsProvider({ children }: ExperimentsProviderPro
       const variant = experimentClient.variant(flagKey);
       return variant.value;
     },
-    [isReady],
+    [isReady, experimentClient],
   );
 
   const values = useMemo(() => {
@@ -104,9 +102,7 @@ const useExperiments = () => {
 
 const useExperiment = (flagKey: string): UseExperimentReturnValue => {
   const { isReady, getUserVariant } = useExperiments();
-  const userVariant = useMemo(() => {
-    return getUserVariant(flagKey);
-  }, [getUserVariant, flagKey]);
+  const userVariant = useMemo(() => getUserVariant(flagKey), [getUserVariant, flagKey]);
 
   return { isReady, userVariant };
 };
@@ -115,16 +111,16 @@ export { useExperiments, useExperiment };
 
 type WindowWithAnalytics = Window &
   typeof globalThis & {
-  ClientAnalytics: {
-    identity: {
-      userId: string;
-      deviceId: string;
-      device_os: string;
-      languageCode: string;
-      countryCode: string;
+    ClientAnalytics: {
+      identity: {
+        userId: string;
+        deviceId: string;
+        device_os: string;
+        languageCode: string;
+        countryCode: string;
+      };
     };
   };
-};
 
 type ExperimentsContextProps = {
   experimentClient: ExperimentClient | null;