DEVPROD-12802 Ensure userId AttributeStore reads and writes are not s…

…tale (#500)

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");

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>

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(() => {

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 ?? {};