From 9b2eb401eb15944a9e9589efc84bc549de3c48b5 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Wed, 20 Nov 2024 11:09:32 -0500
Subject: [PATCH] DEVPROD-12802 Ensure userId AttributeStore reads and writes
 are not stale (#500)

---
 apps/parsley/src/analytics/useAnalyticAttributes.ts | 4 +---
 apps/parsley/src/pages/index.tsx                    | 2 +-
 apps/spruce/src/analytics/useAnalyticsAttributes.ts | 3 +--
 apps/spruce/src/components/Content/Layout.tsx       | 2 +-
 4 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/parsley/src/analytics/useAnalyticAttributes.ts b/apps/parsley/src/analytics/useAnalyticAttributes.ts
index e332ddaeb..7de8d4415 100644
--- a/apps/parsley/src/analytics/useAnalyticAttributes.ts
+++ b/apps/parsley/src/analytics/useAnalyticAttributes.ts
@@ -1,13 +1,11 @@
 import { useEffect } from "react";
 import { useLogContext } from "context/LogContext";
 
-export const useAnalyticAttributes = () => {
+export const useAnalyticAttributes = (userId: string) => {
   const { logMetadata } = useLogContext();
   const { logType, renderingType } = logMetadata || {};
   const { AttributeStore } = window;
 
-  const userId = localStorage.getItem("userId");
-
   useEffect(() => {
     if (!AttributeStore) {
       console.error("AttributeStore not found in window object");
diff --git a/apps/parsley/src/pages/index.tsx b/apps/parsley/src/pages/index.tsx
index b302a07bd..796715382 100644
--- a/apps/parsley/src/pages/index.tsx
+++ b/apps/parsley/src/pages/index.tsx
@@ -26,7 +26,7 @@ const Content: React.FC = () => {
   const { user } = useUser();
   localStorage.setItem("userId", user?.userId ?? "");
 
-  useAnalyticAttributes();
+  useAnalyticAttributes(user?.userId ?? "");
   const { isAuthenticated } = useAuthContext();
   return isAuthenticated ? (
     <Routes>
diff --git a/apps/spruce/src/analytics/useAnalyticsAttributes.ts b/apps/spruce/src/analytics/useAnalyticsAttributes.ts
index 6db0f1cea..c9b009964 100644
--- a/apps/spruce/src/analytics/useAnalyticsAttributes.ts
+++ b/apps/spruce/src/analytics/useAnalyticsAttributes.ts
@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 
-export const useAnalyticsAttributes = () => {
-  const userId = localStorage.getItem("userId");
+export const useAnalyticsAttributes = (userId: string) => {
   const { AttributeStore } = window;
 
   useEffect(() => {
diff --git a/apps/spruce/src/components/Content/Layout.tsx b/apps/spruce/src/components/Content/Layout.tsx
index 4d0d505b9..bbc58f955 100644
--- a/apps/spruce/src/components/Content/Layout.tsx
+++ b/apps/spruce/src/components/Content/Layout.tsx
@@ -27,13 +27,13 @@ const shouldDisableForTest =
 
 export const Layout: React.FC = () => {
   const { isAuthenticated } = useAuthStateContext();
-  useAnalyticsAttributes();
   useAnnouncementToast();
 
   // this top-level query is required for authentication to work
   // afterware is used at apollo link level to authenticate or deauthenticate user based on response to query
   // therefore this could be any query as long as it is top-level
   const { data } = useQuery<UserQuery, UserQueryVariables>(USER);
+  useAnalyticsAttributes(data?.user?.userId ?? "");
   localStorage.setItem("userId", data?.user?.userId ?? "");
   const { userSettings } = useUserSettings();
   const { useSpruceOptions } = userSettings ?? {};