Add more segment tests

Author: rafinutshaw-optimizely

bug_bash/src/App.tsx

@@ -1,13 +1,18 @@
-import React from "react";
-import AppLayout from "./layout/layout";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import FetchQualifiedSegments from "./pages/fetch-qualified-segments/fetch-qualified-segments";
+import React from 'react';
+import AppLayout from './layout/layout';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import FetchQualifiedSegments from './pages/fetch-qualified-segments/fetch-qualified-segments';
+import ValidateUserContext from './pages/validate-user-context/validate-user-context';
 
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: '/fetch-qualified-segments',
     element: <FetchQualifiedSegments />,
   },
+  {
+    path: '/',
+    element: <ValidateUserContext />,
+  },
 ]);
 
 const App = () => {

bug_bash/src/layout/layout.css.tsx

@@ -1,8 +1,8 @@
 export const Grid = {
-  display: "grid",
-  gap: "50px 100px",
+  display: 'flex',
+  justifyContent: 'space-around',
 };
 
 export const Content = {
-  margin: "16px",
+  margin: '16px',
 };

bug_bash/src/layout/layout.tsx

@@ -1,13 +1,18 @@
-import React, { PropsWithChildren } from "react";
-import { Content, Grid } from "./layout.css";
+import React, { PropsWithChildren } from 'react';
+import { Content, Grid } from './layout.css';
 
 const AppLayout: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
   const { children } = props;
 
   return (
     <div style={Content}>
       <div style={Grid}>
-        <button>Fetch Qualified Segments</button>
+        <div>
+          <a href="/">Validate User Context</a>
+        </div>
+        <div>
+          <a href="/fetch-qualified-segments">Fetch Qualified Segments</a>
+        </div>
       </div>
       {children}
     </div>

bug_bash/src/pages/fetch-qualified-segments/fetch-qualified-segments.tsx

@@ -1,31 +1,29 @@
-import React, { useEffect, useState } from "react";
-import {
-  createInstance,
-  OptimizelyProvider,
-  useDecision,
-} from "@optimizely/react-sdk";
-import { OptimizelyReturnType } from "./fetch-qualified-segments.types";
+import React, { useEffect, useState } from 'react';
+import { createInstance, OptimizelyProvider, useDecision } from '@optimizely/react-sdk';
+import { OptimizelyReturnType } from './fetch-qualified-segments.types';
+import { OptimizelySegmentOption } from '@optimizely/optimizely-sdk';
 
 const optimizelyClient = createInstance({
   sdkKey: process.env.REACT_APP_OPTIMIZELY_SDK_KEY,
 });
 
 export const FetchQualifiedSegments: React.FC = () => {
-  const [isSegmentsFetched, setIsSegmentsFetched] = useState<boolean | null>(
-    null
-  );
+  const [isSegmentsFetched, setIsSegmentsFetched] = useState<boolean | null>(null);
   const [readyResult, setReadyResult] = useState<OptimizelyReturnType>();
 
-  const [userId] = useState<string>("matjaz-user-1");
+  const [userId] = useState<string>('matjaz-user-1');
   // const [userId] = useState<string>("matjaz-user-2");
   // const [userId] = useState<string>("matjaz-user-3");
+  // const [userId] = useState<null>(null);
 
   const prepareClient = () => {
-    console.log("optimizelyClient");
+    console.log('optimizelyClient');
     optimizelyClient.onReady().then(async (res: any) => {
       setReadyResult(res);
       setIsSegmentsFetched(true);
       // console.log(optimizelyClient.isReady());
+      await optimizelyClient.fetchQualifiedSegments();
+      await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
     });
   };
 
@@ -40,11 +38,7 @@ export const FetchQualifiedSegments: React.FC = () => {
       user={{ id: userId }}
     >
       {readyResult?.success && (
-        <div>
-          {`Is segments fetched for user ${userId}: ${
-            isSegmentsFetched ? "Yes" : "No"
-          } `}
-        </div>
+        <div>{`Is segments fetched for user ${userId}: ${isSegmentsFetched ? 'Yes' : 'No'} `}</div>
       )}
       {readyResult && !readyResult.success && (
         <div>

bug_bash/src/pages/validate-user-context/test-component.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import { ReactSDKClient, withOptimizely } from '@optimizely/react-sdk';
+
+function TestComponent(props: any) {
+  console.log(props);
+  const { optimizely } = props;
+  const client: ReactSDKClient = optimizely;
+  useEffect(() => {
+    console.log(client.user.id);
+  }, []);
+
+  return <div>TestComponent</div>;
+}
+
+export default withOptimizely(TestComponent);

bug_bash/src/pages/validate-user-context/validate-user-context.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { createInstance, OptimizelyProvider, useDecision, withOptimizely } from '@optimizely/react-sdk';
+import { OptimizelyReturnType } from '../fetch-qualified-segments/fetch-qualified-segments.types';
+import TestComponent from './test-component';
+
+const optimizelyClient = createInstance({
+  sdkKey: process.env.REACT_APP_OPTIMIZELY_SDK_KEY,
+});
+
+export const ValidateUserContext = () => {
+  // This should create a user with id matjaz-user-1, and create an vuid in the local storage
+  const [userId] = useState<string>('matjaz-user-1');
+
+  // This should create a user with id matjaz-user-1, and create an vuid in the local storage
+  //   const [userId] = useState<null>(null);
+
+  // inspect network tab, you should see that the vuid_xxxxx is not sent in the request, instead 'vuid_overridden' is sent as the vuid and there shouldnt be a fs_userid sent
+  //   const [userId] = useState<string>('vuid_overridden');
+
+  const [readyResult, setReadyResult] = useState<OptimizelyReturnType>();
+
+  const prepareClient = () => {
+    optimizelyClient.onReady().then(async (res: any) => {
+      setReadyResult(res);
+    });
+  };
+
+  useEffect(prepareClient, []);
+
+  return (
+    <OptimizelyProvider
+      optimizely={optimizelyClient}
+      // Generally React SDK runs for one client at a time i.e for one user throughout the lifecycle.
+      // You can provide the user Id here once and the SDK will memoize and reuse it throughout the application lifecycle.
+      // For this example, we are simulating 10 different users so we will ignore this and pass override User IDs to the useDecision hook for demonstration purpose.
+      user={{ id: userId }}
+    >
+      {readyResult && (
+        <>
+          <div> UserID: {optimizelyClient.user.id === null ? 'null' : optimizelyClient.user.id}</div>
+          <div> Vuid: {localStorage.getItem('optimizely-vuid')}</div>
+        </>
+      )}
+      {/* {readyResult && !readyResult.success && (
+        <div>
+          Client failed to intialized. Check console for more details.
+          <div>Reason: {readyResult.reason}</div>
+          <div>Message: {readyResult.message}</div>
+        </div>
+      )} */}
+      <TestComponent />
+    </OptimizelyProvider>
+  );
+};
+
+export default ValidateUserContext;