From 63d0be3033d224740732119f689d1f81a6978d7d Mon Sep 17 00:00:00 2001
From: odedre <oded.reuveny@gmail.com>
Date: Mon, 26 Jun 2023 11:14:39 +0300
Subject: [PATCH 1/2] use user agent hook - expose another context to be used
 outside of bit

---
 scopes/ui-foundation/uis/hooks/use-user-agent/index.ts |  2 +-
 .../uis/hooks/use-user-agent/use-user-agent.tsx        | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts b/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts
index f0597971833e..beef5f4a8241 100644
--- a/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts
+++ b/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts
@@ -1 +1 @@
-export { userAgentContext, UserAgentProvider, useUserAgent } from './use-user-agent';
+export { userAgentContext, userAgentBrowserContext, UserAgentProvider, useUserAgent } from './use-user-agent';
diff --git a/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx b/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx
index 8e9a099f467c..434618993835 100644
--- a/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx
+++ b/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx
@@ -4,10 +4,16 @@ import UAParser from 'ua-parser-js';
 export const userAgentContext = createContext<UAParser | undefined>(undefined);
 export const UserAgentProvider = userAgentContext.Provider;
 
+export const userAgentBrowserContext = createContext<any | undefined>(undefined);
+export const userAgentBrowserProvider = userAgentBrowserContext.Provider;
+
 /**
  * hook that returns the user-agent via context
  */
 export function useUserAgent() {
-  const userAgent = useContext(userAgentContext);
-  return userAgent;
+  const browser = useContext(userAgentBrowserContext);
+  if (window) {
+    return new UAParser(window.navigator.userAgent);
+  }
+  return new UAParser(browser.headers['user-agent']);
 }

From dd6de7660abd5343841a8dfef4bc3248435894b4 Mon Sep 17 00:00:00 2001
From: odedre <oded.reuveny@gmail.com>
Date: Mon, 26 Jun 2023 19:42:30 +0300
Subject: [PATCH 2/2] use user agent - fixed ssr

---
 scopes/ui-foundation/ui/ui.ui.runtime.tsx           |  7 +++++--
 .../ui-foundation/uis/hooks/use-user-agent/index.ts |  8 +++++++-
 .../uis/hooks/use-user-agent/use-user-agent.tsx     | 13 ++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/scopes/ui-foundation/ui/ui.ui.runtime.tsx b/scopes/ui-foundation/ui/ui.ui.runtime.tsx
index 4f3bc4501bdc..d9d7683d6c21 100644
--- a/scopes/ui-foundation/ui/ui.ui.runtime.tsx
+++ b/scopes/ui-foundation/ui/ui.ui.runtime.tsx
@@ -4,6 +4,7 @@ import { Slot, SlotRegistry } from '@teambit/harmony';
 import type { ReactRouterUI } from '@teambit/react-router';
 import { ReactRouterAspect } from '@teambit/react-router';
 import { ServerRenderer, BrowserRenderer } from '@teambit/react.rendering.ssr';
+import { SSRBrowserProvider } from '@teambit/ui-foundation.ui.hooks.use-user-agent';
 import type { SsrSession, RenderPlugin, ContextProps } from '@teambit/react.rendering.ssr';
 
 import React, { ReactNode, ComponentType } from 'react';
@@ -66,8 +67,10 @@ export class UiUI {
     const reactSsr = new ServerRenderer(lifecyclePlugins);
     const fullHtml = await reactSsr.render(
       <ClientContext>
-        {hudItems}
-        {routes}
+        <SSRBrowserProvider value={ssrContent.browser}>
+          {hudItems}
+          {routes}
+        </SSRBrowserProvider>
       </ClientContext>,
       ssrContent
     );
diff --git a/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts b/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts
index beef5f4a8241..9b6e7da01359 100644
--- a/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts
+++ b/scopes/ui-foundation/uis/hooks/use-user-agent/index.ts
@@ -1 +1,7 @@
-export { userAgentContext, userAgentBrowserContext, UserAgentProvider, useUserAgent } from './use-user-agent';
+export {
+  SSRBrowserProvider,
+  ssrBrowserContext,
+  userAgentContext,
+  UserAgentProvider,
+  useUserAgent,
+} from './use-user-agent';
diff --git a/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx b/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx
index 434618993835..9fb76cd268d7 100644
--- a/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx
+++ b/scopes/ui-foundation/uis/hooks/use-user-agent/use-user-agent.tsx
@@ -1,19 +1,22 @@
 import { createContext, useContext } from 'react';
+import type { BrowserData } from '@teambit/react.rendering.ssr';
 import UAParser from 'ua-parser-js';
 
 export const userAgentContext = createContext<UAParser | undefined>(undefined);
 export const UserAgentProvider = userAgentContext.Provider;
 
-export const userAgentBrowserContext = createContext<any | undefined>(undefined);
-export const userAgentBrowserProvider = userAgentBrowserContext.Provider;
+export const ssrBrowserContext = createContext<BrowserData | undefined>(undefined);
+export const SSRBrowserProvider = ssrBrowserContext.Provider;
 
 /**
  * hook that returns the user-agent via context
  */
 export function useUserAgent() {
-  const browser = useContext(userAgentBrowserContext);
-  if (window) {
+  const browser = useContext(ssrBrowserContext);
+  if (!browser) {
     return new UAParser(window.navigator.userAgent);
   }
-  return new UAParser(browser.headers['user-agent']);
+
+  const agent = new UAParser(browser.headers['user-agent']);
+  return agent;
 }